Grid views programming (Android versus Windows Store apps)

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]

The GridView control in Windows Store apps is similar to the GridView control in Android apps. Here's how to build a Windows Store app that uses the GridView control.

Grid views in Android apps

In Android, a GridView 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 UI controls, especially in Android apps. Compared to lists of items, a grid layout takes better advantage of the available screen space. Grid layouts 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.

Top

Grid views in Windows Store apps

The Windows 8 controls library provides the GridView control that you can use to display lists of data in a grid-like layout. The GridView control is used to present 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.

Grid views 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 overview or Quickstart: Data binding to controls.

Top

Comparing grid view coding steps in Android and Windows Store apps

Let's step through adding a grid view to an app, and compare Android to Windows 8.

Steps	Android	Windows 8
Create the UI control.	Use GridView.	Use the GridView control. For more info, see How to add a grid view.
Define the look and feel of the grid view.	Use declarative XML markup to define display properties.	Define a GroupStyle property for the GridView control and set its attributes. Change the layout of items using the ItemsPanel property of the GridView control. For more information, see Quickstart: adding ListView and GridView controls.
Define the items' look and feel.	Use declarative XML markup to define display properties.	Define the ItemsControl class's ItemTemplate property for the look and feel of each item.
Data bind the control to a data source.	Use the GridView control's setAdapter method to set the grid view to an object that extends BaseAdapter.	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.

Top

Grid view example app

Let's build a simple Windows Store app that uses the GridView control to show a collection of photos in a grid layout.

Here's what the Android version of this app looks like.

And here's what the Windows Store app looks like.

Top

Building the example app

Create the app: in this sample, we are going to create our app using the C# Blank App template.
1. Start Microsoft Visual Studio.
2. On the File menu, click New Project.
3. If Windows Store is not already selected, expand Installed > Templates > Visual C#, and click Windows Store.
4. If Blank App (XAML) is not already selected, click it.
5. In the Name and Location boxes, type a name for the app (such as PhotoGallery) and a location, or leave the defaults as-is.
6. Click OK.
Define the data source: Windows 8 allows a variety of data sources to be used in apps. 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 define a class to create a list of our items, as shown in this code.
1. On the Project menu, click Add Class.
2. In the Name box, replace the default text with Photo.cs.
3. Click OK.
4. At the top of the file, add the following using statements.
```
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
```
5. 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 theMainPage.xaml.cs class constructor, we create a list of photos that will act as a data source for our grid view, 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 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.
1. In Visual Studio, in the Solution Explorer window, double-click MainPage.xaml.
2. 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"/>
</Grid>
```
  The data binding is created in Extensible Application Markup Language (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 Android. 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 <GridView Grid.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.
Set the item source: after the 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 photoGridView.ItemsSource = photos;.

Top

Quickstart: adding ListView and GridView controls

How to add a grid view

How to group items in a list or grid

Quickstart: Defining layouts

GridView class

Data binding overview