I'm trying to create a sizable column that contains also horizontal gridsplitter.
The code is XAML for WPF:
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Stretch"
Grid.Row="1" Grid.ColumnSpan="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
I can create one of them separate. But I want both.
To make more grids in a form, I use the dockpanel. Maybe this isn't necessary, but if I don't it generates errors.
Where do I go wrong? Anyone has a clue?
Try this :
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FFBCBCBC" Height="2"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
Related
So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>
The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.
I do not understand why the alignment of my (generated) XAML code is wrong.
XAML:
<ScrollViewer>
<StackPanel Orientation="Vertical">
<HeaderedContentControl Header="innerer Ex-Schutz Anforderung">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX02"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Zone"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX04"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Gruppe"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][0173-1---ADVANCED_1_1#01-ADN507#007/0173-1#01-ADR534#007/0173-1#02-AAR158#007/0173-1#02-AAR159#005/0173-1#02-AAQ920#005/0173-1#02-AAO370#004]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="IX06"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Temp.klasse"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[This][0173-1---ADVANCED_1_1#01-ADN507#007/0173-1#01-ADR534#007/0173-1#02-AAR158#007/0173-1#02-AAR159#005/0173-1#02-AAQ920#005/0173-1#02-AAO371#004]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
</Grid>
</HeaderedContentControl>
<HeaderedContentControl Header="äußerer Ex-Schutz Anforderung">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX02"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Zone Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideZone]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX04"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Ex-Gruppe Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideGroup]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
<Grid HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Margin="0,0,2,0" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="0" Stroke="Transparent" Fill ="#FFFFFF88"/>
<TextBlock Margin="5" Grid.Column="0" Text="AX06"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" Margin="0,0,5,0" Text="Temperaturklasse Umgebung"/>
<mvvmui:VmpEditor Grid.Column="2" DataContext="{Binding Data[CboProcessConnection].PropertyList[EPROutsideTempClass]}" ShowCaption="False" WrapReadOnlyText="True"/>
</Grid>
</Grid>
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>
Here you can the the result:
Its not easy to see but the two yellow boxes on the right side should be exactly under each other. But the lower is a few pixels to the right.
Does anyone understand that?
Interestingly, when you enter a fixed width to the StackPanel (say, 1500), it works. But I do not want a fixed width.
You’ve got auto-width columns in separate grids. If you want columns in two different grids to be the same width, you have three options:
Fixed size. That’s lame and you don’t want it.
Put everything in one big grid.
Put Grid.IsSharedSizeScope=“True” on some common parent element of both grids, and add SharedSizeGroup=“SomeArbitaryName” on the autosized columns that are sizing slightly differently in the two different child grids, and which are positioning the third columns differently as a result (that’s the first column in each). This is the best solution in your case, I believe.
I have a grid that contains one ItemsControl with another grid. I would like to align the two splitters in the two grids. I have implement Grid.SharedSizeScope but this option shared only the column of the grid is located. Do you have any suggestions?
This is my xaml code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource GridRowHeight}"/>
<RowDefinition Height="{StaticResource GridRowHeight}"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="5" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="ID" Grid.Row="0" Grid.Column="0" Text="ID"/>
<TextBox Name="TxtID" Grid.Row="0" Grid.Column="2" TabIndex="0" Text={Binding ID}/>
<TextBlock Name="Description" Grid.Row="1" Grid.Column="0" Text="Description"/>
<TextBox x:Name="TxtDescription" Grid.Row="1" Grid.Column="2" Grid.RowSpan="1" Text="{Binding Description, UpdateSourceTrigger=LostFocus}"/>
<ItemsControl ItemsSource="{Binding MyList}" Grid.IsSharedSizeScope="True" IsTabStop="False"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2147483647" Width="5" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="Type" Grid.Column="0" Grid.Row="0" Text="{Binding Type}"/>
<ComboBox Grid.Row="0" Grid.Column="2" ItemsSource="{Binding Source={StaticResource Types}}" SelectedItem="{Binding MyType}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
ok, what if you will actually take out the itemscontrol and move it outside the grid and then put everything into dockpanel ?
<DockPanel Grid.IsSharedSizeScope="True">
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="5" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="ID" Grid.Row="0" Grid.Column="0" Text="ID"/>
<TextBox Name="TxtID" Grid.Row="0" Grid.Column="2" TabIndex="0" Text="ID"/>
<TextBlock Name="Description" Grid.Row="1" Grid.Column="0" Text="Description"/>
<TextBox x:Name="TxtDescription" Grid.Row="1" Grid.Column="2" Grid.RowSpan="1" Text="123"/>
</Grid>
<ItemsControl IsTabStop="False"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Col2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2147483647" Width="5" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="Type" Grid.Column="0" Grid.Row="0" Text="123"/>
<ComboBox Grid.Row="0" Grid.Column="2"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
I've created a TabItem with a default layout that have 3 columns and one row. Inside the first column I've inserted a StackPanel and put inside another Grid that have 3 columns and 3 rows. Now the problem's that inside the second Grid I've created a GroupBox with a StackPanel and I've set Grid.Column="2" but the controls inside the GroupBox doesn't go in the second column of the second Grid and I don't know what am I doing wrong. This is my code:
<TabItem Header="Confronto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Header="Informazioni Squadre" Height="Auto" Grid.ColumnSpan="3" Grid.RowSpan="3">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</GroupBox>
</Grid>
</StackPanel>
</Grid>
</TabItem>
As mentioned in the comment you can set Grid.Column and Grid.Row only on direct children of the Grid. Your inner Grid has only one direct child (GroupBox) and Grid.Column \ Grid.Row will work only on that element.
You can reverse the order and put inner Grid inside GroupBox. As a side not Grid.Column="2" will put it in the 3rd column of the inner Grid not the second (it's indexed from 0)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<GroupBox Header="Informazioni Squadre" Height="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</Grid>
</GroupBox>
</StackPanel>
</Grid>
I am trying to limit the height of a DockPanel (well the content acually) to the remaining UserControl Height with a ScrollViewer in it to scroll if its too big.
I have a window wich uses a ContentController to hold the different UserControls
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- 0 Menu -->
<RowDefinition Height="auto"/>
<!-- 1 Header -->
<RowDefinition Height="65"/>
<!-- 2 Content -->
<RowDefinition Height="*"/>
<!-- 3 Space -->
<RowDefinition Height="10"/>
<!-- 4 Status line -->
<RowDefinition Height="auto"/>
<!-- 5 Space -->
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<!--...-->
<ContentPresenter Content="{Binding Path=MainWindowContent}" Grid.Column="0" Grid.Row="2"/>
<!--...-->
</Grid>
</Window>
The UserControl wich I having trouble with is just a search for users and the output of the results. It does look like this:
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="25"/>
<RowDefinition Height="auto" />
<RowDefinition Height="10" />
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- input fields -->
<DockPanel Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="6" LastChildFill="True" VerticalAlignment="Stretch" Background="{StaticResource PrimaryCorporateBrush}">
<TextBlock Style="{StaticResource HeadlineOutputLabel}" DockPanel.Dock="Top"/>
<Separator Opacity="0" Height="10" DockPanel.Dock="Top"/>
<TextBlock Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2RevertedVisibility}}" Margin="10" DockPanel.Dock="Top"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2Visibility}}">
<ItemsControl ItemsSource="{Binding Path=Members}" VerticalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Tag="{Binding}">
<!-- Result Element -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
</Border>
</Grid>
<Grid Grid.Column="3" Grid.Row="1">
<!-- info display -->
</Grid>
</Grid>
</UserControl>
I intent to limit the Results ScrollViewer height to the remaining visible space of the window, and if the results exceed it to display a scrollbar. But right now the DockPanel keeps extending the ScrollViewer and nested ItemsControl height till all elements are placed but does NOT show the ScrollBar.
I am a bit lost here why it does that, shouldn't the DockPanel limit the Height to the visible space? tried it with putting buttons instead of ItemsControl, nothing no ScrollBar.
I found the solution!
Further up in the Grid structure there was a row set to "auto" instead of "*" and ScrollViewer seems to only function properly with latter.