Collection views

Article
10/14/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Collection views make it easy to display your content. If you've used UICollectionView in iOS, you'll want to know how a GridView does something similar.

iOS 6 introduced a new control called a UICollectionView to display items such as contacts, images or text in a grid-like layout.

Windows 8 provides the GridView control, which you can use to arrange a set of items in a horizontal grid-like layout.

The following video compares grid views in iOS apps and Windows Store apps.

Overview of the iOS UICollectionView

In iOS, a UICollectionView control is often used to display lists of data which include images or a collection of other items in a grid-like structure. Grid-like layouts are one of the most common user interface controls especially in iPad apps as compared to lists of items, a grid layout takes better advantage of the available screen space. Grid-layout have many uses, such as:

Displaying a list of items which may include images.
Navigating through hierarchically-structured data.
Organizing data in visually distinct groupings

Here's a simple collection view running on an iPad:

GridView in Windows Store apps

The Windows 8 controls library provides ListView and GridView controls that you can use to display lists of data in a grid-like layout. GridView control is used to lay down a list of items in a horizontal order. Here is an example of a GridView control used to show a list of items in a grid-like layout.

List view and grid view controls can source their data from a static in-memory list, a local or remote database, an XML document, a remote web service, or a feed. The GridView control can be associated with the data sources using a technique called data binding. Data binding provides an easy way for Windows Store apps to display, add, delete, or manage data. For additional details, see Data binding controls or Data binding overview (Windows Store apps using C#/VB/C++ and XAML).

Comparing grid layout of items in iOS and Windows Store apps

Now we'll step through adding a grid view control to an app, and compare iOS to Windows 8.

Steps	iOS	Windows 8
Create the UI control.	Use UICollectionView.	Use the GridView control. For more info, see How to add a grid view.
Define the look and feel of the grid layout	Implement supplementary views for the UICollectionView (using the collectionView: viewForSupplementaryElementOfKind: atIndexPath: method.) Implement decoration view for the UICollectionView. (using the registerClass:forDecorationViewOfKind: method).	Define a GroupStyle property for the GridView control and set its attributes. Change the layout of items using ItemsPanel property of the GridView control. For more information, see Quickstart: adding ListView and GridView controls.
Define the items' look and feel.	For a custom layout, define a custom view for the cell by subclassing UICollectionViewCell class.	Define the ItemsControl class's ItemTemplate property for the look and feel of each item.
Data bind the control to a data source.	Implement UICollectionViewDataSource interface in the controller.	Set the ItemsSource property of the GridView control to a collection of items. For a grouped list, set the ItemsSource property to a CollectionViewSource class instance. For creating a grouped list, see How to group items in a list or grid.

Example collection display app

Now we'll build a simple Windows Store app that uses the GridView control to show a collection of photos in a grid layout. It uses the UICollectionView control with the cell style configured to display one image.

Create the app.

In this sample, we are going to create our app using the C# Blank App template.
- Start Visual Studio.
- Create a Blank App (XAML) solution using Visual C#, and name it PhotoGallery.

Define the data source.

Windows 8 allows a variety of data sources to be used in the app. In this app, we will use data defined programmatically and instantiated in memory. For information about how to use other data sources, refer to Data binding overview. Our app is a photo gallery that displays the photograph along with a title and description.

To define the data source, we first define a class to create a list of our items, as shown in this code:

On the Project menu, click Add Class.
In the Name box, replace the default text with Photo.cs.
Click OK.

At the top of the file, add the following using statements:

using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

Replace the code class Photo { } with the code shown here:

public class Photo
{

    public Photo(string imagePath)
    {
        this._imagePath = imagePath;
    }
    private ImageSource _image = null;
    private String _imagePath = null;
    public ImageSource Image
    {
        get
        {
            if (this._image == null && this._imagePath != null)
            {
                this._image = new BitmapImage(new Uri(this._imagePath));
            }
            return this._image;
        }
    }
}

In the MainPage.xaml.cs class constructor, we create a list of photos that will act as a data source for our grid view control, as shown in this code:

In Visual Studio, in the Solution Explorer window, expand MainPage.xaml, and double-click MainPage.xaml.cs.
In the MainPage class, before the MainPage constructor, add this line of code:
```
 private List<Photo> photos = new List<Photo>();
```

In the MainPage constructor, before the line of code this.InitializeComponent();, add the rest of the code shown here:

Photo photo1 = new Photo("http://www.nasa.gov/images/content/64883main_image_feature_211_jw4.jpg");
photos.Add(photo1);
Photo photo2 = new Photo("http://www.nasa.gov/images/content/162283main_image_feature_693_ys_4.jpg");
photos.Add(photo2);
Photo photo3 = new Photo("http://www.nasa.gov/images/content/59802main_pia05389-516.jpg");
photos.Add(photo3);
Photo photo4 = new Photo("http://www.nasa.gov/images/content/53254main_MM_image_feature_97_jw4.jpg");
photos.Add(photo4);
Photo photo5 = new Photo("http://www.nasa.gov/images/content/151232main_image_feature_601_ys_4.jpg");
photos.Add(photo5);
Photo photo6 = new Photo("http://www.nasa.gov/images/content/63375main_image_feature_202_jw4.jpg");
photos.Add(photo6);
Photo photo7 = new Photo("http://www.nasa.gov/images/content/111199main_image_feature_290_ys4.jpg");
photos.Add(photo7);

The list of photos of type List<Photo> is a defined as a C# generic list. For more information on what this means, see An Introduction to C# Generics.

Add a GridView control to the page.

Add a GridView control to your app using XAML code, like this:
- In Visual Studio, in the Solution Explorer window, double-clickMainPage.xamll
- Replace the lines of code <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"></Grid> with the code shown here:
```
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <GridView Grid.Row="0" Grid.Column="0" Background="{StaticResource          ApplicationPageBackgroundThemeBrush}"  Name="photoGridView"
        ItemsSource="{Binding}" 
        SelectionMode="Single" Padding="50,100,50,0"  >
    </GridView>
</Grid>
```
  The data binding is created in XAML using the {Binding..} syntax. The source of binding is created by setting the DataContext property of the GridView control. The ItemsSource attribute with the value {Binding} specifies that the list's items are data bound to the DataContext property of the GridView control itself.
  
  You could also add the GridView control to your app programmatically: for details, see Quickstart: adding controls and handling events.
Design the look and feel of the grid.

We will use the default look and feel for the grid, which is similar to the look and feel of the grid in iOS. For more information on changing the look and feel of the GridView control, see Quickstart: adding ListView and GridView controls.
Design the look and feel of the items in the list.

In Visual Studio, in the MainPage.xaml file, between the opening tag <GridViewGrid.Row="0" Grid.Column="0" …> and the closing tag </GridView>, add this XAML code:
```
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Height" Value="250"></Setter>
                <Setter Property="Width" Value="250"></Setter>
                <Setter Property="Margin" Value="20"></Setter>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Gray" BorderThickness="12">
                    <Image  Source="{Binding Image}" />
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
```
To specify the look and feel of items in the grid, we need to set the ItemTemplate property of the GridView control specifying a DataTemplate object, using XAML code as shown above. The controls in the layout can be bound to properties of a data object or have content defined inline. We have defined the template for the items in the GridView inline.

The template consists of an image with a border of thickness 12 in Gray color. The source property of the Image object is specified as {Binding Image} which binds it to the image property of the item's backing Photo object.
Setting the item source.

Once our item list is created, specifying the item source is quite simple. In Visual Studio, in the MainPage.xaml.cs file, in the OnNavigatedTo method, add the code shown here:
```
photoGridView.ItemsSource = photos;
```