Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Элементы, основанные на коллекциях элементов Metro

0

Если предыдущие элементы управления можно было найти как в Silverlight, так и в Windows Presentation Foundation, то среди элементов, позволяющих работать с коллекциями, много не встречавшихся ранее. Рассмотрим сначала два старых элемента, которые все еще входят в Windows Runtime для реализации простых сценариев:

·                   ListBox  —  позволяет отобразить  список  элементов  с  возможностью выбора одного или нескольких элементов коллекции;

·                   ComboBox — позволяет отобразить выпадающий список с возможностью сделать единственный выбор.

Тут можно выделить следующие:

·                   Items  —  позволяет задать  коллекцию  элементов   типа   ListBoxItem,

который будет использоваться для отображения информации в ListBox;

·                   ItemsSource — используется для привязки ListBox к коллекции элементов,

реализующих интерфейс IEnumerable;

·                   DisplayMemberPath     —     задает     свойство   элемента     коллекции, определенной  через  ItemsSource,  которое  будет  использоваться для отображения в   ListBox.  Если свойство  не  задано, то  у  объекта  будет вызван метод ToString;

·                   ItemTempate —позволяет задать шаблон элемента внутри списка. Иными словами, позволяет определить формат выдачи;

·                   SelectedItem(s) — возвращает выбранный  элемент(ы) в  ListBox.  Очень важное свойство, позволяющее преобразовать   полученный  объект к типу, хранимому в ListBox. Это позволяет не хранить ссылку на исходную коллекцию элементов;

·                   SelectedValue — возвращает выбранное значение (имеется в виду текст).

Рассмотрим небольшой пример описания ListBox и привязки к нему коллекции элементов:

<ListBox Name="myList" Width="200" Height="100" Background="White">

<ListBox.ItemTemplate>

<DataTemplate>

<CheckBox IsChecked="{Binding IsActive}" Content="{Binding Name}" Foreground="Black">>

</CheckBox>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

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

public sealed partial class BlankPage : Page

{

public BlankPage()

{

this.InitializeComponent();

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void Page_Loaded_1(object sender, RoutedEventArgs e)

{

List<Employee> l = new List<Employee>();

Employee emp = new Employee(); emp.Name = "Sergiy Baydachnyy"; emp.IsActive = true;

l.Add(emp);

emp = new Employee();

emp.Name = "Viktor Baydachnyy"; emp.IsActive = false; l.Add(emp);

myList.ItemsSource = l;

}

public class Employee

{

public string Name { get; set; } public bool IsActive { get; set; }

}

}

Аналогично можно реализовать код и с помощью элемента ComboBox:

<ComboBox Name="myList" Background="White" Height="100">

<ComboBox.ItemTemplate>

<DataTemplate>

<CheckBox IsChecked="{Binding IsActive}" Content="{Binding Name}" Foreground="Black">

</CheckBox>

</DataTemplate>

</ComboBox.ItemTemplate>

</ComboBox>

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

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

·                   FlipView — позволяет отображать коллекции элементов  по  одному за один раз. При этом обеспечивает пользователя  простыми и удобными механизмами  перехода  от  одного  элемента  к  следующему.  Хороший элемент для постраничного представления контента;

·                   ListView — отображает коллекцию данных с возможностью выполнения вертикального     скроллинга.    Включает    эффекты,     привычные   для интерфейсов в стиле Metro (выбор элемента, анимацию и др.);

·                   GridView — еще один элемент для отображения коллекций.  Позволяет выполнять  горизонтальную   прокрутку   и    поддерживает  разбиение элементов на группы;

·                   SemanticZoom  —  позволяет представить контент  в    двух   режимах с возможностью перехода между ними. Данный механизм используется для семантического масштабирования.

Рассмотрим эти элементы более подробно и начнем с наиболее  простого —

FlipView. Вот небольшой код, который демонстрирует работу этого элемента:

<StackPanel x:Name="LayoutRoot">

<FlipView>

<FlipView.Items>

<Image Source="dsc01707.jpg"></Image>

<Image Source="dsc01707.jpg"></Image>

</FlipView.Items>

</FlipView>

</StackPanel>

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

Для   демонстрации   элемента   ListView   можно   взять  за   основу   пример, демонстрирующий работу ListBox, и заменить элемент управления ListBox на ListView, оставив все содержимое без изменений:

<ListView Name="myList" Width="200" Height="300" Background="White">

<ListView.ItemTemplate>

<DataTemplate>

<CheckBox IsChecked="{Binding IsActive}" Content="{Binding Name}" Foreground="Black">

</CheckBox>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

В результате на экране отобразится элемент, который включает  и  анимацию,

и возможность выбора элемента в стиле Metro:

Рис. 2.11.

Если  Вам  нужна  возможность совершения дополнительных   действий   при щелчке на один из элементов ListView (например, переход на другую страницу), то этот элемент предоставляет свойство IsItemClickEnabled, которое позволяет активировать специальное  событие ItemClick, в  котором можно реализовать свой код. По умолчанию свойство установлено в false.

Чтобы  разобраться  с  элементом  управления GridView,  достаточно  создать проект на основе шаблона Grid Application и посмотреть содержимое основной страницы. Тут Вы сможете найти следующий код:

<GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Margin="120,0,40,60"

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None"

IsItemClickEnabled="True" ItemClick="ItemView_ItemClick">

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation="Horizontal"/>

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.GroupStyle>

<GroupStyle>

<GroupStyle.HeaderTemplate>

<DataTemplate>

<Grid Margin="0,0,0,20">

<Button

AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource TextButtonStyle}"/>

