GridView

GridView также, как и ListView, создает отображение данных в виде строк и столбцов. Единственное отличие GridView от ListView состоит в том, что GridView использует в качестве панели для расположения элементов класс ItemsWrapGrid и поэтому по умолчанию может создавать дополнительные колонки для отображения данных.

Рассмотрим на примере. Возьмем для представления данных тот же класс Phone:

public class Phone
{
    public string Title { get; set; }
    public string Company { get; set; }
    public int Price { get; set; }
}

И в xaml определим GridView:

<Page
    x:Class="DataApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <GridView x:Name="phonesGrid" IsItemClickEnabled="True"
                  SelectionMode="None" ItemClick="GridView_ItemClick">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Width="100">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Title}" Grid.Row="0" />
                        <TextBlock Text="{Binding Company}" Grid.Row="1" />
                        <TextBlock Text="{Binding Price}" Grid.Row="2" />
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.Items>
                <local:Phone Title="iPhone 7" Company="Apple" Price="54990" />
                <local:Phone Title="Galaxy S8" Company="Samsung" Price="39990" />
                <local:Phone Title="Nokia 6" Company="Nokia" Price="29990" />
            </GridView.Items>
        </GridView>
    </Grid>
</Page>

Определение GridView также похоже на ListView: здесь мы также должны задать свойство ItemTemplate, установив для него шаблон отображения данных. В данном случае опять же задаем объект DataTemplate. В нем определяем грид с тремя столбцами. И в каждом столбце текстовый блок, привязанный к определенному свойству объекта Phone с помощью выражения {Binding навание_свойства}. А сами элементы также задаются с помощью свойства Items.

Выделение элемента в GridView порождает событие ItemClick (если, конечно, установлено свойство IsItemClickEnabled="True"). Для обработки этого события определим в файле кода обработчик:

private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
    Phone selectedPhone = (Phone)e.ClickedItem;
    phonesGrid.Header = selectedPhone.Title;
}

Через свойство аргумента e.ClickedItem мы можем получить выбранный в GridView элемент. А так как GridView содержит объекты Phone, то мы можем привести выбранный элемент к типу Phone. Ну и далее название смартфона устанавливается в качестве заголовка для GridView.