wpf can't find control coordinates info - wpf

I have a Group Box that contain a Stack Panel that contains a Combo Box (A) and a Text Box. And I have another Stack Panel (B) that contains a combo Box and a Label.
I would place the Combo Box B on the same level as Combo Box A (same y) using xaml code.
Please note that the GroupBox and and the Stack Panel(B) are placed in a grid in the same row, different columns.
I'm trying to bind the y coordinate of the Combo Box (B) to the y coordinate of the Combo Box (A).
Where I can find the coordinates info of wpf controls in the Visual Studio properties window ?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GroupBox Name="AGroupBox" Grid.Row="1" Grid.Column="0" >
<GroupBox.Header>
<Label Content="GroupBox" FontWeight="Bold" />
</GroupBox.Header>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
<ComboBox x:Name="ComboBoxA" Width="100" Height="25" VerticalAlignment="Center"/>
<TextBlock x:Name="TextBlockA" Width="150" VerticalAlignment="Center" Margin="10,0,0,0" Text="This a Test" />
</StackPanel>
</GroupBox>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left">
<Label x:Name="LabelB" Content="LabelB" />
<ComboBox x:Name="ComboBoxB" Width="150" Height="25"/>
</StackPanel>
</Grid>

a close equivalent of using y-coordinate would be using Margin property ... but it is going to break after the first resize attempt.
i think, it is possible to update Margin on resizes, but i would start with a more complex layout, like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--additional Grid used to position comboBoxes on the same height-->
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--group box is used as cover for the 1st column-->
<GroupBox Name="AGroupBox"
Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" >
<GroupBox.Header>
<Label Content="GroupBox" FontWeight="Bold" />
</GroupBox.Header>
</GroupBox>
<!--stack panel with ComboBoxA is centered vertically in the 1st column-->
<StackPanel Grid.Row="1" Grid.Column="0"
Margin="5,0"
Orientation="Horizontal">
<ComboBox x:Name="ComboBoxA" Width="100" Height="25" VerticalAlignment="Center"/>
<TextBlock x:Name="TextBlockA" Width="150" VerticalAlignment="Center" Margin="10,0,0,0" Text="This a Test" />
</StackPanel>
<!--ComboBoxB is centered vertically in the 2nd column-->
<ComboBox x:Name="ComboBoxB"
Grid.Row="1" Grid.Column="1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Width="150" Height="25"/>
<!--Label attached on top of ComboBoxB-->
<Label x:Name="LabelB" Content="LabelB"
Grid.Row="0" Grid.Column="1" VerticalAlignment="Bottom"/>
</Grid>
</Grid>

Related

Button is not showing up in WPF Grid

