Post
Ask Question

UniformGrid Control In UWP

The UniformGrid Control is a responsive layout control which arranges items in an evenly-spaced set of rows or columns to fill the total available display space. Each cell in the grid, by default, will be the same size.

UniformGrid control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of extensions, helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use UniformGridcontrolin Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

  • Windows 10 (Recommended)
  • Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/

Step 1

Open Visual studio 2017 -> Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give the Suitable Name for your App (UniformGrid)->OK.

 

After choosing the Target and minimum platform version your Windows Universal Application will support the Project creates App.xaml and MainPage.xaml.

 

Step 2

First Update the Reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version in Manage NuGet Packages

Step 3

Add the following controls in design window for a UniformGridfeature view, Add the TextBlock Control and change the Name and Text Property.

Add the following Namespace for UniformGridControl,

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add the UniformGridcontrol with Rows property and add 3 Buttons inside UniformGrid Control and set the Content Property.

  1. <controls:UniformGrid Margin="10" Rows="1" HorizontalAlignment="Right" VerticalAlignment="Bottom">  
  2.     <Button Grid.Column="0" Content="Ok" FontSize="18" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />  
  3.     <Button Grid.Column="1" Content="Cancel" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />  
  4.     <Button Grid.Column="2" Content="Back" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />   
  5. </controls:UniformGrid>  

 

 

Add an image for a UniformGrid view

 

Add one more UniformGridcontrol and set the Firstcolumn, Orientation, Rows, Column Properties,

  1. <controls:UniformGrid FirstColumn="0" Orientation="Horizontal" Rows="0" Columns="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="38,150,0,0" Height="689" Width="1172">  

 

Add the Image controls Inside the UniformGridcontrol and set the source Property,
  1. <controls:UniformGrid FirstColumn="0" Orientation="Horizontal" Rows="0" Columns="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="38,150,0,0" Height="689" Width="1172">  
  2.     <Image Source="Assets/001.jpg" />  
  3.     <Image Source="Assets/001.jpg" />  
  4.     <Image Source="Assets/001.jpg" />  
  5.     <Image Source="Assets/001.jpg" />  
  6.     <Image Source="Assets/001.jpg" />  
  7.     <Image Source="Assets/001.jpg" />  
  8.     <Image Source="Assets/001.jpg" />  
  9.     <Image Source="Assets/001.jpg" />  
  10.     <Image Source="Assets/001.jpg" />  
  11.     <Image Source="Assets/001.jpg" />  
  12.     <Image Source="Assets/001.jpg" />  
  13.     <Image Source="Assets/001.jpg" />   
  14. </controls:UniformGrid>  
 

Note

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

  1. <Page x:Class="UniformGrid.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UniformGrid" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  2.     <Grid>  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Center" Margin="0,46,0,0" Text="UniformGrid Control in UWP" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold" FontSize="36" Height="49" />  
  4.         <controls:UniformGrid Margin="10" Rows="1" HorizontalAlignment="Right" VerticalAlignment="Bottom">  
  5.             <Button Grid.Column="0" Content="Ok" FontSize="18" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />  
  6.             <Button Grid.Column="1" Content="Cancel" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />  
  7.             <Button Grid.Column="2" Content="Back" Margin="5" Padding="6,3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </controls:UniformGrid>  
  8.         <controls:UniformGrid FirstColumn="0" Orientation="Horizontal" Rows="0" Columns="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="38,150,0,0" Height="689" Width="1172">  
  9.             <Image Source="Assets/001.jpg" />  
  10.             <Image Source="Assets/001.jpg" />  
  11.             <Image Source="Assets/001.jpg" />  
  12.             <Image Source="Assets/001.jpg" />  
  13.             <Image Source="Assets/001.jpg" />  
  14.             <Image Source="Assets/001.jpg" />  
  15.             <Image Source="Assets/001.jpg" />  
  16.             <Image Source="Assets/001.jpg" />  
  17.             <Image Source="Assets/001.jpg" />  
  18.             <Image Source="Assets/001.jpg" />  
  19.             <Image Source="Assets/001.jpg" />  
  20.             <Image Source="Assets/001.jpg" />   
  21.          </controls:UniformGrid>  
  22.     </Grid>  
  23. </Page>  

 

Step 4

Deploy your App in Local Machine, and the output of the UniformGrid is,

 

Summary

Now, you have successfully tested UniformGridcontrol in XAML and UWP environment using Visual Studio 2017.


Similar Articles