Develop Reference

WPF datagrid MinWidth=auto MaxWidth=*

I have a seemingly simple use case but its been troubling me for hours
I have a grid with two rows and two columns, the first column should take all the available width and the second column should take the width it requires. The problem is with the 'required width' of the second column. This column contains a datagrid in the top row and a label (for simplicity) in the bottom row.
The datagrid has two columns which should both take up 50% width of the datagrid.
I want:
If the label is wider than the datagrid the datagrid should scale up (and NO semi column MAY appear at the end of the datagrid filling up the remaining space)
If the datagrid is wider than the label, the column may not be
smaller than the required size for the datagrid.
The problem:
If I set the datagrid columns to take all available space (width='*') it works if the label is bigger than the datagrid (but if the label is smaller the datagrid shrinks to the width of the label, and not al text is readable)
If I set the columns to 'autosize' it works is the label is smaller than the datagrid (but if the label is bigger the 'semi' column appears (and it really hurts my eyes)).
The code:
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="200" Width="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Name="grid">
<!-- Change column width to simulate the problemn-->
<DataGrid ItemsSource="{Binding Items}" ColumnWidth="*" RowHeaderWidth="0" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"/>
</Grid>
<!-- change label text to simulate problemn-->
<Label Grid.Row="1" Grid.Column="1" Content="x"/>
</Grid>
The binding to the actual width of the grid is to have the columns scale up correctly
The Items is a List of objects (which contain two string values)

This is dirty and would probably cause me to rethink my design, but it works based on your requirements. I'm not sure how else to achieve this without creating a custom control or greatly modifying the DataGrid default template, but here goes.
Change your DataGrid styling to this and give names to both the Label and the DataGrid.
<DataGrid Name="dg" ItemsSource="{Binding Items}" CanUserResizeColumns="False"/>
///
<Label Grid.Row="1" Grid.Column="1" Content="x" Name="label"/>
Then create a ContentRendered event for your MainWindow.
Title="MainWindow" Height="450" Width="800" Name="mw" ContentRendered="Mw_ContentRendered">
Now in the render event, manually resize columns after the render occurs. You can't assign a star to the width as it won't resize correctly, so you need to divide your widths evenly base on column count.
private void Mw_ContentRendered(object sender, EventArgs e)
{
//Loop through columns and resize
for (int x = 0; x < dg.Columns.Count; x++)
{
double div = dg.ActualWidth / dg.Columns.Count;
double add = div - dg.Columns[x].ActualWidth;
if (add < 0) { div += -add; }
dg.Columns[x].Width = new DataGridLength(div);
}
}
EDIT: Updated width logic to account for uneven widths

I ended up creating my own user control.
This was relatively easy as I know at design time which rows I will have in the 'datagridview'.
Tronald's suggestion works, provided that the data does not change after rendering (mine does, both the datagrid contents and the 'label' change based on selections made in the rest of the application).
I still think that the 'Width="*" MinWidth="auto"' combination should be possible for a datagrid so If anybody has a solution.

Multiple list views - auto height for all of them

I'm trying to resolve some layout problems in my Xamarin.Forms application. For example, when height of content is higher than body content height, then lists will collapse.
I have undefined amount of lists with custom item templates. I want to remain all height of each list and have possibility of scrolling them.
I tried use StackLayout but it doesn't support scrolling. When I use ScrollView, the Auto property doesn't work correctly (there is ambigous space between each of lists).
My code looks like this:
<Grid>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> //Header
...
</Grid>
<StackLayout Grid.Row="1"> //Group of lists
<ListView x:Name="firstList" ItemTemplate="..." ItemsSource="...">
</ListView>
<ListView x:Name="secondList" ItemTemplate="..." ItemsSource="...">
</ListView>
...
</StackLayout>
</Grid>
How can I position these lists on full height?

What you try to achieve is very ambiguous from the mobile app perspective. Think the other way around: While your screen is full of stacked ListViews, how would the system know it has to scroll down the page or scroll down the current ListView?
Also nesting ListView into ScrollView is a very bad practice because:
ListView implements its own scrolling.
ListView will not receive any gestures -> they will be handled by the parent ScrollView.
also ListView can have customized header and footer that scrolls with the elements of the list, potentially offering the functionality that the ScrollView was used for.
If you want to stick to this layout, your option here would be to design your own implementation of your control using custom renderers and manage the gesture.
Hope it helps and happy coding!

Controls overlapping tabitem wpf c#

