Отображение списков данных

Основные теоретические сведения

Часто в приложениях необходимо выводить списки каких-либо объектов. Для этого необходимы специальные средства, предусматривающие отображение списочных данных.

В качестве примера рассмотрим создание списка клиентов компании. Информация о клиентах включает: имя клиента, адрес и идентификатор. Класс Customer может выглядеть так:

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
    public int ID { get; set; }

    public Customer(string inName, string inAddress, int inID)
    {
        Name = inName;
        Address = inAddress;
        ID = inID;
    }
}

Этот класс имеет единственный метод, который является конструктором, принимающим три параметра.

Теперь нужно сохранить список клиентов. Лучший способ для хранения списков объектов — использование класса List, который входит в состав языка C#. Можно создать класс Customers, содержащий имя списка клиентов и сам список:

public class Customers
{
    public string Name { get; set; }

    public List<Customer> CustomerList;

    public Customers(string inName)
    {
        Name = inName;
        CustomerList = new List<Customer>();
    }
}

Класс Customers содержит единственный метод, который является конструктором класса. Он определяет имя списка и создаёт пустой список. Используя этот класс, можно создать новый список таким образом:

Customers mailCustomers = new Customers("Список клиентов");

Далее список необходимо заполнить данными и вывести на экран.

Использование элемента ListBox для отображения списка элементов

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

<DataTemplate>
  <StackPanel>
    <TextBlock Text="{Binding Name}" />
    <TextBlock Text="{Binding Address}" />
  </StackPanel>
</DataTemplate>

Этот шаблон данных определяет, что информация должна выводиться в элемент StackPanel, который содержит два элемента TextBlock с именами Name и Address. В соответствии с этим шаблоном будут выводиться две строки: в первой строке указывается имя клиента, во второй — его адрес. При этом, в шаблоне не указано значение идентификатора, поскольку нам не нужно выводить это значение на экран.

Шаблон данных указывает Silverlight как нужно выводить на экран свойства объекта. Его можно использовать для вывода списка клиентов на экран. Для этого нужно поместить шаблон DataTemplate в секции ItemTemplate элемента ListBox, который выведет на экран информацию о клиентах:

<ListBox Name="customerList">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Address}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Этот код настраивает внешний вид списка данных, вывод которого на экран осуществляет элемент customerList. Теперь нужно указать список данных, которые должны выводиться на экран:

customers = Customers.MakeTestCustomers();
customerList.ItemsSource = customers.CustomerList;

Этот код получает тестовый список клиентов, который присваивается свойству ItemSource элемента customerList. Элемент ListBox выведет на экран каждый объект в наборе как элемент списка.

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

Добавление стиля отображения

В нашем примере в выводимом списке информация выводится не очень наглядно, так как трудно визуально отличить имя клиента от его адреса. Для повышения удобочитаемости списка можно задать разные размеры и стили шрифта для имён и адресов, но может быть удобнее использовать встроенные стили, которые предоставляются в виде ресурсов для приложений Windows Phone.

Преимущество использования встроенных стилей заключается в том, что они используют различные цветовые схемы Windows Phone. К элементам TextBlock в шаблоне DataTemplate можно добавить названия используемых стилей:

<DataTemplate>
  <StackPanel>
    <TextBlock Text="{Binding Name}"
        Style="{StaticResource PhoneTextExtraLargeStyle}" />
    <TextBlock Text="{Binding Address}" 
        Style="{StaticResource PhoneTextSubtleStyle}" />
  </StackPanel>
</DataTemplate>

В этом коде используются разные встроенные стили для имени клиента и для адреса:

Дополнительные материалы

Windows Phone 7.5 Training Kit: Labs/WindowsPhoneNavigationAndControls/WindowsPhoneNavigationAndControls.html/html/DocSet_60a8bcd9-8076-4860-ac98-81dfcf3eb9ca.html.

Сайт MSDN: http://msdn.microsoft.com/ru-ru/library/system.windows.controls.listbox.aspx.

Задание к работе