Елементи, засновані на колекціях елементів Metro

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ListBox  – Дозволяє відобразити список елементів з можливістю вибору одного або декількох елементів колекції

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ComboBox – Дозволяє відобразити список, що випадає з можливістю зробити єдиний вибір

Тут можна виділити наступні:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Items  – Дозволяє задати колекцію елементів типуListBoxItem,

який буде використовуватися для відображення інформації в ListBox

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ItemsSource – Використовується для привязки ListBox до колекції елементів,

реалізують інтерфейс IEnumerable

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp DisplayMemberPath     – Задає властивість елемента колекції, визначеної черезItemsSource, Яке буде використовуватися для відображення вListBox Якщо властивість не задано, то у обєкту буде викликаний метод ToString

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ItemTempate —дозволяє задати шаблон елемента всередині списку Іншими словами, дозволяє визначити формат видачі

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SelectedItem(S) – повертає обраний елемент (и) вListBox Дуже важливе властивість, що дозволяє перетворити отриманий обєкт до типу, що зберігається в ListBox Це дозволяє не зберігати посилання на вихідну колекцію елементів

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SelectedValue – Повертає вибране значення (мається на увазі текст)

Розглянемо невеликий приклад опису ListBox і привязки до нього колекції елементів:

&ltListBox Name=&quotmyList&quot Width=&quot200&quot Height=&quot100&quot Background=&quotWhite&quot&gt

&ltListBoxItemTemplate&gt

&ltDataTemplate&gt

&ltCheckBox IsChecked=&quot{Binding IsActive}&quot Content=&quot{Binding Name}&quot Foreground=&quotBlack&quot&gt&gt

&lt/CheckBox&gt

&lt/DataTemplate&gt

&lt/ListBoxItemTemplate&gt

&lt/ListBox&gt

Тут ми визначили шаблон елемента керування Тепер опишемо вміст класів, що створює набір тестових даних і реалізує привязку колекції з даними до списку:

public sealed partial class BlankPage : Page

