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.
Related
for the second row of the inner Grid I should set its Height explicitly, and if I set it to Auto the second and third rows are stacked over each other (will fill the same row even if the have different Grid.Row values):
<Window x:Class="Notifications.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Notifications"
mc:Ignorable="d"
Title="Fun with Notifications!" Height="225" Width="325" WindowStartupLocation="CenterOwner">
<Grid IsSharedSizeScope="True" Margin="5,0,5,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="CarLabels"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="Vehicle"/>
<ComboBox Name="cboCars" Grid.Column="1" DisplayMemberPath="PetName" />
</Grid>
<Grid Grid.Row="1" DataContext="{Binding ElementName=cboCars, Path=SelectedItem}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="CarLabels"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/> <!--If set to auto, it will stack over the next row-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Id"/>
<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Path=CarId}" />
<Label Grid.Column="0" Grid.Row="1" Content="Make" Grid.RowSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Make}" Grid.RowSpan="2" />
<Label Grid.Column="0" Grid.Row="2" Content="Color"/>
<TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Path=Color, UpdateSourceTrigger=PropertyChanged}"/>
<Label Grid.Column="0" Grid.Row="3" Content="Pet Name"/>
<TextBox Grid.Column="1" Grid.Row="3" Text="{Binding Path=PetName}"/>
<StackPanel Grid.Column="1" Grid.Row="4" HorizontalAlignment="Right" Orientation="Horizontal" Margin="0,5,0,5">
<Button x:Name="btnAddCar" Content="Add Car" Margin="5,0,5,0" Padding="4, 2" Click="btnAddCar_Click"/>
<Button x:Name="btnChangeColor" Content="Change Color" Margin="5,0,5,0" Padding="4, 2" Click="btnChangeColor_Click"/>
<Button x:Name="btnRemoveCar" Content="Remove Car" Margin="5,0,5,0" Padding="4,2" Click="btnRemoveCar_Click"/>
</StackPanel>
<Label Grid.Column="0" Grid.Row="5" Content="Is Changed"/>
<CheckBox Grid.Column="1" Grid.Row="5" VerticalAlignment="Center" Margin="10,5,0,5" IsEnabled="False" IsChecked="{Binding Path=IsChanged}" />
</Grid>
</Grid>
</Window>
http://i.imgur.com/hcbVBb5.png
Remove Grid.RowSpan="2" for the Make Label and Textbox. This causes it to run onto the following row.
It should be like this:
<Label Grid.Column="0" Grid.Row="1" Content="Make"/>
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Path=Make}"/>
Have a ListView with a template selector
What I need is for the TextBox named tbStringSVfieldValue to get focus when this ListBoxItem gets selected (clicked or arrow) ?
<DataTemplate x:Key="fieldTemplateStringSV">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Text="Enter key to save. Tab to get the first match from existing values. Value is only committed on Enter key." VerticalAlignment="Center" Style="{StaticResource Italic}"/>
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" VerticalContentAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBox x:Name="tbStringSVfieldValue" BorderBrush="SteelBlue" BorderThickness="2" TextWrapping="Wrap"
Text="{Binding Path=FieldValue, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource stringTabConverter}}"
Validation.Error="Validataion_Error" AcceptsReturn="True" AcceptsTab="True"
PreviewKeyDown="tbStringSVfieldValue_PreviewKeyDown"/>
<!--, Converter={StaticResource stringTabConverter}-->
</ScrollViewer>
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Text="Existing values. Click to populate the value above." VerticalAlignment="Center" Style="{StaticResource Italic}"/>
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4" Height="150" Margin="5,2,0,0" x:Name="lbSVtextPast" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.IsDeferredScrollingEnabled="True"
FontStyle="Normal"
ItemsSource="{Binding Path=PastEntries}" SelectedItem="{Binding Path=SelectedPastEntry}"
SelectionChanged="lbSVtextPastSelectionChanged"/>
</Grid>
</DataTemplate>
above I tried
<Grid FocusManager.FocusedElement="{Binding ElementName=svTBsv}">
<ScrollViewer x:Name="svTBsv" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" VerticalContentAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
FocusManager.FocusedElement="{Binding ElementName=tbStringSVfieldValue}">
<TextBox x:Name="tbStringSVfieldValue" BorderBrush="SteelBlue"
note below does NOT work
this.tbStringSVfieldValueStringSV is null
it only exists in the template
need to somehow get access to the correct template
note there will be more than one DataTemplate x:Key="fieldTemplateStringSV" in the ListBox
private void lbCurDocFields_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("lbCurDocFields_SelectionChanged " + sender.GetType().ToString());
if (sender is ListBox)
{
ListBox lb = (ListBox)sender;
//lb.Template.VisualTree;
MessageBox.Show(lb.Template.ToString());
if (lb.SelectedItem != null)
{
MessageBox.Show(lb.SelectedItem.GetType().ToString());
if (lb.SelectedItem is GabeLib.DocFieldStringSV)
{
if (this.tbStringSVfieldValueStringSV != null)
this.tbStringSVfieldValueStringSV.Focus();
}
I have a Grid with 2 rows and in the first row 2 columns each with 2 rows.
The GridSplitter is inside the 2nd column. I do not know why the it does not move. I am thankfull for any help. ( I'm new here :-) )
With regards
Below XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="yyy:" Margin="10" MinWidth="50"/>
</StackPanel>
</StackPanel>
<TreeView Grid.Row="1" x:Name="TreeView0"></TreeView>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="10" Text="xxx:" HorizontalAlignment="Left" MinWidth="140"/>
</StackPanel>
</StackPanel>
<TreeView Grid.Row="1" x:Name="TreeView1"></TreeView>
<GridSplitter Grid.Row="1" Width="2" Background="Gray" HorizontalAlignment="Left" VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext"/>
</Grid>
</Grid>
<Grid Grid.Row="1">
<ListView Margin="10">
<ListView.View>
<GridView></GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
After rearranging some rows and cloumns, I could solve my problem.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="x:" Margin="10" HorizontalAlignment="Left" MinWidth="50"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="10" Text="y:" HorizontalAlignment="Left" MinWidth="140"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TreeView x:Name="TreeView0"></TreeView>
</Grid>
<GridSplitter Grid.Column="1" Width="2" Background="Red" HorizontalAlignment="Center"/>
<Grid Grid.Column="2">
<TreeView x:Name="TreeView1"></TreeView>
</Grid>
</Grid>
<Grid Grid.Row="2">
<ListView Margin="10">
<ListView.View>
<GridView></GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
#Frisbee I am not ashamed to refer at MSDN or somewhere else. I came here in search of help. I did not ask you to fix my problem. Your approach of helping someone is realy disgusting and boaring. Instead of responding with rubbish words you could have concentrated on the issue.
You have the splitter in a row height *
Wrong
The splitter needs to be in an auto with height * above and below
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.
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>