Grid Splitter In Silverlight 3 Using Blend 3

This article discusses how to use a Grid Splitter control in Silverlight 3 using Expression Blend 3.

Crating Silverlight Project

Fire up Expression Blend 3 and create a Silverlight Application. Name it as GridSplitterInSL3.

Go ahead and design your application. In our sample I have designed the following.

I have changed the LayoutRoot as Stack Panel and then I have added a Grid. Inside the Grid it is divided into two columns and each column will contain a Grid.

And the inside Grid is I have placed four Buttons in respective cells.

Follow the XAML code:

<StackPanel>

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="*" />

            </Grid.ColumnDefinitions>

           

            <Grid Grid.Row="1" Grid.Column="0">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="100" />

                    <ColumnDefinition Width="5" />

                    <ColumnDefinition Width="100" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="100" />

                    <RowDefinition Height="5" />

                    <RowDefinition Height="100" />

                </Grid.RowDefinitions>

               

                <Button Margin="0" Content="Button" Background="Red"/>

                <Button Grid.Column="2" Content="Button" d:LayoutOverrides="Height" Background="Blue"/>

                <Button Margin="0" Grid.Row="2" Content="Button" Background="Yellow"/>

                <Button Grid.Column="2" Grid.Row="2" Content="Button" d:LayoutOverrides="Height" Background="Lime"/>

            </Grid>

           

            <Grid Grid.Row="1" Grid.Column="2">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="100" />

                    <ColumnDefinition Width="5" />

                    <ColumnDefinition Width="100" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="100" />

                    <RowDefinition Height="5" />

                    <RowDefinition Height="100" />

                </Grid.RowDefinitions>

                <Button Margin="0" Background="Red" Content="Button"/>

                <Button Background="Blue" Grid.Column="2" Content="Button" d:LayoutOverrides="Height"/>

                <Button Margin="0" Background="Yellow" Grid.Row="2" Content="Button"/>

                <Button Background="Lime" Grid.Column="2" Grid.Row="2" Content="Button" d:LayoutOverrides="Height"/>

               

            </Grid>

        </Grid>

    </StackPanel>

Our main objective is to use Grid Splitter. So go ahead and search Grid Splitter in Asset Library.

Now add two Grid Splitters each for the Grids.

And modify the Following Properties.

<controls:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<controls:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

The next set of Grid Splitters will have a property called ShowPreview. The default value is false. So we will make it True.

<controls:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowsPreview="True" />

<controls:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowsPreview="True" />

Now go ahead and run your application.

You will see the cursor change when you mouse hover the Grid Splitter.

The basic difference between ShowPreview values True and False is when it is set true the preview of resizing is true.

That's it you have successfully used Grid Splitter. Play with it more to know more.

Enjoy Coding.