R – Silverlight Grid Splitter Unexpected Behaviour

silverlight-2.0

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?

Best Answer

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>
Related Topic