Silverlight Grid Splitter Unexpected Behavior

Question

I am just starting to use Silverlight using version 2.0. I wanted to show several data grids on a page and got it OK by dropping each into a grid cell. Then I thought that I would try to add a grid separator using the following markup:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Width="5" VerticalAlignment="Stretch" ></basics:GridSplitter> <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0"> </data:DataGrid> <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2"> </data:DataGrid> <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0"> </data:DataGrid> <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2"> </data:DataGrid> </Grid> </UserControl> 

I expected that I could drag the divider around to resize the other two columns. When I drag the panel, both other columns are compressed. Can someone explain why?

Answer 1

You do not need the middle column for gridsplitter. The gridsplitter will snap to the right edge of column 0 if you place the separator in column 0. You can add a small edge to the grids on the left so you don't lose the last 5 pixels.

 <Grid x:Name="LayoutRoot" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/> <!--<ColumnDefinition Width="Auto"/>--> <ColumnDefinition Width="1*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1*"/> <RowDefinition Height="1*"/> </Grid.RowDefinitions> <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0" /> <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0"/> <!-- Moved the grid splitter to column 0 --> <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Width="5" /> <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2" /> <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2" /> </Grid> 

Answer 2

The reason for resizing cells by the way you experienced it is to the values ColumnDefinition and HorizontalAlignment GridSplitter . Since you did not specify a height, the default column width is Star. This means that they have an equal distance. Then the GridSplitter HorizontalAlignment indicates in which direction it is changing. If you center or stretch it, then you will get the size of both sides, but if you align it to one edge or the other, it will only resize that edge, but since the cells distribute the space the same way, both sides are reduced, not just one.

Although the accepted answer provides an alternative approach to make this work, it does not actually explain why the problem arises. This is perfectly acceptable for placing a splitter in its own cells - in fact, this is often recommended.