I have some issues with getting the grid splitter to work properly.
I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.
How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.
I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.
I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.
I hope it makes sense.
XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
<ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
<Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
<ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="0">
<TextBlock/>
</Grid>
<!-- The "Left" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
<WebBrowser></WebBrowser>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
<!-- The "Right" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">
<Border BorderBrush="Blue" BorderThickness="1" MinWidth="200" Background="#4C808080" >
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
</Grid>
Have a look at this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0"
Grid.Column="0"
VerticalContentAlignment="Center"
Margin="5" />
<ComboBox Grid.Row="0"
Grid.Column="1"
MinWidth="200px" />
<Label Grid.Column="2"
VerticalContentAlignment="Center"
Margin="10 5 5 5" />
<ComboBox Grid.Row="0"
Grid.Column="3"
IsEditable="True"
MinWidth="250px" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
<Grid Grid.Column="0"
Background="Aqua">
</Grid>
<GridSplitter HorizontalAlignment="Stretch"
ResizeDirection="Columns"
Width="10"
Grid.Column="1"
ResizeBehavior="PreviousAndNext" />
<!-- The "Right" Grid -->
<Grid Grid.Column="2"
Panel.ZIndex="2"
MinWidth="200"
Background="Yellow">
<Border BorderBrush="Blue"
BorderThickness="1"
MinWidth="200"
Background="#4C808080">
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
IsReadOnly="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="2">
<TextBlock />
</Grid>
</Grid>
I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.
Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.
/edit added width relation
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
This means when you start the application the first column will take twice the size then the third.
This should be a decent showcase, it's exactly the same for columns, just sideways.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/> //sets the height of the first row
<RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
</Grid.RowDefinitions>
<Grid Grid.Row="0"
HorizontalAlignment="Left"
Width="400"
Background="Green" />
<Grid Grid.Row="0"
Margin="400,0,0,0"
Background="Red"/>
<Grid Grid.Row="1"
Background="Blue"/>
<GridSplitter Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Height="2.5"
Background="Black" />
</Grid>
I read a few post but I can't fix this problem.
I have a Grid defined as follow:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
...
Where in the first row I want a Border with a TextBlock inside. I need that the Border has always the same size without be influenced from the TextBlock.
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="{DynamicResource StandardBorderColor}" BorderThickness="2" Margin="15,10,15,10"
HorizontalAlignment="Stretch"/>
<TextBlock Grid.Row="0" Name="TextBlock" Margin="20, 15, 20, 20"
TextWrapping="Wrap" Foreground="{DynamicResource StandardForegroundColor}" FontSize="18" FontWeight="Bold"
VerticalAlignment="Center" TextAlignment="Left" Text="{Binding Testo}" HorizontalAlignment="Stretch"/>
</Grid>
Do you have any suggestions? Thanks in advance!
Update:
Solution:
I found this as solution:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GroupBox HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
Margin="15, 10, 15, 10" Header="Avvisi">
<TextBox x:Name="TextBlock" FontSize="16"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
TextAlignment="Left" Text="{Binding Testo}" Style="{DynamicResource TxtBoxStyle}" ScrollViewer.VerticalScrollBarVisibility="Visible"
BorderBrush="Transparent" IsReadOnly="True" />
</GroupBox>
...
I have the following code of XAML in WPF. This generates the grid with equal size of columns & rows (as shown in figure 1.)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
Figure 1.
But when I put this grid in a viewbox (like the code below), the rows & column remains no more equally in size (as shown in figure 2.).
<Viewbox Stretch="Uniform">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
</Viewbox>
Figure 2.
How can I make this grid with equal size of rows & column inside a viewbox?
You can enforce size-sharing like this:
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
</Grid.ColumnDefinitions>
That's the behavior of ViewBox
Taken from internet
The ViewBox is a very useful control in WPF. If does nothing more than
scale to fit the content to the available size. It does not resize the
content, but it transforms it.
why use viewbox when you don't want this, try another control.
Instead of using a Grid try using a UniformGrid:
<Viewbox Stretch="Uniform">
<UniformGrid Rows="4" Columns="4">
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</UniformGrid>
</Viewbox>
Just make sure you set Rows And Columns, and instead of saying which row/column each child element is, you just enter them in order.
SUMMARY
To make it clearer for future readers, here is a summary of the problem and its fix.
My grid sits in a page, that is used as the content for a tabitem. At runtime, the grid refused to fill the entire tabitem area, as seen in the screenshots below.
The problem was that the style for the tabitem contained a content template that displayed the page through a contentpresenter, inside a horizontal stackpanel. The stackpanel was overriding the stretch properties of the grid in the page.
The solution was to replace the stackpanel in the style with a grid. No more layout problems.
ORIGINAL QUESTION
I've got a StackPanel with a label and textbox inside a Grid, and I want to bind the width of the textbox to the width of the first two columns in the grid. I've generally been using the approach of binding the textbox width to its parent, and trying to bind that value to something that has the correct value, but I have tried direct binding as well, and no luck.
Here is my xaml:
<Page x:Class="BPC.CPI.Pages.CustomerMaintenance"
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:cpihelpers="clr-namespace:BPC.CPI.ControlHelpers"
xmlns:robertData="clr-namespace:BPC.Robert.DataEncapsulation;assembly=BPC.Robert"
xmlns:robertGlobals="clr-namespace:BPC.Robert.Globals;assembly=BPC.Robert"
xmlns:avalon="clr-namespace:AvalonLambdas;assembly=AvalonLambdas"
xmlns:converters="clr-namespace:BPC.Utilities.ValueConverters;assembly=BPCUtilities"
mc:Ignorable="d"
d:DesignHeight="602" d:DesignWidth="1149"
Title="CustomerMaintenance" Name="ThisPage"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Page.Resources>
<converters:IntegerToBooleanConverter x:Key="IntegerToBooleanConverter"></converters:IntegerToBooleanConverter>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ComboBox ItemsSource="{Binding PageModel.PageUser.AssociatedCustomers}" Name="CbCustomerName"
SelectedItem="{Binding PageModel.PageCustomer}"
Style="{StaticResource HeadingTwoComboBox}" cpihelpers:ComboBoxHelper.MaxDropDownItems="10">
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="LayoutTransform" Value="{StaticResource Transform.5x}"></Setter>
<Setter Property="Foreground" Value="Black"></Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>
<Grid Name="GridMainContent" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Name="GridGeneralCustomerInfo" Grid.Column="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height=".35*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height=".8*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Name="SpCustomerNotes" Orientation="Vertical" Grid.Column="0" Grid.Row="1"
HorizontalAlignment="Left">
<Label Name="LblCustomerNotes" Target="{Binding ElementName=TxtCustomerNotes}" Style="{StaticResource PromptText}" Content="{Binding Path=Text, ElementName=CbCustomerName}" ContentStringFormat="What is special about {0}?"></Label>
<TextBox Name="TxtCustomerNotes" AcceptsReturn="True" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"
MaxHeight="{Binding Path=ActualHeight, ElementName=SpCustomerNotes, Converter={avalon:LambdaValueConverter (param * 0.65)}}"
Text="{Binding PageModel.PageCustomer.CustomerInfo.CP_NOTES}"></TextBox>
</StackPanel>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Style="{StaticResource HeadingFourBrown}" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=A few questions about \{0\}...}"></TextBlock>
<StackPanel Name="SpReportingType" Orientation="Vertical" Grid.Row="1" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingType" Target="{Binding ElementName=TxtReportingType}" Style="{StaticResource PromptText}" Content="Contractual or actual reporting?"></Label>
<ComboBox Name="CbReportingType" Style="{StaticResource ComboBoxWithoutBackground}" SelectedValuePath="REPORTING_TYPE_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingTypes}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_TYPE_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportingLevel" Orientation="Vertical" Grid.Row="2" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingLevel" Target="{Binding ElementName=TxtReportingLevel}" Style="{StaticResource PromptText}" Content="How should we roll up data?"></Label>
<ComboBox Name="CbReportingLevel" Style="{StaticResource ComboBoxWithoutBackground}" SelectedValuePath="REPORTING_LEVEL_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingLevel}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_LEVEL_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportingPounds" Orientation="Vertical" Grid.Row="3" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingPounds" Target="{Binding ElementName=TxtReportingPounds}" Style="{StaticResource PromptText}" Content="Net or gross weights?"></Label>
<ComboBox Name="CbReportingPounds" Style="{StaticResource ComboBoxWithoutBackground}" SelectedValuePath="REPORTING_LBS_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingPounds}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_LBS_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpInventoryLevel" Orientation="Vertical" Grid.Row="1" Grid.Column="1" Margin="6,0,0,0">
<Label Name="LblInventoryLevel" Target="{Binding ElementName=TxtInventoryLevel}" Style="{StaticResource PromptText}" Content="Customer or title?"></Label>
<ComboBox Name="CbInventoryLevel" Style="{StaticResource ComboBoxWithoutBackground}" SelectedValuePath="INV_RPT_LEVEL_ID"
ItemsSource="{Binding PageModel.PageSelection.InventoryReportingLevel}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.INV_RPT_LEVEL_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportByPO" Orientation="Vertical" Grid.Row="2" Grid.Column="1" Margin="6,0,0,0">
<Label Name="LblReportByPO" Target="{Binding ElementName=TxtReportByPO}" Style="{StaticResource PromptText}" Content="Do we report by PO?"></Label>
<CheckBox Name="ChkReportByPO" Style="{DynamicResource SliderCheckBox}" HorizontalAlignment="Left" Checked="ChkReportByPO_Checked"
IsChecked="{Binding PageModel.PageCustomer.CustomerInfo.IS_REPORTED_BY_PO, Converter={StaticResource IntegerToBooleanConverter}}"></CheckBox>
</StackPanel>
</Grid>
<Grid Name="GridMiscellaneous" Grid.Column="0" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource HeadingFourBrown}" Grid.Row="0" Text="Other stuff"></TextBlock>
<StackPanel Name="SpSaveDirectory" Orientation="Vertical" Grid.Row="1" Margin="6,0,0,0">
<Label Name="LblSaveDirectory" Target="{Binding ElementName=TxtSaveDirectory}" Style="{StaticResource PromptText}" Content="Where should saved reports go?"></Label>
<TextBox Name="TxtSaveDirectory" ></TextBox>
</StackPanel>
<StackPanel Name="SpFrequency" Orientation="Vertical" Grid.Row="3" Margin="6,0,0,0">
<Label Name="LblFrequency" Target="{Binding ElementName=TxtFrequency}" Style="{StaticResource PromptText}" Content="{Binding Path=Text, ElementName=CbCustomerName}" ContentStringFormat="How often do you run reports for {0}?"></Label>
<TextBox Name="TxtFrequency" ></TextBox>
</StackPanel>
<StackPanel Name="SpHoursPerReport" Orientation="Vertical" Grid.Row="5" Margin="6,0,0,0">
<Label Name="LblHoursPerReport" Target="{Binding ElementName=TxtHoursPerReport}" Style="{StaticResource PromptText}" Content="How many hours do you spend per report (whole hours)?"></Label>
<TextBox Name="TxtHoursPerReport" ></TextBox>
</StackPanel>
</Grid>
</Grid>
<Grid Name="GridCustomerPeopleAndTitles" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.5*"></RowDefinition>
<RowDefinition Height=".8*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Name="GridCustomerPeople" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbCustomerPeople" Grid.Row="0" Style="{StaticResource HeadingFourBrown}" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=These people also work with \{0\}}"></TextBlock>
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="6,0,0,0">
<Label Name="LblSalesReps" Style="{StaticResource PromptText}" Content="Sales Reps:"></Label>
<TextBlock Name="TxtbSalesReps" Text="{Binding PageModel.PageCustomer.SalesReps}" TextTrimming="CharacterEllipsis" MaxWidth="550"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="2" Margin="6,0,0,0">
<Label Name="LblBillers" Style="{StaticResource PromptText}" Content="Billers:"></Label>
<TextBlock Name="TxtbBillers" Text="{Binding PageModel.PageCustomer.Billers}" TextTrimming="CharacterEllipsis" MaxWidth="550"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="3" Margin="6,0,0,0" HorizontalAlignment="Stretch">
<Label Name="LblCams" Style="{StaticResource PromptText}" Content="Customer Account Managers:"></Label>
<TextBlock Name="TxtbCams" Text="{Binding PageModel.PageCustomer.CAMs}" TextTrimming="CharacterEllipsis"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="GridTitleGroups" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbTitleGroups" Grid.Row="0" Style="{StaticResource HeadingFourBrown}" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=Group \{0\}\'s titles}"></TextBlock>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox Name="ListTitles" ItemsSource="{Binding}" Grid.Column="1" ToolTip="{Binding Source={x:Static robertGlobals:Messages.DragTitles}}">
</ListBox>
<Border Grid.Column="3" Style="{StaticResource BlueBorder}">
<Grid Name="GridTitleGroupItems" Grid.Column="3">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{StaticResource BrownAccentBrush}" OpacityMask="{StaticResource StrongOpacityMaskBrush}"
ToolTip="{Binding Source={x:Static robertGlobals:Messages.DragTitlesNew}}"></Rectangle>
<TextBlock Name="TxtbNewTitleGroup" Grid.Row="0" Text="Create a New Group" AllowDrop="True" HorizontalAlignment="Center"
VerticalAlignment="Center" Style="{StaticResource GreenAccentText}" ToolTip="{Binding Source={x:Static robertGlobals:Messages.DragTitlesNew}}"></TextBlock>
<TreeView Name="TreeTitleGroups" ItemsSource="{Binding}" AllowDrop="True" Grid.Row="1" BorderBrush="{x:Null}" ToolTip="{Binding Source={x:Static robertGlobals:Messages.DragTitles}}">
</TreeView>
</Grid>
</Border>
</Grid>
</Grid>
<Grid Name="GridCustomerGroups" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbCustomerGroups" Grid.Row="0" Style="{StaticResource HeadingFourBrown}" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=Group \{0\}\'s customers}"></TextBlock>
</Grid>
</Grid>
</Grid>
</Grid>
</Page>
I've tried several recommended work-arounds from various questions and other sites, but nothing is working. I've tried sticking a border over cells I want to bind to and binding to its dimensions, using a label, nesting another grid, x:naming the ColumnDefinition and binding to the ActualWidth and more. Nothing. Works.
This seems like something that should be really simple in wpf, and I'm just missing come crucial, minor piece. I've wasted probably three hours on this. What am I doing wrong?
EDIT:
I just realized that it appears that I'm binding to the width of the entire GridMainContent - I'm not. That was just kind of dummy value that has been replaced with each different solution I've tried.
Here is an image of my issue. The contents should fill the entire tab. Note that the surrounding grid is sizing down to fit the content, rather than the content sizing up to fit the grid. I've defined implicit styles that set HorizontalAlignment=Stretch on every parent element for my content, but nothing appears to be working.
What I expect it to do, is for the left portion (with the dropdowns) and the right portion (with the sales reps & such) to be equal in width, filling the entire content area of the tab.
Try pasting the xaml below as WPF window content, don't use tabs- I've done that and the layout is fine:
Could you confirm is the layout is correct? My best bet is - the parent of the root grid somehow limiting the available space, so the available width is less the the screen's width. Check if all the available space is paint with lime.
XAML:
<Grid Background="Lime">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ComboBox ItemsSource="{Binding PageModel.PageUser.AssociatedCustomers}" Name="CbCustomerName"
SelectedItem="{Binding PageModel.PageCustomer}"
>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="LayoutTransform" ></Setter>
<Setter Property="Foreground" Value="Black"></Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>
<Grid Name="GridMainContent" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Name="GridGeneralCustomerInfo" Grid.Column="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height=".35*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height=".8*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Name="SpCustomerNotes" Orientation="Vertical" Grid.Column="0" Grid.Row="1"
HorizontalAlignment="Left">
<Label Name="LblCustomerNotes" Target="{Binding ElementName=TxtCustomerNotes}" Content="{Binding Path=Text, ElementName=CbCustomerName}" ContentStringFormat="What is special about {0}?"></Label>
<TextBox Name="TxtCustomerNotes" AcceptsReturn="True" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"
Text="{Binding PageModel.PageCustomer.CustomerInfo.CP_NOTES}"></TextBox>
</StackPanel>
<Grid Grid.Column="0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=A few questions about \{0\}...}"></TextBlock>
<StackPanel Name="SpReportingType" Orientation="Vertical" Grid.Row="1" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingType" Target="{Binding ElementName=TxtReportingType}" Content="Contractual or actual reporting?"></Label>
<ComboBox Name="CbReportingType" SelectedValuePath="REPORTING_TYPE_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingTypes}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_TYPE_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportingLevel" Orientation="Vertical" Grid.Row="2" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingLevel" Target="{Binding ElementName=TxtReportingLevel}" Content="How should we roll up data?"></Label>
<ComboBox Name="CbReportingLevel" SelectedValuePath="REPORTING_LEVEL_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingLevel}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_LEVEL_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportingPounds" Orientation="Vertical" Grid.Row="3" Grid.Column="0" Margin="6,0,0,0">
<Label Name="LblReportingPounds" Target="{Binding ElementName=TxtReportingPounds}" Content="Net or gross weights?"></Label>
<ComboBox Name="CbReportingPounds" SelectedValuePath="REPORTING_LBS_ID"
ItemsSource="{Binding PageModel.PageSelection.ReportingPounds}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.REPORTING_LBS_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpInventoryLevel" Orientation="Vertical" Grid.Row="1" Grid.Column="1" Margin="6,0,0,0">
<Label Name="LblInventoryLevel" Target="{Binding ElementName=TxtInventoryLevel}" Content="Customer or title?"></Label>
<ComboBox Name="CbInventoryLevel" SelectedValuePath="INV_RPT_LEVEL_ID"
ItemsSource="{Binding PageModel.PageSelection.InventoryReportingLevel}" DisplayMemberPath="NAME"
SelectedValue="{Binding PageModel.PageCustomer.CustomerInfo.INV_RPT_LEVEL_ID}"></ComboBox>
</StackPanel>
<StackPanel Name="SpReportByPo" Orientation="Vertical" Grid.Row="2" Grid.Column="1" Margin="6,0,0,0">
<Label Name="LblReportByPo" Target="{Binding ElementName=TxtReportByPO}" Content="Do we report by PO?"></Label>
<CheckBox Name="ChkReportByPo" Style="{DynamicResource SliderCheckBox}" HorizontalAlignment="Left"
></CheckBox>
</StackPanel>
</Grid>
<Grid Name="GridMiscellaneous" Grid.Column="0" Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Other stuff"></TextBlock>
<StackPanel Name="SpSaveDirectory" Orientation="Vertical" Grid.Row="1" Margin="6,0,0,0">
<Label Name="LblSaveDirectory" Target="{Binding ElementName=TxtSaveDirectory}" Content="Where should saved reports go?"></Label>
<TextBox Name="TxtSaveDirectory" ></TextBox>
</StackPanel>
<StackPanel Name="SpFrequency" Orientation="Vertical" Grid.Row="3" Margin="6,0,0,0">
<Label Name="LblFrequency" Target="{Binding ElementName=TxtFrequency}" Content="{Binding Path=Text, ElementName=CbCustomerName}" ContentStringFormat="How often do you run reports for {0}?"></Label>
<TextBox Name="TxtFrequency" ></TextBox>
</StackPanel>
<StackPanel Name="SpHoursPerReport" Orientation="Vertical" Grid.Row="5" Margin="6,0,0,0">
<Label Name="LblHoursPerReport" Target="{Binding ElementName=TxtHoursPerReport}" Content="How many hours do you spend per report (whole hours)?"></Label>
<TextBox Name="TxtHoursPerReport" ></TextBox>
</StackPanel>
</Grid>
</Grid>
<Grid Name="GridCustomerPeopleAndTitles" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.5*"></RowDefinition>
<RowDefinition Height=".8*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Name="GridCustomerPeople" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbCustomerPeople" Grid.Row="0" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=These people also work with \{0\}}"></TextBlock>
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="6,0,0,0">
<Label Name="LblSalesReps" Content="Sales Reps:"></Label>
<TextBlock Name="TxtbSalesReps" Text="{Binding PageModel.PageCustomer.SalesReps}" TextTrimming="CharacterEllipsis" MaxWidth="550"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="2" Margin="6,0,0,0">
<Label Name="LblBillers" Content="Billers:"></Label>
<TextBlock Name="TxtbBillers" Text="{Binding PageModel.PageCustomer.Billers}" TextTrimming="CharacterEllipsis" MaxWidth="550"></TextBlock>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="3" Margin="6,0,0,0" HorizontalAlignment="Stretch">
<Label Name="LblCams" Content="Customer Account Managers:"></Label>
<TextBlock Name="TxtbCams" Text="{Binding PageModel.PageCustomer.CAMs}" TextTrimming="CharacterEllipsis"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="GridTitleGroups" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbTitleGroups" Grid.Row="0" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=Group \{0\}\'s titles}"></TextBlock>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox Name="ListTitles" ItemsSource="{Binding}" Grid.Column="1" ToolTip="">
</ListBox>
<Border Grid.Column="3">
<Grid Name="GridTitleGroupItems">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
ToolTip=""></Rectangle>
<TextBlock Name="TxtbNewTitleGroup" Grid.Row="0" Text="Create a New Group" AllowDrop="True" HorizontalAlignment="Center"
VerticalAlignment="Center" ToolTip=""></TextBlock>
<TreeView Name="TreeTitleGroups" ItemsSource="{Binding}" AllowDrop="True" Grid.Row="1" BorderBrush="{x:Null}" ToolTip="">
</TreeView>
</Grid>
</Border>
</Grid>
</Grid>
<Grid Name="GridCustomerGroups" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="TxtbCustomerGroups" Grid.Row="0" Text="{Binding Path=Text, ElementName=CbCustomerName, StringFormat=Group \{0\}\'s customers}"></TextBlock>
</Grid>
</Grid>
</Grid>
</Grid>
I finally found what was causing the content to not size appropriately. Buried in the tab item style, the ContentTemplate was placing all the content inside a horizontal StackPanel. I switched the StackPanel for a Grid, and voila! Correct wpf layout.
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>