</Grid>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.Panel>

<ItemsPanelTemplate>

<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>

</ItemsPanelTemplate>

</GroupStyle.Panel>

</GroupStyle>

</GridView.GroupStyle>

</GridView>

Тут Вы можете найти несколько интересных разделов, которые не встречались в других элементах управления:

·                   GroupStyle.Panel — с помощью этого раздела можно задать контейнер для  представление элементов   конкретной  группы.   В   нашем  случае это  VariableSizedWrapPanel  (расширение   WrapPanel),  позволяющая выстраивать элементы в   несколько  столбцов или  строк  и  переходить к следующему столбцу (строке) в тот момент, когда место в предыдущем заканчивается;

·                   GroupStyle.HeaderTemplate  —  позволяет задать  формат   заголовка.

В нашем случае это кнопка, с помощью которой осуществляется переход на страницу со списком элементов конкретной группы;

·                   GridView.ItemsPanel — тут можно задать шаблон представления набора групп. В нашем случае группы располагаются  последовательно  внутри StackPanel.

Содержимое,  которое  генерируется  в    результате  работы  этого   элемента,

представляет коллекцию данных, разбитую на группы:

Рис. 2.12.

Последний элемент управления — это SemanticZoom. Формально он не работает с коллекциями, но практически всегда используется для работы с контейнерами, отображающими коллекции. Этот элемент имеет два замечательных свойства — ZoomedInView и ZoomedOutView. Каждое  из этих свойств может содержать ListView или GridView и позволяет отображать данные в двух  режимах.

Хороший  пример  использования SemanticZoom  можно  увидеть в  главном окне Windows 8, перейдя в раздел All Applications с помощью Application Bar. В стандартном режиме Вы увидите примерно такую картину:

Рис. 2.13.

А при попытке уменьшить экран отобразится следующее:

Рис. 2.14.

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

ScrollViewer

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

Но  этот  элемент  умеет  не  только  прорисовывать  полосы   прокрутки  или реагировать на  движение пальцем.  Он  также   предполагает  возможность масштабирования контента. Вот несколько свойств этого элемента:

·                   ZoomMode — позволяет активировать режим масштабирования;

·

MaxZoomFactor     

масштабирования;

задает

максимально

возможную

глубину

·

MinZoomFactor     

масштабирования;

задает

минимально

возможную

глубину

·                   ZoomSnapPoints    —     позволяет   указать     реперные    точки     для

масштабирования.

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

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

  • Комментарии