Silverlight Grid Splitter Unexpected Behaviour

Question

I am just starting out on Silverlight using version 2.0. I wanted to show a few data grids on the page and got this going OK by dropping each into a grid cell. I then thought I would try adding a grid splitter 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 to be able to drag the splitter around to resize the other two columns. When I drag the bar, both of the other columns shrink. Can anyone explain why?

Answer 1

The reason the cells resize in the manner you have experienced is down to the ColumnDefinition values and the HorizontalAlignment of the GridSplitter. Because you have not specified a height, the column widths default to Star. This means they have equal spacing. The GridSplitter HorizontalAlignment then specifies which direction it resizes. If you center or stretch it, then you will get both sides resizing, but if you align it to one edge or the other, it will only resize that edge, but because the cells share space equally, both sides shrink instead of just one.

Although the accepted answer provides an alternative approach to get this working, it doesn't actually explain why the problem occurs. It is perfectly acceptable to put a splitter in it's own cells - in fact, it is often recommended.

Answer 2

You don't need the middle column for the gridsplitter. The Gridsplitter will bind to the right edge of column 0 if you put the splitter in column 0. You can add a small margin to the grids in the left-hand side so that 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>