Using the GridSplitter control with Silverlight 2
In web applications, we often come across a requirement where we have to resize and redistribute space in our controls container. In such cases GridSplitter is a very useful control.
GridSplitter is a control which allows us to change space between rows and columns of a Silverlight Grid Control at runtime. Using this control, we can change the Height and Width of the Grid rows and columns at run time. That means we will also be able to resize controls in specific cells of that Grid.
The controls can be resized both horizontally as well as vertically. To do so, we have to set the Horizontal Alignment and Vertical alignment property of the GridSplitter. This control can be used to show several windows which are split and that can be resized to view the content.
The Grid control is required for using Grid splitter.
In this sample we will place two splitter controls on a Page, one horizontally and the other vertically. We will then place some controls inside different cells of the Grid so that we can demonstrate what happens when we resize rows/columns using the GridSplitter Control. We will also see a few properties of the Splitter Control.
Step 1: Open Visual Studio 2008 > File > New Project > Select the language (C# or VB.NET) > Select ‘Silverlight’ in the Project Types > from the templates, select ‘Silverlight Application’.
Step 2: Type a name (GridSplitterSample) and location for the project and click ok (see Figure below). Choose the first option ‘Add a new Web to the solution for hosting the control’ and the project type as ‘Web Site’ and click OK. You will see that two projects are created: GridSplitterSampleWeb and GridSplitterSample.
Step 3: Add a Xaml Reference to System.Windows.Controls assembly. This assembly is required for referring to the GridSplitter Control. Also note that the width and height is not set on the UserControl.
<UserControl x:Class="GridSplitterSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:basics="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls">
In order to add a System.Windows.Controls reference to your project, in your Solution Explorer right click ‘References’ in the GridSplitterSample project > Add Reference > Choose ‘System.Windows.Controls’ from the .NET tab.
Note: In Silverlight Beta 2 the splitter was in System.Windows.Controls.Extended assembly. In the final release, it is now in the System.Windows.Controls assembly as System.Windows.Controls.Extended.dll was renamed to System.Windows.Controls.dll.
Step 4: Now add 5 Rows and 5 Columns to Grid. Remember that a Grid is required for using GridSplitter Control.
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>
</Grid>
Step 5: We will now add 2 GridSplitter controls; one for horizontal splitting and one for vertical splitting.
... </Grid.ColumnDefinitions>
<basics:GridSplitter Height="200" Grid.Row="0" Grid.Column="3" VerticalAlignment="Stretch" HorizontalAlignment="Left" Background="Coral" Width="5">
</basics:GridSplitter>
<basics:GridSplitter Background="BlanchedAlmond" Width="1400" Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="5">
</basics:GridSplitter>
Here in the 1st Splitter, we are setting the Grid.Row = 0 and Grid.Column = 3 which means that our Splitter will be in the 3rd Column and 0th row. In the second splitter, we set the Grid.ColumnSpan as 5, i.e. the splitter will span 5 columns and will take space of 5 Columns (very similar to the Html tables colSpan property).
Note: In both the Splitters we are setting the VerticalAlignment and HorizontalAlignment property, which decides whether we will resize the Column or Row. If the VerticalAlignment property = Stretch, it will resize the column. If the HorizontalAlignment property = Stretch it will resize the row.
We have set Height and Width, otherwise by default it will be 0 Height and 0 Width.
Step 6: We will now add a few visual elements and will place them in different rows and columns of the Grid in order to see the GridSplitter effect.
The entire markup after adding the visual elements will look like this:
<UserControl x:Class="GridSplitterSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="180"/>
</Grid.ColumnDefinitions>
<basics:GridSplitter Height="200" Grid.Row="0" Grid.Column="3" VerticalAlignment="Stretch" HorizontalAlignment="Left" Background="Coral" Width="5">
</basics:GridSplitter>
<basics:GridSplitter Background="BlanchedAlmond" Width="1400" Grid.Row="1" Grid.ColumnSpan="5" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="5">
</basics:GridSplitter>
<Rectangle Height="100" Fill="Aqua" Grid.Row="0" Grid.Column="0"></Rectangle>
<Rectangle Height="70" Width="75" Fill="DarkBlue" Grid.Row="1" Grid.Column="2"></Rectangle>
<Rectangle Height="70" Fill="AliceBlue" Grid.Row="1" Grid.Column="1"></Rectangle>
<Ellipse Height="100" Width="100" Grid.Row="0" Grid.Column="2" Fill="Beige"></Ellipse>
<Ellipse Height="100" Width="100" Grid.Row="0" Grid.Column="3" Fill="CadetBlue" Margin="0,0,0,0"></Ellipse>
</Grid>
</UserControl>
Once you run the application now, you will find that you can resize the rows and columns. A sample resizing would look similar to the following:
We can see that without writing a single line of code, we could easily resize columns and rows of Grid Control.
How do I add a Silverlight GridSplitter Programmatically?
If you need to add a GridSplitter programmatically, use this code. The code adds a vertical splitter.
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace GridSplitterSample
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
GridSplitter grdSplitter = new GridSplitter();
grdSplitter.Background = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
grdSplitter.Width = 5;
grdSplitter.Height = 200;
grdSplitter.VerticalAlignment = VerticalAlignment.Stretch;
LayoutRoot.Children.Add(grdSplitter);
//Setting Column and Row attached Property
grdSplitter.SetValue(Grid.RowProperty, 1);
grdSplitter.SetValue(Grid.ColumnProperty, 1);
}
}
}
VB.NET
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Namespace GridSplitterSample
Partial Public Class Page
Inherits UserControl
Public Sub New()
InitializeComponent()
Dim grdSplitter As New GridSplitter()
grdSplitter.Background = New SolidColorBrush(Color.FromArgb(255, 0, 0, 0))
grdSplitter.Width = 5
grdSplitter.Height = 200
grdSplitter.VerticalAlignment = VerticalAlignment.Stretch
LayoutRoot.Children.Add(grdSplitter)
'Setting Column and Row attached Property
grdSplitter.SetValue(Grid.RowProperty, 1)
grdSplitter.SetValue(Grid.ColumnProperty, 1)
End Sub
End Class
End Namespace
References:
http://msdn.microsoft.com/en-us/library/system.windows.controls.gridsplitter(VS.95).aspx
http://msdn.microsoft.com/en-us/library/cc278070(VS.95).aspx
So that was the GridSplitter control for you. Run the sample and experience how you can use the GridSplitter to redistribute space. I hope this article was useful and I thank you for viewing it.
Harsh Bardhan (MCTS) has developed IT solutions with a diverse background in server side and client side development. He is currently working with SymphonyServices as a Software developer. Harsh continues to be an integral part of open forums on cutting-edge technology like Silverlight, including the .NET Framework and Web Services. Harsh has expertise with many Microsoft technologies, including .NET, LINQ, WCF Service, Silverlight and a strong background in SQLServer.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!