How To Use Alignment Grid XAML Control In UWP

The AlignmentGrid Control can be used to display a grid to help align the controls. AlignmentGrid can be controlled by using step properties with HorizontalStep and VericalStep and Line color by LineBrush property.

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

Reading this article, you can learn how to use AlignmentGrid Control in 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/ )
Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

Step 1

Open Visual Studio 2017 and go to Start -> New Project-> Select Windows Universal (under Visual C#)-> Blank App(Universal Windows) -> Give a suitable name for your App (UWPAlignmentGrid)->OK.

After choosing the target and minimum platform versions that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

Step 2

First, update the Reference of Microsoft.NETCore.UniversalWindowsPlatform with its latest version via "Manage NuGet Packages".

Step 3

Add the namespace and AlignmentGrid Control and set the properties Opacity, LineBrush, VerticalStep, HorizontalStep in Mainpage.xaml.

xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools"
<developerTools:AlignmentGrid Opacity="0.1" LineBrush="Black" VerticalStep="14" HorizontalStep="14" />

Add the Stackpanel and TextBlock Controls (with different Margins) and change the Name and Text Property for AlignmentGrid XAML control test.

<StackPanel Margin="18,15,843,292" BorderThickness="1" BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}">
<TextBlock x:Name="tblTitle" Margin="0,0,0,30" Text="AlignmentGrid XAML Control Test" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" />
<TextBlock x:Name="tblName" Margin="0,0,0,30" Text="Name" />
<TextBlock x:Name="tblAdd" Margin="20,0,0,20" Text="Address" />
<TextBlock x:Name="tblLoc" Margin="40,0,0,20" Text="Location" />
<TextBlock x:Name="tblCity" Margin="20,0,0,20" Text="City" />
</StackPanel>

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

<Page x:Class="UWPAlignmentGrid.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPAlignmentGrid" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:developerTools="using:Microsoft.Toolkit.Uwp.DeveloperTools" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<developerTools:AlignmentGrid Opacity="0.1" LineBrush="Black" VerticalStep="14" HorizontalStep="14" />
<StackPanel Margin="18,15,843,292" BorderThickness="1" BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}">
<TextBlock x:Name="tblTitle" Margin="0,0,0,30" Text="AlignmentGrid XAML Control Test" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" />
<TextBlock x:Name="tblName" Margin="0,0,0,30" Text="Name" />
<TextBlock x:Name="tblAdd" Margin="20,0,0,20" Text="Address" />
<TextBlock x:Name="tblLoc" Margin="40,0,0,20" Text="Location" />
<TextBlock x:Name="tblCity" Margin="20,0,0,20" Text="City" /> </StackPanel>
</Grid>
</Page>

Step 4

Deploy your app on local machine. The output of the UWPAlignmentGrid is shown below.

Summary

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