Using the GridSplitter control with Silverlight 2

Posted by: Harsh Bardhan , on 10/31/2008, in Category Silverlight 2, 3, 4 and 5
Views: 34444
Abstract: 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. Let us explore this control in this article.
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.
New Project
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.
Grid Splitter
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>
 
Grid Splitter
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:
Grid Splitter
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
Grid Splitter
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.
If you liked the article,  Subscribe to the RSS Feed.
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.

Absolutely Awesome Book on C# and .NET

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 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 eBook 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 .NET Standard and the upcoming C# 8.0 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!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Author bio not available


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Sheju on Saturday, November 1, 2008 9:50 PM
How will i use splitter in real scenario. Can you explain any?
Comment posted by Dustin B on Tuesday, November 4, 2008 12:24 AM
Thanks for the useful stuff
Comment posted by HarshBardhan on Tuesday, November 11, 2008 11:13 AM
Hi Sheju,
If you want user to give many controls and wants user to see only few of them at  a time you can use this one..
So that Whichever part user want to see will be able to expand that and will be able to see that.
Later if he want to ssee few other things he will be able to see those by resizing them accordingly..

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook