Post
Ask Question

GridSplitter Control In UWP With XAML And C#

Before reading this article, please go through the following articles.

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
  2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

The GridSplitter Control provides an easy-to-use Splitter that re-distributes space between columns or rows of a Grid Control. By dragging the control, the control will resize the targeted columns or rows.

Reading this article, you can learn how to use UWP Toolkit Control – GridSplitter Control in UWP app development, with XAML and Visual C#.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, let's discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project -> Select Universal (under Visual C# -> Windows) -> Blank App -> Give the suitable name for your app (UWPGridSplitter) -> OK.

Visual studio 2015

Step 2

Choose the Target and Minimum platform version that your application will support. After this, the Project creates App.xaml and MainPage.xaml.

Visual studio 2015

Step 3

Add the code for 2 rows and columns of the Grid.

  1. <Grid.RowDefinitions>  
  2.     <RowDefinition MinHeight="100"></RowDefinition>  
  3.     <RowDefinition Height="11"></RowDefinition>  
  4.     <RowDefinition></RowDefinition>  
  5. </Grid.RowDefinitions>  
  6. <Grid.ColumnDefinitions>  
  7.     <ColumnDefinition MinWidth="200"></ColumnDefinition>  
  8.     <ColumnDefinition Width="11"></ColumnDefinition>  
  9.     <ColumnDefinition></ColumnDefinition>  
  10. </Grid.ColumnDefinitions>  
Visual studio 2015

Step 4

Add the code for Rectangles of each part of the Grid.
  1. <Rectangle Grid.Column="0" Grid.Row="0" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  2. <Rectangle Grid.Column="2" Grid.Row="0" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  3. <Rectangle Grid.Column="0" Grid.Row="2" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  4. <Rectangle Grid.Column="1" Grid.Row="2" Fill="White" Stroke="Gray" StrokeThickness="1" />  
Step 5

Add images for Grid, in the Assets folder.



Step 6

Add two image controls and set the images for each control.
  1. <Image Grid.Column="2" Grid.Row="0" Margin="12,24" Source="Assets/01.jpg" Stretch="UniformToFill" />  
  2. <Image Grid.Column="0" Grid.Row="0" Margin="12,12" Source="Assets/02.png" Stretch="Fill"/>  
Visual studio 2015

Step 7

Add two Textblock controls for displaying the content in the Grid.
  1. <TextBlock Grid.Column="0" Grid.Row="2" TextWrapping="Wrap" Margin="12,12">  
  2.     The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10. The toolkit can be used to build UWP apps for any Windows 10 device, including PC, Mobile, XBOX, IoT, and HoloLens. You can also use the toolkit with an existing desktop app converted to UWP, using the Desktop Bridge. The UWP Community Toolkit is available as a Visual Studio NuGet Package for new or existing C# and VB.NET projects. Read the "Getting Started" page for all the details.  
  3. </TextBlock>  
  4.   
  5. <TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Margin="12,12">  
  6.     The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates the common developer tasks building UWP apps for Windows 10. The toolkit can be used to build UWP apps for any Windows 10 device, including PC, Mobile, XBOX, IoT and HoloLens. You can also use the toolkit with an existing desktop app converted to UWP using the Desktop Bridge. The UWP Community Toolkit is available as a Visual Studio NuGet package for new or existing C# and VB.NET projects. Read the Getting Started page for all the details.  
  7.   
  8. </TextBlock>  

For adding UWPToolkit Control, please refer, How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 8

Add UWP Toolkit namespace in Mainpage.xaml, xmlns:UWPToolKIT="using:Microsoft.Toolkit.Uwp.UI.Controls".

Add the GridSplitter Control from UWP Toolkit and set the Column, ResizeBehavior, ResizeDirection properties for Column Splitter.

Visual studio 2015

Step 9

Add code inside the GridSplitter control in Mainpage.Xaml for adding elements.

Visual studio 2015

Step 10

Add a TextBlock for Column Splitter icon.

Visual studio 2015

Step 11

Similarly, add a GridSplitter control for RowSplitter.

Visual studio 2015

Step 12

Add TextBlock for each Blade for displaying the content.

Visual studio 2015

Note

 Automatically, the following code will be generated in XAML code view, while we are done in the design view.

  1. <Page xmlns:UWPToolKit="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPGridSplitter.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPGridSplitter" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <Grid.RowDefinitions>  
  4.             <RowDefinition MinHeight="100"></RowDefinition>  
  5.             <RowDefinition Height="11"></RowDefinition>  
  6.             <RowDefinition></RowDefinition>  
  7.         </Grid.RowDefinitions>  
  8.         <Grid.ColumnDefinitions>  
  9.             <ColumnDefinition MinWidth="200"></ColumnDefinition>  
  10.             <ColumnDefinition Width="11"></ColumnDefinition>  
  11.             <ColumnDefinition></ColumnDefinition>  
  12.         </Grid.ColumnDefinitions>  
  13.         <Rectangle Grid.Column="0" Grid.Row="0" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  14.         <Rectangle Grid.Column="2" Grid.Row="0" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  15.         <Rectangle Grid.Column="0" Grid.Row="2" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  16.         <Rectangle Grid.Column="1" Grid.Row="2" Fill="White" Stroke="Gray" StrokeThickness="1" />  
  17.         <Image Grid.Column="2" Grid.Row="0" Margin="12,24" Source="Assets/01.jpg" Stretch="UniformToFill" />  
  18.         <Image Grid.Column="0" Grid.Row="0" Margin="12,12" Source="Assets/02.png" Stretch="Fill" />  
  19.         <TextBlock Grid.Column="0" Grid.Row="2" TextWrapping="Wrap" Margin="12,12">  
  20.             The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10. The toolkit can be used to build UWP apps for any Windows 10 device, including PC, Mobile, XBOX, IoT and HoloLens. You can also use the toolkit with an existing desktop app converted to UWP using the Desktop Bridge. The UWP Community Toolkit is available as a Visual Studio NuGet package for new or existing C# and VB.NET projects. Read the Getting Started page for all the details.  
  21.         </TextBlock>  
  22.   
  23.         <TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Margin="12,12">  
  24.             The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10. The toolkit can be used to build UWP apps for any Windows 10 device, including PC, Mobile, XBOX, IoT and HoloLens. You can also use the toolkit with an existing desktop app converted to UWP using the Desktop Bridge. The UWP Community Toolkit is available as a Visual Studio NuGet package for new or existing C# and VB.NET projects. Read the Getting Started page for all the details.  
  25.         </TextBlock>  
  26.         <UWPToolKit:GridSplitter Grid.Column="1" Width="11" ResizeBehavior="BasedOnAlignment" ResizeDirection="Auto" Background="Gray" Foreground="White" FontSize="13">  
  27.             <UWPToolKit:GridSplitter.Element>  
  28.                 <Grid>  
  29.                     <TextBlock HorizontalAlignment="Center" Text="" IsHitTestVisible="False" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe MDL2 Assets">  
  30.                     </TextBlock>  
  31.                 </Grid>  
  32.             </UWPToolKit:GridSplitter.Element>  
  33.         </UWPToolKit:GridSplitter>  
  34.         <UWPToolKit:GridSplitter Foreground="White" Grid.Row="1" ResizeBehavior="BasedOnAlignment" ResizeDirection="Auto" Background="Gray" Height="11" HorizontalAlignment="Stretch" FontSize="13">  
  35.             <UWPToolKit:GridSplitter.Element>  
  36.                 <Grid>  
  37.                     <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" Text="" Foreground="Black" FontFamily="Segoe MDL2 Assets">  
  38.                     </TextBlock>  
  39.                 </Grid>  
  40.             </UWPToolKit:GridSplitter.Element>  
  41.         </UWPToolKit:GridSplitter>  
  42.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="125,-6,0,0" TextWrapping="Wrap" Text="UWP Tool Kit GridSplitter Demo" VerticalAlignment="Top" FontWeight="Bold" FontSize="22" Width="394" Grid.Column="2" />  
  43.     </Grid>  
  44. </Page>   

 

Step 13

Deploy your app in Local Machine. The output of the UWPGridSpiliter app is shown below.

Visual studio 2015

After dragging the Splitter controls,

Visual studio 2015

Summary

Now, you have successfully tested UWP Tool Kit – GridSpiliter Control in Visual C# - UWP environment. 


Similar Articles