{

public BlankPage()

{

thisInitializeComponent()

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void Page_Loaded_1(object sender, RoutedEventArgs e)

{

List&ltEmployee&gt l = new List&ltEmployee&gt()

Employee emp = new Employee() empName = &quotSergiy Baydachnyy" empIsActive = true

lAdd(emp)

emp = new Employee()

empName = &quotViktor Baydachnyy" empIsActive = false lAdd(emp)

myListItemsSource = l

}

public class Employee

{

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

}

}

Аналогічно можна реалізувати код і за допомогою елемента ComboBox:

&ltComboBox Name=&quotmyList&quot Background=&quotWhite&quot Height=&quot100&quot&gt

&ltComboBoxItemTemplate&gt

&ltDataTemplate&gt

&ltCheckBox IsChecked=&quot{Binding IsActive}&quot Content=&quot{Binding Name}&quot Foreground=&quotBlack&quot&gt

&lt/CheckBox&gt

&lt/DataTemplate&gt

&lt/ComboBoxItemTemplate&gt

&lt/ComboBox&gt

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

Поряд зі старими елементами в Windows Runtime присутні кілька нових і більш функціональних елементів, які стануть основою всіх Ваших інтерфейсів по роботі з колекціями Особливість цих елементів полягає в тому, що вони вже включають в себе реалізацію багатьох принципів інтерфейсів в стилі Metro, наприклад вбудовану анімацію У більшості випадків необхідно помістити елемент на форму і повязати його з колекцією даних Ось ці елементи:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FlipView – Дозволяє відображати колекції елементів по одному за один раз При цьому забезпечує користувача простими та зручними механізмами переходу від одного елемента до наступного Хороший елемент для посторінкового подання контенту

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ListView – Відображає колекцію даних з можливістю виконання вертикального скролінгу Включає ефекти, звичні для інтерфейсів в стилі Metro (вибір елемента, анімацію та ін)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp GridView – Ще один елемент для відображення колекцій Дозволяє виконувати горизонтальну прокрутку і підтримує розбиття елементів на групи

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp SemanticZoom  – Дозволяє представити контент в двох режимах з можливістю переходу між ними Даний механізм використовується для семантичного масштабування

Розглянемо ці елементи більш докладно і почнемо з найбільш простого –

FlipView Ось невеликий код, який демонструє роботу цього елемента:

&ltStackPanel x:Name=&quotLayoutRoot&quot&gt

&ltFlipView&gt

&ltFlipViewItems&gt

&ltImage Source=&quotdsc01707jpg&quot&gt&lt/Image&gt

&ltImage Source=&quotdsc01707jpg&quot&gt&lt/Image&gt

&lt/FlipViewItems&gt

&lt/FlipView&gt

&lt/StackPanel&gt

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

Для демонстрації елементаListView   можна взяти за основу приклад, що демонструє роботу ListBox, і замінити елемент управління ListBox на ListView, Залишивши весь вміст без змін:

&ltListView Name=&quotmyList&quot Width=&quot200&quot Height=&quot300&quot Background=&quotWhite&quot&gt

&ltListViewItemTemplate&gt

&ltDataTemplate&gt

&ltCheckBox IsChecked=&quot{Binding IsActive}&quot Content=&quot{Binding Name}&quot Foreground=&quotBlack&quot&gt

&lt/CheckBox&gt

&lt/DataTemplate&gt

&lt/ListViewItemTemplate&gt

&lt/ListView&gt

У результаті на екрані відобразиться елемент, який включає і анімацію,

і можливість вибору елемента в стилі Metro:

Рис 211

Якщо Вам потрібна можливість здійснення додаткових дій при натисканні на один з елементів ListView (Наприклад, перехід на іншу сторінку), то цей елемент надає властивість IsItemClickEnabled, Яке дозволяє активувати спеціальна подія ItemClick, В якому можна реалізувати свій код За замовчуванням властивість встановлено в false

Щоб розібратися з елементом управління GridView, Досить створити проект на основі шаблону Grid Application і подивитися вміст основної сторінки Тут Ви зможете знайти наступний код:

&ltGridView x:Name=&quotitemGridView&quot AutomationPropertiesAutomationId=&quotItemGridView&quot AutomationPropertiesName=&quotGrouped Items&quot Margin=&quot120,0,40,60&quot

ItemsSource=&quot{Binding Source={StaticResource groupedItemsViewSource}}&quot ItemTemplate=&quot{StaticResource Standard250x250ItemTemplate}&quot SelectionMode=&quotNone&quot

IsItemClickEnabled=&quotTrue&quot ItemClick=&quotItemView_ItemClick&quot&gt

&ltGridViewItemsPanel&gt

&ltItemsPanelTemplate&gt

&ltVirtualizingStackPanel Orientation=&quotHorizontal&quot/&gt

&lt/ItemsPanelTemplate&gt

&lt/GridViewItemsPanel&gt

&ltGridViewGroupStyle&gt

&ltGroupStyle&gt

&ltGroupStyleHeaderTemplate&gt

&ltDataTemplate&gt

&ltGrid Margin=&quot0,0,0,20&quot&gt

&ltButton

AutomationPropertiesName=&quotGroup Title&quot Content=&quot{Binding Title}&quot Click=&quotHeader_Click&quot Style=&quot{StaticResource TextButtonStyle}&quot/&gt

&lt/Grid&gt

&lt/DataTemplate&gt

&lt/GroupStyleHeaderTemplate&gt

&ltGroupStylePanel&gt

&ltItemsPanelTemplate&gt

&ltVariableSizedWrapGrid Orientation=&quotVertical&quot Margin=&quot0,0,80,0&quot/&gt

&lt/ItemsPanelTemplate&gt

&lt/GroupStylePanel&gt

&lt/GroupStyle&gt

&lt/GridViewGroupStyle&gt

&lt/GridView&gt

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp GroupStylePanel – За допомогою цього розділу можна задати контейнер для подання елементів конкретної групи У нашому випадку цеVariableSizedWrapPanel  (РозширенняWrapPanel), Що дозволяє вибудовувати елементи в декілька стовпців або рядків і переходити до наступного стовпцю (рядку) у той момент, коли місце в попередньому закінчується

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp GroupStyleHeaderTemplate  – Дозволяє задати формат заголовка

У нашому випадку це кнопка, за допомогою якої здійснюється перехід на сторінку із списком елементів конкретної групи

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp GridViewItemsPanel – Тут можна задати шаблон подання набору груп У нашому випадку групи розташовуються послідовно всередині StackPanel

Вміст, який генерується в результаті роботи цього елемента,

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

Рис 212

Останній елемент управління – це SemanticZoom Формально він не працює з колекціями, але практично завжди використовується для роботи з контейнерами, що відображають колекції Цей елемент має два чудових властивості – ZoomedInView і ZoomedOutView Кожне з цих властивостей може містити ListView або GridView і дозволяє відображати дані в двох режимах

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

Рис 213

А при спробі зменшити екран відобразиться наступне:

Рис 214

Подібний механізм дуже добре працює при великій кількості елементів

Ще одним корисним елементом, незамінним при роботі з колекціями, є ScrollViewer Цей елемент здатний містити будь-який контейнер і дуже добре адаптується як для роботи з мишею, так і для роботи з пальцем

Але цей елемент вміє не тільки промальовувати смуги прокрутки або реагувати на рух пальцем Він також припускає можливість масштабування контенту Ось кілька властивостей цього елемента:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ZoomMode – Дозволяє активувати режим масштабування

·

MaxZoomFactor     

масштабування

задає

максимально

можливу

глибину

·

MinZoomFactor     

масштабування

задає

мінімально

можливу

глибину

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ZoomSnapPoints    – Дозволяє вказати реперні точки для

масштабування

Іншими словами, якщо Ви вирішили відобразити текст, зображення або колекцію елементів, ScrollView в будь-якому випадку стане в нагоді Якщо навіть Ваше зображення вміщається на екран, дайте користувачеві можливість розглянути деталі

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*