Change keyboard focus to a specific control - wpf

I have a usercontrol which has several elements at different logical level. By default, keyboard focus goes to logical control at highest level, but I want to focus to switch to some other control which is deep down in logical tree (but all the controls are loaded when this user control is loaded).
The XAML is shown below, when the OverlayContent (a dialog) goes away, I want focus to move to "EigthLevelTB" a TextBox, but by default control goes to "ThridLevelGB". User can tab and navigate to "EigthLevelTB", but they want default focus to be here rather than tabbing.
I have tried setting focus on this EigthLevelTB in UserControl.Loaded, FocuableChanged events, etc. Also I tried setting KeyboardNavigation.TabIndex="0", but nothing is working for me.
Please suggest what could be going wrong here?
<Grid Name="OverlayGrid">
<Grid Name="TopMostGrid" Grid.Row="1" Margin="1,0,1,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Name="FirstLevelGrid" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Margin="5,10,5,10" Content="{Binding HeaderInfo}" KeyboardNavigation.TabNavigation="None" Focusable="False"/>
<Grid Name="SecondLevelGrid" Grid.Row="1" Margin="1,0,0,0">
<Border Name="ThridLevelBorder" Margin="5,2.5,5,2.5">
<Border Name="FourthLevelBorder">
<Grid Name="FifthLevelGrid">
<Grid Name="SixthLevelGrid" Grid.Column="0" Visibility="{Binding GridVisibility, FallbackValue=Visible}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Name="SeventhLevelGrid" Grid.Row="0" HorizontalAlignment="Center" Margin="2,15,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*" SharedSizeGroup="B"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Text="Enter:"/>
<TextBox Name="EigthLevelTB" Grid.Column="1"
Text="{Binding UserData, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}"
KeyboardNavigation.TabIndex="0">
</TextBox>
</Grid>
</Grid>
</Grid>
</Border>
</Border>
</Grid>
</Grid>
<ScrollViewer Name="FirstLevelScrollViewer" Grid.Column="1" CanContentScroll="True" VerticalScrollBarVisibility="Auto">
<DockPanel Name="SecondLevelPanel" LastChildFill="False">
<GroupBox DockPanel.Dock="Top">
<ContentControl Content="{Binding Legend}" Margin="5" IsTabStop="False" KeyboardNavigation.TabNavigation="None" Focusable="False"/>
</GroupBox>
<GroupBox Name="ThridLevelGB" DockPanel.Dock="Top" Content="{Binding ButtonList}"
Focusable="False" KeyboardNavigation.TabNavigation="Continue"
VerticalAlignment="Top" VerticalContentAlignment="Stretch" >
</GroupBox>
</DockPanel>
</ScrollViewer>
</Grid>
<ContentControl Name="OverlayContent" Content="{Binding OverlayContent}"/>
</Grid>
Thanks,
RDV

Related

How to get Narrator to read the text in a WPF Popup?

I've got a WPF application which contains a button. When you press the button, a Popup opens. The Popup contains information about the meeting in question.
With Narrator turned on, the contents of the Popup are not being read. How do I get Narrator to read the Popup's contents?
Here's a sample of the Popup's contents:
<Popup x:Class="ClassApp.UserInterface.Views.Windows.Settings.MeetingDetailsPopup"
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:languages="clr-namespace:MyApp.UserInterface.CommonUI.Languages"
xmlns:converters="clr-namespace:MyApp.Converters"
xmlns:global="clr-namespace:"
Height="375"
mc:Ignorable="d"
MaxHeight="375"
MaxWidth="500"
StaysOpen="True"
Placement="MousePoint"
Width="500">
<Border BorderBrush="{StaticResource GrayBrush}"
Background="{StaticResource TabSelectedBackgroundBrush}"
BorderThickness="1">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
<RowDefinition Height="Auto"
MinHeight="100"/>
<RowDefinition Height="Auto"
MinHeight="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
AutomationProperties.AutomationId="ClassName"
AutomationProperties.Name="{Binding ClassName}"
FontSize="18"
FontWeight="Bold"
x:Name="ClassName"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{Binding ClassName}"
TextWrapping="Wrap"
VerticalAlignment="Top"/>
<Button Grid.Column="1"
AutomationProperties.Name="{x:Static languages:Resources.Accessibility_CloseWindow}"
AutomationProperties.AutomationId="CloseWindow"
Command="{Binding CloseMeetingInfoCommand}"
Content="X"
FontSize="16"
HorizontalAlignment="Right"
x:Name="CloseButton"
Style="{StaticResource ClassInformationCloseButtonStyle}"
VerticalAlignment="Top"/>
</Grid>
<TextBlock Grid.Column="0"
Grid.Row="1"
AutomationProperties.Name="{x:Static languages:Resources.Label_MeetingID}"
FontSize="14"
Foreground="{StaticResource GrayBrush}"
x:Name="MeetingIdLabel"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{x:Static languages:Resources.Label_MeetingID}"
VerticalAlignment="Top"/>
<TextBlock Grid.Column="2"
Grid.Row="1"
AutomationProperties.AutomationId="MeetingId"
AutomationProperties.Name="{Binding MeetingID}"
AutomationProperties.LabeledBy="{Binding ElementName=MeetingIdLabel}"
FontSize="14"
Style="{StaticResource ClassInformationTextBlockStyle}"
Text="{Binding MeetingID}"
VerticalAlignment="Top"/>
. . .
</Grid>
</Grid>
</Border>
</Popup>
EDIT: The rest of the Popup consists of more TextBlocks and a couple of buttons for copying a link or all of the data into the clipboard. I didn't include it because I don't believe it matters.
You need to set Popup.IsKeyboardFocused to true. The default value is false.
This will move the tab focus to the popup. Just remember that you'll need to move the focus back (preferably to the trigger that opens the popup) when the user closes it.