I have a TabControl,inside one Tabitem, i have a grid and my userControl inside the grid:
<TabControl>
<TabItem>
<Grid HorizontalAlignment="Left" Height="64" Margin="288,150,0,0" VerticalAlignment="Top" Width="354">
<Canvas>
<local:MyCustomComboBox x:Name="ucc1" HorizontalAlignment="Left" Grid.RowSpan="2" Grid.ColumnSpan="3" Height="30" VerticalAlignment="Top" Width="194" ClipToBounds="True"/>
<Canvas>
</Grid>
<TabItem>
<TabControl>
By default,when the userControl's size is greater than the grid's/TabItem's size,the extra portion can't be seen.How can i make my UserControl overlap it ? I tried to add RowSpan and ColumnSpan but it didn't work :(

TabItem has it's own bounds which u cannot overlap.So,there's no way u can achieve your goal ... But i always try my best to help people, so here's a quick tip :
If the usercontrol is bigger than the gird
Your userControl XAML includes MyCustomComboBox, which makes me think it is a combobox..I've seen your previous post where you wanted to customize your combobox but couldn't quite achieve your goals...So, are you trying to create you own custom combobox and by usercontrol bigger than the grid , did u mean that the drop down menu u created doesn't go outside the grid rather is clipped to the grid ??
If this is the case , u can use a ContextMenu and move your custom drop-down list there.Then the contextMenu will overlap both the TabItem and Grid as it is a window itself.
Also , NOTE that u cannot use Named content in usercontrol(u can but that requires a workaround).So i suggest you to add all required code behinds , even set required binding from the user-control's code behind.
Hope this helps :)

Winrt Xaml Grid ROw not filling Space with *

I have the problem, that my Grid is not filling the space as I want it.
Here some code:
<HubSection>
<Grid Width="850">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
<RowDefinition Height="310"/>
</Grid.RowDefinitions>
<Input:RadDatePicker Grid.Row="0" Value="{Binding CurrentDate, Mode=TwoWay}" />
<ListView
Grid.Row="1">...
</ListView>
<Grid Height="310"
Grid.Row="2">...
</Grid>
...
I want that the middle row is filling the space up of the hubsection. Instead it now just fills up when the listview contains enough items.
Any idea?
Now the filled ListView:

I would try setting the VerticalContentAlignment of the HubSection to Stretch as well as setting the VCA of the outer grid to that option. I'm suspecting the default might be Center or Top and so the minimizing vertical alignment control from the parent control and the expanding star-sized row setting of the inner grid come in a little bit of a conflict that some layout prioritizing rules probably resolve in getting the VCA rule to win.
For similar layout issues it is usually best to analyze with a visual tree debugger such as the XAML Spy or WinRT XAML Toolkit. You can also try tracing these various properties by walking the visual tree with the VisualTreeHelper class yourself.

How to combine Semantic Zoom and Listbox for Snapped View

I have a Grouped Items Page created from VS11 template. This page has a GridView for normal view and a ListView that is shown when the page is snapped. I need to implement Semantic Zoom and still be able to snap the page.
I tried moving the GridView SemanticZoom.ZoomedInView so I have
<ScrollViewer x:Name="itemListScrollViewer" ...
<Listview ...
</ScrollViewer>
<SemanticZoom Grid.Row="1" >
<SemanticZoom.ZoomedInView>
<GridView ...
</SemanticZoom.ZoomedInView>
</SemanticZoom>
When the page is not snapped the ListView is hidden and when the page is snapped the gridView is hidden. The problem is that in snapped view the ListBox does not scroll and does not react to item clicks.

Do you want the snapped view to also have semantic zoom? In those cases, what I have done is implement two different SemanticZooms, one for landscape and one for snapped, and then showed only the correct one for current visual state. So starting point would be this:
<SemanticZoom x:Name="semanticZoom" Visibility="Visible">
<SemanticZoom.ZoomedOutView>
<GridView ...
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView ...
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<SemanticZoom x:Name="semanticZoomSnapped" Visibility="Collapsed">
<SemanticZoom.ZoomedOutView>
<ListView ...
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<ListView ...
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Or if you don't need semantic zoom in the snapped mode, just try your current approach but try hiding the SemanticZoom element instead of the GridView inside it. And of course make sure that ListView's isItemClickEnabled is set to true etc.
P.S. I suppose where you say ListBox you mean ListView? Since an element called ListBox also exists.

I found a very strange way to fix the problem. When I switch the ordet of SemanticZoom an ScrollViewer like
<SemanticZoom Grid.Row="1" >
<SemanticZoom.ZoomedInView>
<GridView ...
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<ScrollViewer x:Name="itemListScrollViewer" ...
<Listview ...
</ScrollViewer>
Than everything works. Any idea why?