Overview Of Staggered Panel Control In UWP

StaggeredPanel Control enables staggered layout where items are added to columns with the least amount of space.

StaggeredPanel is from UWP Community Toolkit. 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.

Reading this article, you can learn how to use StaggeredPanel 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. Microsoft Visual Studio 2017 (https://www.visualstudio.com/vs/whatsnew/ )
3. Windows Anniversary Update (10.0.14393.0) or higher is needed to support correctly this feature.

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 (UWPStaggeredPanel)->OK.

 

After Choosing the Target and minimum platform version, the Project creates App.xaml and MainPage.xaml.

 

Step 2

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

Step 3

Add the following controls in design window for StaggeredPanel control feature view,

Add the TextBlock Control and change the Name and Text Property for title

Add the GridView for placing the item,

 

Add the following code for GridView – Item Template for adding items,

<GridView.ItemTemplate>
    <DataTemplate>
        <Grid Background="White" BorderBrush="Black" BorderThickness="1">
            <Image Source="{Binding IName}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

Add an Image to Assets for StaggeredPanel control items,

 

Add the StaggeredPanel Control, inside the GridView.ItemsPanel.

<GridView.ItemsPanel>
    <ItemsPanelTemplate>
        <Custom:StaggeredPanel DesiredColumnWidth="250" HorizontalAlignment="Left" /> </ItemsPanelTemplate>
</GridView.ItemsPanel>

Step 4

Add the following namespace and code for data item binding in Mainpage.xaml.cs,

using System.Collections.ObjectModel;
public class MenuItem {
    public string IName {
        get;
        set;
    }
}
ObservableCollection < MenuItem > items = new ObservableCollection < MenuItem > ();
for (int i = 0; i < 15; i++) {
    if (i % 2 == 0) {
        items.Add(new MenuItem() {
            IName = "ms-appx:///Assets//img.jpg"
        });
    } else items.Add(new MenuItem() {
        IName = "ms-appx:///Assets//img1.jpg"
    });
}
gv.ItemsSource = items;
}

Note

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

<Page x:Class="UWPStaggeredPan.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPStaggeredPan" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Custom="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d">
    <Grid>
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="396,33,0,0" TextWrapping="Wrap" Text="Staggered Panel Control test" VerticalAlignment="Top" FontWeight="Bold" FontSize="36" Height="48" />
        <GridView x:Name="gv" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,107,0,0">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="White" BorderBrush="Black" BorderThickness="1">
                        <Image Source="{Binding IName}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <Custom:StaggeredPanel DesiredColumnWidth="250" HorizontalAlignment="Left" /> </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </Grid>
</Page>

Step 5

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

 

Summary

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