How to apply Scroll items in Canvas in windows Phone 8

How can i make Scroll in the Items resides in the Canvas.There is listbox inside the canvas which contains DataTemplate with the control image and textblock and I am using the following code but it was not worked.
<ScrollViewer x:Name="scvImages" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0" Grid.Row="1"
HorizontalContentAlignment="Stretch" Height="Auto" Width="Auto">
<Canvas x:Name="canvas" Grid.Row="1" Visibility="Visible" Background="Black" Opacity="0.7" Grid.RowSpan="2">
<ListBox x:Name="lstcountry" Margin="0,50,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
First thing to enable scrolling in scrollviewer change height Auto to some definite height
<ListBox x:Name="lstcountry" Margin="0,0,0,0" Height="300">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
But i suggest you to remove scrollviewer and canvas control from your layout. because both are usefulness. If i guess right you need scrolling in your ListBox control and The Listbox control has it's own scroll implementation. You should remove height property from listbox if you define height of grid's 1st row like
<RowDefination Height="*"/>
or
<RowDefination Height="400"/>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Don't use Auto for ScrollViewer. Auto stretches the ScrollViewer same size as canvas. You need to set fixed height so content can be scrolled within it.
The list box control has it's own scroll implementation. Unless you are going to have other elements along side the list box, I would remove the scroll viewer and canvas elements.

WPF DataGrid not showing scrollbars and running out of visible area

Like others I have a DataGrid that is not showing scrollbars. What I think is unique to my situation is that I do not see a StackPanel anywhere in the visual or logical tree. I am using WPF Inspector to view the trees. I have tried various suggestions to set the height and width of the containing Grid columns and rows with no success. I'm certain there is something I'm missing that is allowing the content to extend beyond the visible area but I cannot tell what it is yet. Any help would be appreciated. This application is a WPF Prism with MEF app and the DataGrid is within a UserControl which is in a Prism region.
Shell Window XAML:
<Window>
<Grid x:Name="GridOuterShell">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ribbon:Ribbon Grid.Row="0" >
...
</ribbon:Ribbon>
<Grid x:Name="GridShellContent" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" MinWidth="300"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<local:RegionBorderControl Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Margin="2,2,8,2" RegionName="{Binding MainRegionDisplayName}"
Style="{DynamicResource RegionBorderControlStyle}">
<ContentControl prism:RegionManager.RegionName="MainRegion"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"/>
</local:RegionBorderControl>
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Center" VerticalAlignment="Stretch"
Width="3" ShowsPreview="True" ResizeDirection="Columns" />
<local:RegionBorderControl Grid.Row="0" Grid.Column="2" RegionName="{Binding RightTopRegionDisplayName}"
Style="{DynamicResource RegionBorderControlStyle}">
<ContentControl prism:RegionManager.RegionName="RightTopRegion"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"/>
</local:RegionBorderControl>
<GridSplitter Grid.Row="1" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Center"
Height="3" ShowsPreview="true" ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" Background="Silver"/>
<local:RegionBorderControl Grid.Row="2" Grid.Column="2" RegionName="{Binding RightBottomRegionDisplayName}"
Style="{DynamicResource RegionBorderControlStyle}">
<ContentControl prism:RegionManager.RegionName="RightBottomRegion"/>
</local:RegionBorderControl>
</Grid>
<StatusBar Grid.Row="2">
...
</StatusBar>
</Grid>
</Window>
UserControl XAML:
<UserControl>
<Grid x:Name="GridMain">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" LastChildFill="False" HorizontalAlignment="Stretch" Width="Auto" >
<ToolBar x:Name="tbToolBar" DockPanel.Dock="Left" Background="{x:Null}">
...
</ToolBar>
</DockPanel>
<DataGrid AutoGenerateColumns="False" Grid.Row="2" Name="DataGridList" ItemsSource="{Binding MyItems}" IsReadOnly="True" CanUserResizeRows="False" SelectionMode="Single"
SelectedItem="{Binding Path=SelectedDataGridRecord, Mode=TwoWay}" Style="{StaticResource DataGridDefault}" >
<DataGrid.Columns>
...
</DataGrid.Columns>
</DataGrid>
</Grid>
You have the DataGrid in a Grid row where the RowDefinition Height is auto so the grid will be measured with an infinite height and be arranged to its DesiredSize.Height and never show scrollbars. Seems like the grid should be in row 1 or make the height of row 2 to be * instead of auto.

Placing this ScrollViewer throws error

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'.

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