How to implement Inkcanvas with ink toolbar on image in WPF - wpf

I try to implement this functionality in my WPF application. Functionality is working fine but my problem is, when I try to implement on the image,. then this time my image is not shown. When I try to show the image, then ink canvas does not work.
When I try implement by this:
<Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent">
Then my output is fine.
But when I try to fix it for the shown image, then I can't draw anything.
<Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent"
Width="{Binding ActualWidth,ElementName=Currentimg}" Height="{Binding ActualHeight,ElementName=Currentimg}"
Panel.ZIndex="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
In Currentimg is my image id:
<Grid>
<Grid.Resources>
<conv:TempConverter x:Key="tempConverter"/>
<conv:ImageMarkPositionConverter x:Key="positionConverter"/>
<conv:ImageMarkVisibilityConverter x:Key="markVisibilityConverter"/>
<conv:ImageMarkerTooltipConverter x:Key="tooltipConverter"/>
<conv:EnumToStringConverter x:Key="enumToStringConverter"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="1" x:Name="Currentimg" HorizontalAlignment="Center" VerticalAlignment="Stretch" Source="{Binding CurrentImage}"/>
</Image>
<Grid Grid.Row="1" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" OpacityMask="Transparent"/>
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" OpacityMask="Transparent" Width="{Binding ActualWidth,ElementName=Currentimg}"
Panel.ZIndex="100" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="{Binding ActualHeight,ElementName=Currentimg}"/>
<!--</Controls:InkCanvas>
<Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0"/>
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="100" Panel.ZIndex="100" OpacityMask="Transparent" Opacity="0"/>
<Controls:InkToolbar TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Row="0" />
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="{Binding ActualHeight,ElementName=Currentimg}" Width="{Binding ActualWidth,ElementName=Currentimg}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="100"/>
<Controls:InkToolbar DockPanel.Dock="Top" x:Name="inkToolbar" Grid.Row="0" TargetInkCanvas="{x:Reference Name=myInkCanvas}">
<Controls:InkToolbarCustomToolButton x:Name="toolButtonLasso" />
</Controls:InkToolbar>
<Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Height="{Binding ActualHeight,ElementName=Currentimg}" Width="{Binding ActualWidth,ElementName=Currentimg}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Panel.ZIndex="100"/>-->
</Grid>
</Grid>
</Grid>
Currently I am using the above code but I can't get my requirement.
How can I solve my problem?
My requirement is to draw anything on my image using inkcanvas and a toolbar.

Related

Can we use multi xaml layout on a window?

I think that we can use multi layout on a windows with XAML.
So I try to create a window like this:
I want to create an ListView in left and it can be resized. The Grid and Textbox at the left side will be fit to the right grid.
I have tried to use other layouts, StackPanel, DockPanel.
How can I create a resizable grid
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ToolBar Name="toolBar" Grid.Row="0">
<Button Name="btnLoad" Width="Auto" Height="25" ToolTip= Click="btnLoad_Click" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/reload.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
<TextBlock>Load/Reload</TextBlock>
</StackPanel>
</Button>
<Button Name="btnSave" Width="Auto" Height="25" Click="btnSave_Click">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/save.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
<TextBlock>Save</TextBlock>
</StackPanel>
</Button>
</ToolBar>
<ComboBox Name="cbTypeOfShop" Grid.Row="1" Margin="5 5 5 5"/>
<Grid Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="5"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGrid Name="dtgListItem" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</DataGrid>
<TextBox Grid.Row="1" Height="100" TextWrapping="Wrap" AcceptsReturn="True" Text="1231231231 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221231231231231231123123123123123123123123123123123123123123123123123" />
</Grid>
</Grid>
<StatusBar Grid.Row="3" Height="25" HorizontalAlignment="Stretch">
<TextBlock Name="abc">abc</TextBlock>
</StatusBar>
</Grid>
But when I resize the left side.
try this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
As you can see, I've simply created a Grid with two equally wide columns, with a 5 pixel column in the middle.

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