I have a Grid inside of a Grid but when i try to display a button with text, it doesn't show up.
My WPF has a Grid nested inside of a parent Grid.
<Grid Margin="124,0,0,225">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Test" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="400" Grid.Column="0" Grid.Row="1" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="Enter Amount" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="250" Grid.Column="0" Grid.Row="3" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Column="0" Grid.Row="5" FontSize="14" HorizontalAlignment="Center"/>
<Grid
x:Name="chilGrid"
Width="auto"
Height="auto"
Background="Black"
Grid.Column="0"
Grid.Row="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Button Margin="10, 10, 5, 5" Grid.Column="0" Content="test" Grid.Row="0" Background="Pink"
BorderBrush="Black" BorderThickness="10">
</Button>
</Grid>
</Grid>
Edit# 1:
Modified the button section to this:
<Button Grid.Column="0" Content="test" Grid.Row="0" Background="Pink"
BorderBrush="Black" BorderThickness="1">
</Button>
Still did not work?
`The 'Test' button is not showing up inside the nested Grid?
Your button resides in below grid and it has several values that affect the visibility, like border thickness, margin etc. You can use stackpanel or even simply your existing grid. You don't need column for main grid (for example).
Try below code.
<Grid Margin="124,0,0,225">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Test" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="400" Grid.Row="1" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Row="2" Text="Enter Amount" FontSize="14" HorizontalAlignment="Center"/>
<TextBox Width="250" Grid.Row="3" FontSize="14" HorizontalAlignment="Center" KeyDown="HandleEnterKey"/>
<TextBlock Grid.Row="5" FontSize="14" HorizontalAlignment="Center"/>
<Grid
x:Name="chilGrid"
Width="auto"
Height="auto"
Background="Black"
Grid.Column="0"
Grid.Row="7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="test" Background="Pink"
BorderBrush="Black" BorderThickness="1">
</Button>
</Grid>
</Grid>
and you get something like below.
It's there, but the combination of your margins, and border thickness means it blends in with the black background of the grid.
Make your border thickness 1, and remove the margin and you will see the button.

Trying to get element alignment correct in xaml

I am trying to get the first label and text box to align to the left side of the screen, and the second label and text box to align to the right side of the screen. What am I missing here? The second set of controls will not align to the right.
Thanks in advance!
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Label Content="Active Profile"></Label>
<TextBox Name="activeProfileName" Width="100" Height="20"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Label Content="Create A New Profile"
HorizontalAlignment="Right"></Label>
<TextBox Name="activeProfileNamey"
Width="100" Height="20"
HorizontalAlignment="Right"></TextBox>
</StackPanel>
</StackPanel>
</Grid>
The outter StackPanel is your problem. Use Grid instead. Your question is actually a duplicate of the Aligning controls on both left and right side in a stack panel in WPF
Here is the code with Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Label Content="Active Profile"></Label>
<TextBox Name="activeProfileName" Width="100" Height="20"></TextBox>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" >
<Label Content="Create A New Profile"
HorizontalAlignment="Right"></Label>
<TextBox Name="activeProfileNamey"
Width="100" Height="20"
HorizontalAlignment="Right"></TextBox>
</StackPanel>
</Grid>
</Grid>

Grid rows aren't the (relative) height I set them to

I was working on a UserControl in a View, when I came across this problem:
I set my content grids row heights to be 2*, 1* and 1* with the lines in between set to auto.
Now. The uppermost row has a grid nested in with a TextBlock and a TextBox. The height of the cell is in no way 2*. It looks like it would look if I had set it to auto. I'm pretty sure the other 2 content rows (containing buttons) are the right height either.
Now I hope you guys can help me fix this. I've googled around a bit and I can't seem to find a fitting solution.
Here's the code:
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}">Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
<Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}" />
<StackPanel Grid.Row="2" Orientation="Vertical">
<Button Command="{Binding AddCommand}">Add a new customer</Button>
<Button Command="{Binding UpdateCommand}">Update the selected customer</Button>
<Button Command="{Binding DeleteCommand}">Delete the selected customer</Button>
</StackPanel>
<Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}" />
<StackPanel Grid.Row="4" Orientation="Vertical">
<Button Command="{Binding RefreshCommand}">Refresh the list</Button>
<Button Command="{Binding ClearSelectionCommand}">Clear selection</Button>
</StackPanel>
</Grid>
EDIT: Now with screenshot, as requested. It's the right column I'm talking about (So yes, this UserControl is in itself another nested Grid)
EDIT 2: Here's the containing code. My page consist of three classess.
The 1st (ApplicationView.xaml) is a Window. It has the navigation buttons in the left column, a nice line, and one column containing the view of that specific object. It has no rows.
ApplicationView.xaml
<Grid>
<Grid.Resources>
<ResourceDictionary Source="StylesRD.xaml" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<!-- A DockPanel for the Navigation Buttons-->
<DockPanel Grid.Column="0" Margin="0,20" VerticalAlignment="Top" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{Binding PageViewModels}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"
Margin="2,5"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
<Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
<ContentControl Grid.Column="2" Content="{Binding CurrentPageViewModel}" />
</Grid>
The view (CustomerView.xaml) is the 2nd file. It is a User control and it also has 3 columns, one with the list of Customers in this case, one for the beautiful seperating line (it is beautiful, right? /sarcasm) and the one I'm struggling with right now with the details and the buttons to do stuff.
Here also no rows.
CustomerView.xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- Customer list -->
<view:CustomerListView Grid.Column="0" VerticalAlignment="Top"/>
<Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
<!-- Details -->
<view:CustomerDetailsView Grid.Column="2" VerticalAlignment="Top"/>
</Grid>
Your inner Grid has two RowDefinitions without a height setting. Therefore the default Height="*" will be used for both rows. Your inner grid doesn't need two RowDefinitions, so removing them should fix your issue. So your inner grid definition should look like this:
<Grid>
<!--
remove these row definitions
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}">Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1"
Visibility="{Binding SetVisibility, UpdateSourceTrigger=PropertyChanged}"
Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
Edit:
It works for me as expected. The TextBox and TextBlock get stretched to 2* height, and the two StackPanels have a height of 1* each. Please provide the XAML where you use your user control. Seems like there lies the problem.
Edit 2:
Ah, now I see it. The VerticalAlignment="Top" setting in your CustomerView.xaml pushes your CustomerDetailsView to the top. Either remove this attribute or set the VerticalAlignment to Stretch.
The xaml you provided is working fine, the problem is in the containing xaml. Look at this example xaml.
<StackPanel Orientation="Horizontal">
<Border Background="Yellow">
<local:MyUserControl/>
</Border>
<StackPanel Background="Green">
<local:MyUserControl/>
</StackPanel>
</StackPanel>
And the usercontrol (stripped away bindings and styles)
<UserControl x:Class="WpfApplication3.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Name="TBCustomerTitle" Margin="0,0,8,0" FontWeight="Bold" >Customer:</TextBlock>
<TextBox Name="TBCustomerData" Grid.Column="1" Text="{Binding DisplayedCustomer.Name, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</Grid>
<Line Grid.Row="1" Height="5"/>
<StackPanel Grid.Row="2" Orientation="Vertical">
<Button Command="{Binding AddCommand}">Add a new customer</Button>
<Button Command="{Binding UpdateCommand}">Update the selected customer</Button>
<Button Command="{Binding DeleteCommand}">Delete the selected customer</Button>
</StackPanel>
<Line Grid.Row="3" Height="5"/>
<StackPanel Grid.Row="4" Orientation="Vertical">
<Button Command="{Binding RefreshCommand}">Refresh the list</Button>
<Button Command="{Binding ClearSelectionCommand}">Clear selection</Button>
</StackPanel>
</Grid>
</UserControl>
As you can see the usercontrol located in the stackpanel is not stretching because stackpanel does not stretch it's contents.

WPF, xaml grid with TabControl

I have an application (implemenented in WPF, XAML) which has 6 rows and 6 columns. At the position Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5" , I'm using a TabControl for Dashboard, Housekeeping, and Science. In every TabControl, I'm using a ListBox on the left side to choose individual data. The rest (w/o the ListBox) of the field/grid (which should have a size of 4 rows and 4 columns) is available for charts.
Problem
The charts which are visible in the screenshot below should be stretched over 4 rows down to the bottom edge of the application according to the XAML code. The TabControl is not 4 rows as visible because of the white boarder I have attached.
How can I change my grid-concept that it works as described above? Is a grid in the grid, resp. in the TabControl necessary at all?
Screenshot of the WPF application
MainWindow.xaml
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<!-- Definition of Rows and Columns -->
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="250" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<!-- Header -->
<StackPanel Grid.Row="0" Grid.ColumnSpan="6">
<TextBlock Text="RFM DATA ANALYZER" Margin="20" HorizontalAlignment="Center" FontSize="36" FontWeight="Thin" />
</StackPanel>
<!-- Tabs -->
<StackPanel Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5">
<TabControl TabStripPlacement="Top">
<TabItem Header="Dashboard">
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="1">
<TextBlock Text="Data" Margin="0 50 0 20" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold" FontSize="15" Foreground="LightGray" />
<ListBox >
<ListBoxItem Content="Data 00" />
<ListBoxItem Content="Data 01" />
<ListBoxItem Content="Data 03" />
</ListBox>
</StackPanel>
<oxy:PlotView Model="{Binding Model1}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="1" Grid.ColumnSpan="1" />
<oxy:PlotView Model="{Binding Model2}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="2" Grid.ColumnSpan="1" />
<oxy:PlotView Model="{Binding Model3}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="3" Grid.ColumnSpan="1" />
<oxy:PlotView Model="{Binding Model4}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="4" Grid.ColumnSpan="1" />
</Grid>
</Border>
</TabItem>
<TabItem Header="Housekeeping" Height="40">
<Border BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
etc.
Replace your StackPanels with Grids. StackPanels size to their child elements, whereas Grids size to their parent.
<StackPanel Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5">
<TabControl TabStripPlacement="Top">
...becomes...
<Grid Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5">
<TabControl TabStripPlacement="Top">

Grid Splitter problem in WPF

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>

Resources