Develop Reference

C#/.xaml Having problem with WPF pages, grid vertical expansion

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.

Can't set specific column in Grid

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>

Select center control/column

I have a grid with multiple controls and I want to choose which of these controls (or which of the grid columns) will be in the center, and then have the other columns/controls just placed adjacent to it. How would I do that?

Update:
The following pattern:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="MainControl's height"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="MainControl's width"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
will always force MainControl to be centered, as long as other controls will be defined in the * parts. In other words if position [1,1] in the above Grid contains your MainControl, you can define different Grids with different row/column definitions for positions [0,0], [0,1], ..., [2,2] to wrap more controls with custom size in custom locations.
For example this xaml:
<Window Title="MainWindow" Height="600" Width="800" >
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="50"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="0,0"/>
<Button Grid.Row="0" Grid.Column="1" Content="0,1"/>
<Button Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Button Grid.Row="2" Grid.Column="2" Content="2,2"/>
</Grid>
<Button Background="LightBlue" Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Grid Grid.Row="2" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="35"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Content="0,0"/>
<Button Grid.Row="1" Grid.Column="0" Content="1,0"/>
<Button Grid.Row="1" Grid.Column="1" Content="1,1"/>
<Button Grid.Row="2" Grid.Column="0" Content="2,0"/>
<Button Grid.Row="2" Grid.Column="2" Content="2,2"/>
</Grid>
</Grid>
</Window>
Will locate the controls this way:

What are you trying to achieve in terms of layout? Your grid strategy will determine how the whole layout behaves, especially if you expect it to scale in regards to the window size. If you want the layout to react to the window size, then you use "Auto" and "Star sizing" strategies. If you actually don't care about resizing and you expect a fixed layout, then you can share grid sizes across columns.
Scenario 1-
If you are trying to purely achieve a middle column which contains objects of unknown size, and this column must be perfectly centered, then you need to buffer this middle column with a left and right column, as per Bahman_Aries' example.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
The result from this is that items placed in the middle column will consume as much width as they need (the desired render width), and the two left over columns will split in two the remaining space, because each have a value of 1*. In other words, if your middle column object requests 200 width, and your window has 1000 total width, the left and right columns will both have 400 (800/2).
Note that star sized columns will crop your content when you reduce the window size. This is by design. You could consider wrapping your layouts in ViewBoxes (or the whole grid) if you want your ratios to persist.
Scenario 2-If you are looking for just a grid which lays out content with no regards to scaling, (re: the middle column consumes what it needs, and then the left and right columns grow equally when they have large content) then you can use the SharedSizeScope feature.
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="MyRatio"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MyRatio"/>
</Grid.ColumnDefinitions>
</Grid>
What this will achieve is that whenever your column 2 grows, it will also propagate its size to column 0, essentially ensuring that your column 1 is always centered.
The main difference from Scenario 1 is that Scenario 2 will have a fixed size according to its child elements, whereas Scenario 1 has a structure which behaves in accordance to its parent container.
Edit: Scenario 1 with an explicit example:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" x:Name="TheLeftComponents" Orientation="Horizontal" HorizontalAlignment="Right" >
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
</StackPanel>
<Ellipse x:Name="TheMiddleComponent" Grid.Row="1" Grid.Column="1" Height="40" Width="40" Stroke="Black" StrokeThickness="1" ></Ellipse>
<StackPanel Grid.Row="1" Grid.Column="2" x:Name="TheRightComponents" Orientation="Horizontal" HorizontalAlignment="Left" >
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
<Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
</StackPanel>
</Grid>

Combination of ScrollViewer and Grid not working as expected

I defined the following DialogWindow:
<ui:DialogWindow x:Class="CodeElementRatingWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
Title="CodeElementRatingWindow" Height="600" Width="800">
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px">
<Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
</ui:DialogWindow>
The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.
I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?

Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
<Grid Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>

How to create a horizontal gridsplitter within a sizable column

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>