Создание приложения для Windows Phone 7 от начала до конца. Часть 9. Отображение данных

Предыдущая часть

Вот вы и создали полноценные страницы для вашего приложения. Теперь вы, наверно, захотите заполнить их различными данными.

В этой части вы узнаете:

• Как привязать данные к пользовательскому интерфейсу.
• Как Visual Studio может помочь вам создать привязки к данным.
• Как отображать данные в списке.
• Как работать с более сложными сценариями привязки.

Привязка данных к к пользовательскому интерфейсу

Приложение Fuel Tracker имеет три страницы с данными. Данные хранятся в основном в трёх классах. На следующем изображении показаны страницы и связанные с ними классы.



Для отображения данных обычно используется привязка данных (data binding). Привязка данных предоставляет возможность подключения пользовательского интерфейса к источнику данных. Когда привязки созданы и источник данных изменяется, элементы пользовательского интерфейса, которые связаны с источником данных отображают изменения автоматически. Аналогично, изменения, внесённые пользователем в элемент пользовательского интерфейса отражаются в источнике данных. Например, если пользователь изменит значение в TextBox, соответствующий источник данных автоматически обновится, чтобы отразить эти изменения.

Следующий фрагмент XAML-кода иллюстрирует синтаксис, который используется для привязки свойства Text элемента управления TextBox к свойству Name объекта-источника.

1. <TextBox x:Name="NameTextBox" Text="{Binding Name, Mode=TwoWay}" />

* This source code was highlighted with Source Code Highlighter.

На следующем изображении показан пример такой привязки.



Каждая привязка имеет свойство Mode (режим), которое определяет, как и когда обновляются данные. OneWay (односторонняя) привязка означает, что целевой (target) элемент пользовательского интерфейса обновляется, если источник изменяется. TwoWay (двухсторонняя) привязка означает, что как цель, так и источник обновляются, если кто-либо из них изменяется. Если вы используете OneWay или TwoWay привязки, то для того, чтобы привязка была уведомлена об изменениях объекта-источника, необходимо реализовать интерфейс INotifyPropertyChanged. Этот интерфейс будет более подробно обсуждаться в следующей части «Создание классов данных».

Вы указываете объект-источник, устанавливая свойство DataContext (контекст данных). Если вы используете элемент управления ListBox, необходимо указать объект-источник, установив свойство ItemsSource. В следующем примере показано, как задать свойству DataContext панели CarHeader объект-источник, извлекаемый из статического свойства.

1. CarHeader.DataContext = CarDataStore.Car;

* This source code was highlighted with Source Code Highlighter.

Свойство DataContext позволяет установить стандартную привязку для всего элемента пользовательского интерфейса, включая все его дочерние элементы. В некоторых случаях вам будет удобней установить свойство DataContext для всей страницы, а в некоторых будет удобней установить его отдельно для каждого элемента на странице. Установка DataContext на каждом уровне XAML перекрывает любые установки на более высоком уровне. Кроме того, вы можете фактически переопределить любую установку DataContext для отдельных привязок, установив для них свойство Source (источник).

Например, в приложение Fuel Tracker каждая страница устанавливает DataContext в различное значение. Однако, на странице FillupPage DataContext уровня страницы переопределяется для панели, которая отображает название автомобиля и его фотографию. На следующем изображении показаны настройки контекста данных для приложения Fuel Tracker.

Использование data binding builder

Visual Studio включает в себя data binding builder (создатель привязок данных), чтобы помочь вам создать привязки данных в XAML. Хотя data binding builder может обеспечить повышение производительности, он не поддерживает все возможные сценарии. Например, он не поддерживает привязку к индексированным элементам и он не распознаёт привязки, созданные в коде. Таким образом, в некоторых случаях вам потребуется указать привязки данных вручную.

Для того, чтобы использовать data binding builder:

1. Выберите элемент управления, для которого вы хотите создать привязку.
2. В окне Properties найдите свойство, к которому вы хотите привязаться.
3. На краю левой колонки щелкните значок маркера свойства, а затем нажмите кнопку Apply Data Binding.
   Откроется data binding builder.
4. Кликните по различным панелям в data binding builder для того, чтобы раскрыть различные опции.
   На следующем изображении показан data binding builder со следующими параметрами:
   • Data context: объект Fillup
   • Binding path: свойство OdometerReading
   • Converter: ZeroFormatter
   • Mode: TwoWay
   
   

Следующий фрагмент XAML показывает код, сгенерированный data binding builder.

1. <TextBox
2.     Grid.Row="0" Grid.Column="1"
3.     x:Name="OdometerTextBox"
4.     Text="{Binding OdometerReading,            Mode=TwoWay,             Converter={StaticResource ZeroFormatter}         }"
5.     InputScope="TelephoneNumber"
6.     MaxLength="8" />

* This source code was highlighted with Source Code Highlighter.

