Работа с данными

Элементы управления данными

Для работы с данными в Universal Windows Platform есть целый пласт элементов управления в виде списков. Они являются производными от класса Windows.UI.Xaml.Controls.ItemsControl, который в свою очередь является наследником класса Control. Все они содержат коллекцию элементов. Это такие элементы управления как ListBox, ComboBox, ListView, GridView, FlipView, AutoSuggestBox.

Возьмем простейший элемент-список - ListBox:

<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}">
        <ListBox Name="phonesList">
            <x:String>iPhone 7</x:String>
            <x:String>Samsung Galaxy S8</x:String>
            <x:String>Huawei P10</x:String>
            <x:String>LG G 6</x:String>
            <x:String>Xiaomi Mi</x:String>
        </ListBox>
    </Grid>
</Page>

Все элементы, размещенные внутри ListBox, да и внутри любого другого спискового элемента, представляют элементы списка.

Коллекция объектов внутри элемента-списка доступна в виде свойства Items. Для управления элементами из этой коллекции мы можем использовать следующие методы:

• Add(object item): добавление элемента

• Clear(): полная очистка коллекции

• Insert(int index, object item): вставка элемента по определенному индексу в коллекции

• Remove(object item): удаление элемента

• RemoveAt(int index): удаление элемента по индексу

А свойство Count позволяет узнать, сколько элементов в коллекции.

Например, применительно к выше определенному списку мы бы могли написать в коде C#:

phonesList.Items.Add("HTC U Ultra");
phonesList.Items.RemoveAt(1); // удаляем второй элемент

ItemsSource

Для списочных элементов необязательно их вручную заполнять объектами. Вместо этого можно воспользоваться свойством ItemsSource, задав в его значения коллекцию, из которой будет формироваться список. Например:

<ListBox Name="phonesList" />

На данный момент это пока пустой список. А в файле отделенного кода выполним наполнение этого списка:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        string[] phones = { "iPhone 7", "Samsung Galaxy S8", "Huawei P10", "LG G6", "Xiaomi MI6", "HTC U Ultra" };
        phonesList.ItemsSource = phones;
    } 
}

Свойство ItemsSource в качестве значения принимает массив, хотя это может быть и список типа List. И каждый элемент этого массива переходит в ListBox.

DisplayMemberPath

Еще одно важное свойство списковых элементов - это свойство DisplayMemberPath. Оно позволяет выбирать для отображения элементов значение одного из свойств объекта. Например, создадим в коде новый класс Phone:

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

Теперь создадим в xaml набор объектов этого класса Phone и выведем в списке значение свойства Title этих объектов:

<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}">
        <ListBox Name="phonesList" DisplayMemberPath="Title">
            <local:Phone Title="iPhone 7" Company="Apple" Price="49000" />
            <local:Phone Title="Samsung Galaxy S8" Company="Samsung" Price="50000" />
            <local:Phone Title="Huawei P10" Company="Huawei" Price="29990" />
        </ListBox>
    </Grid>
</Page>

Так как здесь используется класс из текущего проекта, то соответственно у нас обязательно должно быть подключено пространство имен проекте: xmlns:local="using:DataApp". В принципе по умолчанию UWP уже его подключает. Кроме того, чтобы не возникало проблем с разметкой XAML, желательно сделать перестроение проекта. И в итоге окно нам выведет названия смартфонов:

То же самое мы бы могли сделать программным способом:

phonesList.ItemsSource = new List<Phone>
{
    new Phone { Title="iPhone 7", Company="Apple", Price=49000 },
    new Phone {Title="Samsung Galaxy S8", Company="Samsung", Price=50000 },
    new Phone {Title="Huawei P10", Company="Huawei", Price=29990 }
};
phonesList.DisplayMemberPath = "Title";

Выбор элемента в списке

Все элементы управления списками поддерживают выделение элементов. Выделенный(е) элемент(ы) можно получить с помощью свойств SelectedItem(SelectedItems), а получить индекс выделенного элемента - с помощью свойства SelectedIndex. Свойство SelectedValue позволяет получить значение выделенного элемента.

При выделении элемента в списке генерируется событие SelectionChanged, которое мы можем обработать. Например, возьмем предыдущий список:

<StackPanel>
    <ListBox Name="phonesList" DisplayMemberPath="Title" SelectionChanged="phonesList_SelectionChanged" >
        <local:Phone Title="iPhone 7" Company="Apple" Price="49000" />
        <local:Phone Title="Samsung Galaxy S8" Company="Samsung" Price="50000" />
        <local:Phone Title="Huawei P10" Company="Huawei" Price="29990" />
    </ListBox>
    <TextBlock x:Name="textBlock1" />
</StackPanel>

А в файле кода определим обработчик для этого события:

private void phonesList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Phone p = (Phone)phonesList.SelectedItem;
    textBlock1.Text = p.Title;
}

Необходимо иметь в виду, что так как в списке в xaml определены элементы Phone, то в коде мы можем привести выделенный элемент phonesList.SelectedItem к типу Phone.

Если какая-то обработка выбора элемента не требуется, и нам надо посто вывести данные выбранного элемента, то мы можем просто использовать мехунизм привязки к свойству SelectedItem:

<StackPanel>
	<ListBox Name="phonesList" DisplayMemberPath="Title">
		<local:Phone Title="iPhone 7" Company="Apple" Price="49000" />
		<local:Phone Title="Samsung Galaxy S8" Company="Samsung" Price="50000" />
		<local:Phone Title="Huawei P10" Company="Huawei" Price="29990" />
	</ListBox>
	<StackPanel DataContext="{Binding ElementName=phonesList, Path=SelectedItem}">
		<TextBlock Text="Выбранный элемент" FontWeight="Bold" />
		<TextBlock Text="{Binding Title}"  />
		<TextBlock Text="{Binding Price}"  />
		<TextBlock Text="{Binding Company}"  />
	</StackPanel>
</StackPanel>