I have some trouble with setting the width of columns in my grid. I want to achieve that the most left column is at startup (of the application) 200 pixels width but is still resizeble. This is my code:
<Grid x:Name="MainGrid" Width="1000" Height="600">
<Grid x:Name="MainGrid" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="500"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
</ScrollViewer>
</Grid>
</Grid>
My problem is that I don't know how to set the startwidth of the columns. Maybe I used the wrong search words, but I couldn't find anything that solves my problem
Current Newest Code:
<Window x:Class="ServerWPF.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:ServerWPF"
mc:Ignorable="d"
Title="Chat Server" ResizeMode="CanMinimize" SizeToContent="WidthAndHeight">
<Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="500"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="0" x:Name="textBox" Text="Doei, Hoi" MinWidth="200"/>
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox Grid.Column="2" x:Name="textbox1" Text="Hoi, Doei" MinWidth="200"/>
</ScrollViewer>
</Grid>
</Window>
This worked for me, just set the starting width as the width. No need to set it again an all of the child elements that will resize to fit their containers.
I set MaxWidth on the left box to prevent it from scrolling content in the right box out of the visible area.
<Grid x:Name="MainLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="200" MaxWidth="495" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" MinWidth="500" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textBox" Text="Left" />
</ScrollViewer>
<GridSplitter Grid.Column="1" x:Name="gridSplitter" HorizontalAlignment="Center" Height="auto" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" Background="#FF464444"/>
<ScrollViewer Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Visible">
<TextBox x:Name="textbox1" Text="Right" />
</ScrollViewer>
</Grid>
Try like below,
<Grid x:Name="GridLeft" HorizontalAlignment="Left" Height="600" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200"/>
<ColumnDefinition Width="5" />
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
</Grid>
Width="*" will divide your total space with the count of Width="*" and set the width for the column. so remove it and if you need you can use Width="Auto" which will take the width of the item inside the column.
Related
I have defined the following XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="500" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="2,2,5,2">
<GroupBox Header="Computer">
<DockPanel>
<ComboBox MinWidth="100" Name="cmbComputerNames" IsEditable="True" DockPanel.Dock="Left" HorizontalAlignment="Stretch" Width="auto" />
<Button Content="Connect" Name="bConnect" Width="65" HorizontalAlignment="Right" />
</DockPanel>
</GroupBox>
</StackPanel>
<Button Grid.Column="1" Content="Two" Margin="1,2,5,2" />
<Button Grid.Column="2" Content="Three" Margin="1,2,2,2" />
<GridSplitter Height="100" Width="4" Grid.Column="0"/>
<GridSplitter Height="100" Width="4" Grid.Column="1"/>
</Grid>
So, the left grid column is resizable. I want the "Connect" button to remain right-aligned and with same width. The combobox however, should be left-aligned and the width should grow as the column is resized, so the distance to the connect button remains the same.
Doesn't work:
Can anyone tell me how I can achieve that?
Since this is too long for a comment
Replace DockPanel with Grid and try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GroupBox Header="Some text here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox MinWidth="100"/>
<Button Grid.Column="1" Content="A button" Margin="5"/>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Width="10"/>
<Button Content="some button" Grid.Column="2"/>
</Grid>
#Andy, if you could produce an answer then I will delete mine.
I have a simple application with a Treeview and a main content area in a grid. The grid has a gridsplitter to resize, but this does not resize the Treeview.
I have read this is a bug,
but what is the simplest way to resize the Treeview?
<Window x:Class="TestGridSplitter.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0">
<TreeViewItem>
My Treeview
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1" Width="5"/>
<TextBlock Grid.Column="2">
Main Content Area
</TextBlock>
</Grid>
Setting horizontal alignment or contentalignment to Stretch, does not work!
Moreover, it is necessary to set other properties of GridSplitter such as ResizeDirection="Columns" and ResizeBehavior="PreviousAndNext" properties. For example:
<GridSplitter Grid.Column="1" Width="5" ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext"/>
Try the next approach:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#feca00">
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">
Left Hand Side
</TextBlock>
</StackPanel>
<GridSplitter Width="4" Grid.Column="1" Background="Red" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Border Grid.Column="2" BorderBrush="#58290A" BorderThickness="5" CornerRadius="10">
<TextBlock FontSize="25" Foreground="#FECA00" TextWrapping="Wrap">
Right Hand Side
</TextBlock>
</Border>
</Grid>
I have the following window with some input textboxes. But these textboxes will not expand to fill the remaining space of the second column. Furthermore when the window resizes the textboxes doesn't resize accordingly,
Here is my window
Here is my XAML markup
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="28"></RowDefinition>
</Grid.RowDefinitions>
<Label Content="First Name" Grid.Column="0" Grid.Row="0"></Label>
<Label Content="Last Name" Grid.Column="0" Grid.Row="1"></Label>
<Label Content="Street Name" Grid.Column="0" Grid.Row="2"></Label>
<Label Content="Suburb" Grid.Column="0" Grid.Row="3"></Label>
<Label Content="City" Grid.Column="0" Grid.Row="4"></Label>
<TextBox Width="313" Grid.Column="1" Margin="3" HorizontalAlignment="Left"/>
<TextBox Width="313" Grid.Column="1" Grid.Row="1" Margin="3"
HorizontalAlignment="Left" ></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="2" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="3" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="4" Margin="3"
HorizontalAlignment="Left"></TextBox>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="5"
HorizontalAlignment="Right">
<Button Content="Save" Grid.Column="1" Grid.Row="5" Width="100" Margin="3" />
<Button Content="Exit" Grid.Column="1" Grid.Row="5" Width="100"
HorizontalAlignment="Right" Margin="3"></Button>
</StackPanel>
<!--<TextBox Width="313" Grid.Column="1"></TextBox>-->
</Grid>
</Window>
Is there away to expand the textboxes to fill the remaining space in the second column?
Is there away to make the textboxes resize with the form resize?
You have the Width hardcoded, so it is always going to stay the same. Remove it, and change the alignment to stretch
<TextBox Grid.Column="1" Margin="3" HorizontalAlignment="Stretch">
Just a note, if somebody facing with the same problem:
For me the problem was that I use the SharedSizeGroup on the grid for both of my 2 columns.
If i deleted the sharedsizegroup="b" on the columns what is *, the problem solved.
<StackPanel Orientation="Vertical"
Grid.IsSharedSizeScope="True">
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Size (m): " />
<TextBox x:Name="RealObjSize"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjSize_OnTextChanged" />
</Grid>
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Distance (m): " />
<TextBox x:Name="RealObjDist"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjDist_OnTextChanged" />
</Grid>
</StackPanel>
just put HorizontalAlignment="Stretch" and remove the Width
I have a WPF Window that has a custom border, Thumb controls for resizing, and a two-column layout. The right column (main content area) is a UserControl with a ScrollViewer, so it scrolls as needed. I want to add a ScrollViewer to the left column, but when I do, at runtime it gives me
Initialization of 'System.Windows.Controls.Primitives.ScrollBar' threw an exception.
with an inner exception of
Unable to cast object of type 'MS.Internal.NamedObject' to type 'System.Windows.FrameworkTemplate'.
If I take the ScrollViewer out, everything works fine again.
Here's the basic XAML (with the ScrollViewer wrapped around the TaskPane ItemsControl):
<Window x:Class="MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="525" MinWidth="200"
Height="350" MinHeight="85"
FontFamily="Segoe UI"
AllowsTransparency="True" Background="Transparent"
ResizeMode="CanResize" WindowStyle="None">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<TextBlock Name="Caption" Text="My Window"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<!-- Minimize/Maximize/Close buttons -->
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Grid.Row="1">
<ItemsControl Name="TaskPane">
...
</ItemsControl>
</ScrollViewer>
<StackPanel Name="MainContent" Grid.Column="1" Grid.Row="1" Orientation="Vertical">
...
</StackPanel>
</Grid>
</Grid>
<ResizeGrip Name="ResizeGrip" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="16" Height="16" Padding="0 0 18 18"/>
<Thumb Name="TopLeftThumb" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="TopLeftThumb_DragDelta"/>
<Thumb Name="TopThumb" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Opacity="0" Cursor="SizeNS" DragDelta="TopThumb_DragDelta" />
<Thumb Name="TopRightThumb" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="TopRightThumb_DragDelta"/>
<Thumb Name="LeftThumb" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" DragDelta="LeftThumb_DragDelta" />
<Thumb Name="RightThumb" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" DragDelta="RightThumb_DragDelta" />
<Thumb Name="BottomLeftThumb" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="BottomLeftThumb_DragDelta"/>
<Thumb Name="BottomThumb" Grid.Column="1" Grid.Row="2" VerticalAlignment="Bottom" Opacity="0" Cursor="SizeNS" DragDelta="BottomThumb_DragDelta" />
<Thumb Name="BottomRightThumb" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="BottomRightThumb_DragDelta"/>
</Grid>
</Border>
I've searched online, but can find anything on this. I've tried creating another UserControl with a ScrollViewer as the layout root, and get the same error.
By any chance do you have a ScrollViewer style defined in any of your resources somewhere? I saw this link which may be related: http://blog.alner.net/archive/2010/05/07/wpf-style-and-template-resources_order-matters.aspx
The error usually occurs when one style uses a 2nd style, but that 2nd style gets added after the 1st one does. Rather hard error to diagnose.
Don't know if this is the issue, but you didn't set the row and column of the 'StackPanel' after 'ScrollViewer'.
I want a layout like VS 2008. In which I want two columns and second columns is again split into two.
I done that in the xaml mentioned below, but the GridSplitter is not visible vertically ( which split two columns).
I want both the GridSplitters to be resizable. One GridSplitter resizes the Left Hand Pane and Right Hand Pane and another GridSplitter resizes the subgrid's top pane and right pane..
The Second GridSplitter is working through this XAML but I am not able to produce XAML code that Splits the Right hand Pane and Left hand pane..
Pleas Help!!
<Window x:Class="AlarmUI_2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Grid.Column="0" ResizeDirection="Auto"
Grid.RowSpan="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>
</Window>
Change your vertical Splitter to
<GridSplitter Grid.Column="0" Width="5" ResizeDirection="Auto"
Grid.RowSpan="1"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"/>
This will be much better way to use GridSplitter
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Background="Gray" HorizontalAlignment="Stretch"/>
<ListBox Grid.Row="2" Background="Violet">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>
The GridSplitters should probably be on their own row/column in the grid, not sharing a cell with the other controls.
Your gridsplitter is behind the other controls that's why you can't see it. You can either move it to the bottom in your XAML file (so it is added last) or use the Panel.ZIndex attached property. Additionally you have to set the width for the splitter correctly correctly:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
<GridSplitter Grid.Column="0" ResizeDirection="Columns"
Grid.RowSpan="1" Width="5"
HorizontalAlignment="Right"/>
</Grid>
I have acheived the functionality, the XAML is mentioned below:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter HorizontalAlignment="Right" ResizeDirection="Columns" Width="5" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>