Примечание:
Когда вы устанавливаете свойство DataContext в коде, data binding builder не имеет никакого представления о свойствах, доступных в источнике данных и не может помочь вам выбрать binding path (путь). Однако, вы можете решить эту проблему, установив data context во время разработки (design-time). Дополнительные сведения по установке data context во время разработки вы можете найти здесь: Walkthrough: Using a DesignInstance to Bind to Data in the Silverlight Designer.

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

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

1. Добавить ListBox в ваше приложение.
2. Указать источник данных для ListBox путем привязки коллекции к свойству ItemsSource.
3. Чтобы настроить внешний вид каждого элемента в ListBox, добавьте шаблон данных для ListBox.
4. В шаблоне данных привяжите элементы ListBox к свойствам коллекции элементов.

На следующем изображении показаны привязки для ListBox на странице сводной информации приложения Fuel Tracker.



Следующий XAML-код показывает, как были указаны привязки для ListBox.

1. <ListBox ItemContainerStyle="{StaticResource ListBoxStyle}"
2.     ItemsSource="{Binding FillupHistory}"
3.     Height="380" HorizontalAlignment="Left" Margin="5,25,0,0"
4.     VerticalAlignment="Top" Width="444" >
5.     <ListBox.ItemTemplate>
6.     <DataTemplate>
7.         <StackPanel Orientation="Horizontal">
8.         <TextBlock Style="{StaticResource SummaryStyle}"
9.             Text="{Binding Date, Converter={StaticResource             StringFormatter}, ConverterParameter=\{0:d\} }"
10.             Width="105" TextWrapping="Wrap"/>
11.         <TextBlock Style="{StaticResource SummaryStyle}"
12.             Text="{Binding FuelQuantity}" TextWrapping="Wrap" />
13.         <TextBlock Style="{StaticResource SummaryStyle}"
14.             Text="{Binding DistanceDriven}" TextWrapping="Wrap" />
15.         <TextBlock Style="{StaticResource SummaryStyle}" 
16.             Text="{Binding PricePerFuelUnit,             Converter={StaticResource StringFormatter},             ConverterParameter=\{0:c\}, ConverterCulture=en-US}" />
17.         <TextBlock Style="{StaticResource SummaryStyle}"
18.             Text="{Binding FuelEfficiency,             Converter={StaticResource StringFormatter},             ConverterParameter=\{0:F\}}" TextWrapping="Wrap" />
19.         </StackPanel>
20.     </DataTemplate>
21.     </ListBox.ItemTemplate>
22. </ListBox>

* This source code was highlighted with Source Code Highlighter.

В предыдущем XAML-коде, свойство ListBox.ItemsSource привязано к свойству Car.FillupHistory так, что каждый объект Fillup в коллекции истории появится в качестве отдельного пункта в ListBox. Элемент DataTemplate определяет внешний вид каждого пункта и содержит несколько элементов TextBlock, каждый из которых привязан к свойству класса Fillup.

Этот XAML будет работать только тогда, когда объект Car впервые ассоциирован со страницей, как показано в следующем коде из SummaryPage.xaml.cs.

1. this.DataContext = CarDataStore.Car;

* This source code was highlighted with Source Code Highlighter.

Совет по улучшению производительности:
Если прокрутка в вашем ListBox не кажется плавной и отзывчивый, воспользуйтесь следующими советами:

• Упростите элементы в ListBox .
• Загружайте изображения в фоновом режиме.
• Используйте виртуализацию данных.
• Обратите внимание на использование DeferredLoadListBox или LazyListBox .
• Не используйте вложенные списки.

Сложные пути привязки

В дополнение к гибкости настройки свойства DataContext на любом уровне (что позволяет переопределить настройки на более высоком уровне), можно также указать сложные пути привязки для того, чтобы «пробуриться» в свойства ссылки, такой как Car.FillupHistory. Например, следующий XAML-код из SummaryPage.xaml демонстрирует привязку к свойству Fillup.FuelEfficiency первого пункта в коллекции истории заправок.

1. <TextBlock Text="{Binding FillupHistory[0].FuelEfficiency,     Converter={StaticResource StringFormatter},     ConverterParameter=\{0:F\}}" />

* This source code was highlighted with Source Code Highlighter.

На следующем изображении показаны привязки в SummaryPage.xaml и показывается, как сложные привязки и шаблоны данных позволяют вам привязывать элементы управления к различным свойствам различных объектов, даже если они все относятся к тому же DataContext.



Зеленые прямоугольники на левом экране Pivot показывают элементы управления, которые привязаны с использованием сложных путей. Эти пути начинаются с первого элемента (индекс 0) в коллекции Car.FillupHistory и заканчиваются различными свойствами класса Fillup. Например, поле Current MPG использует путь привязки FillupHistory[0].FuelEfficiency. Если вы включите в этот путь настройку DataContext страницы, весь путь привязки будет выглядеть следующим образом: CarDataStore.Car.FillupHistory[0].FuelEfficiency.

Следующая часть