Introduction
In this article we will see how Grid Splitter is helpful for a Silverlight Application.
Creating 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:
{codecitation class="brush: xml; gutter: true;" width="650px"}
<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>
{/codecitation} 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. {codecitation class="brush: xml; gutter: true;" width="650px"}
<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" />
{/codecitation} The next set of Grid Splitters will have a property called ShowPreview. The default value is false. So we will make it True. {codecitation class="brush: xml; gutter: true;" width="650px"}
<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" />
{/codecitation} The next set of Grid Splitters will have a property called ShowPreview. The default value is false. So we will make it True. 
That’s it you have successfully used Grid Splitter. Play with it more to know more.
Enjoy Coding.
| About the Author |
 | | Diptimaya Patra |
Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.
Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra
|
|
|