Adaptive Grid View Control In UWP With XAML And C#

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

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 AdaptiveGridView Control presents items in a evenly-spaced set of columns to fill the total available display space. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically.

Reading this article, you can learn how to use UWP Tool Kit Control – Adaptive Grid View Control in Universal Windows Apps 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, we can discuss step by step App development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> give it a suitable name (UWPAdaptiveGrid View)->OK.



Step 2 - Choose the Target and Minimum platform version that your Windows Universal Application will support. After this, the Project creates App.xaml and MainPage.xaml.



For adding UWPToolKit Control, Please refer,

• How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3 - Add TextBlock control and change the Name and text property for title,



Step 4 - Add images in the Assets folder, images for UWPAdaptiveGridView




Step 5 - Add the following Xaml code for creating data template for UWPAdaptiveGrid Viewcontrol,

<Page.Resources>
    <DataTemplate x:Key="photos">
        <Grid Background="White" BorderBrush="Black" BorderThickness="1">
            <Image Source="{Binding IName}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
    </DataTemplate>
</Page.Resources>

Step 6 - Add UWP Tool Kit Name Space in Mainpage.xaml,

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

Add UWPAdaptiveGridView control from UWP Tool Kit and set the name, ItemHeight, ItemTemplate properties



Set the DesiredWidth Prpoerty,



Add another two UWPAdaptiveGridView control from UWP Tool Kit and set the name,ItemHeight, ItemTemplate, DesiredWidth properties



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

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPAdaptiveGridView" 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" x:Class="UWPAdaptiveGridView.MainPage" mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="photos">
            <Grid Background="White" BorderBrush="Black" BorderThickness="1">
                <Image Source="{Binding IName}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="396,105,0,0" TextWrapping="Wrap" Text="Adaptive Grid View Control test" VerticalAlignment="Top" FontWeight="Bold" FontSize="36" />
        <Controls:AdaptiveGridView x:Name="ADGVTest1" HorizontalAlignment="Left" Margin="46,218,0,0" VerticalAlignment="Top" Width="274" Height="181" ItemHeight="50" DesiredWidth="50" ItemTemplate="{StaticResource photos}" />
        <Controls:AdaptiveGridView x:Name="ADGVTest2" HorizontalAlignment="Left" Margin="396,218,0,0" VerticalAlignment="Top" Width="501" Height="342" ItemHeight="100" DesiredWidth="70" ItemTemplate="{StaticResource photos}" />
        <Controls:AdaptiveGridView x:Name="ADGVTest3" HorizontalAlignment="Left" Margin="951,218,0,0" VerticalAlignment="Top" Width="286" Height="443" ItemHeight="150" DesiredWidth="100" ItemTemplate="{StaticResource photos}" /> </Grid>
</Page>

Step 7 - Add namespace and the following code in MainPage.xaml.cs,

using System.Collections.ObjectModel;
public class MenuItem {
    public string IName {
        get;
        set;
    }
}
public sealed partial class MainPage: Page {
    public MainPage() {
        this.InitializeComponent();
        ObservableCollection < MenuItem > items = new ObservableCollection < MenuItem > ();
        for (int i = 0; i < 25; i++) {
            items.Add(new MenuItem() {
                IName = "ms-appx:///Assets//img.jpg"
            });
        }
        ADGVTest1.ItemsSource = items;
        ADGVTest2.ItemsSource = items;
        ADGVTest3.ItemsSource = items;
    }
}

 

Step 8 - Deploy your App in Local Machine. The output of the UWPAdaptiveGridView App is shown below.

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