Елементи компонування Metro

Почнемо огляд елементів управління зі спеціального набору елементів, що дозволяють компонувати інтерфейс сторінки, яка складається з безлічі елементів Можливо, Ви звернули увагу на те, що батьківським елементів в будь-якій сторінці є елементPage Клас Page, На основі якого в XAML формується відповідний елемент, є спадкоємцем класу UserControl, Який має чудову властивість Content Ця властивість може приймати будьUIElement, Що має графічне представлення, і наповнює цим елементом обєкт типуUserControl Проблема полягає в тому, що властивість Content представлено в єдиному екземплярі і може містити посилання тільки на один елемент Ось чому перше, що необхідно створити всередині будь-якого з елементів Page, – Це контейнер, який здатний утримувати будь-яку кількість візуальних елементів і відображати їх за певним правилом (компонувати елементи)

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

Перед описом першого елемента компонування (контейнера) відзначимо, що всі ці елементи знаходяться в просторі іменWindowsUIXamlControls і успадковуються від класуPanel Саме цей клас визначає колекцію Children, Яка може містити будь-яку кількість обєктів типу UIElement

Самий «поганий» елемент компонування – це Canvas Він дозволяє розміщувати елементи управління з привязкою до абсолютних, явно заданих позиціях щодо контейнера І саме в абсолютних позиціях полягає його недолік Безсумнівно, розробляючи додатки Windows Forms, розробники звикли саме до абсолютних позиціях елементів управління, але в стилі Metro подібне розміщення елементів управління вважається неприпустимим, так як однією з вимог стилю Metro є можливість роботи програми на будь-яких пристроях з будь-яким дозволом і орієнтацією екрана

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

Розглянемо приклад використання елемента Canvas:

&ltCanvas Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltButton Content=&quotHello&quot CanvasTop=&quot100&quot CanvasLeft=&quot100&quot&gt&lt/Button&gt

&lt/Canvas&gt

У цьому прикладі ми створюємо кнопку, яка привязана до координат екрана (100,100) Зверніть увагу, що позиція елемента щодо канви була задана за допомогою залежних властивостей Top і Left

Зазвичай, якщо використовується елемент управління Canvas, Елементами управління встановлюються ще два «поганих» властивості –Width  іHeight, Які дозволяють задати довжину і ширину елемента керування

Один з найпростіших елементів компоновки –StackPanel Цей елемент має в своєму розпорядженні всі дочірні елементи в один рядок або колонку

Розглянемо приклад, що відображає кілька кнопок всередині StackPanel:

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

&ltButton Content=&quotButton 1&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 4&quot&gt&lt/Button&gt

&lt/StackPanel&gt

Як видно, за замовчуванням StackPanel розпорядженні елементи по вертикалі При цьому в Silverlight кнопках встановлювалася довжина таким чином, щоб вони могли заповнити весь простірStackPanel У Windows Runtime це не так Кнопки займають лише стільки місця, скільки необхідно Але якщо потрібно розтягнути кнопку на всю довжинуStackPanel, То їй встановлюється властивість HorizontalAligment в Stretch:

&ltStackPanel x:Name=&quotLayoutRoot&quot

Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltButton Content=&quotButton 1&quot HorizontalAlignment=&quotStretch&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot HorizontalAlignment=&quotStretch&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot HorizontalAlignment=&quotStretch&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 4&quot HorizontalAlignment=&quotStretch&quot&gt&lt/Button&gt

&lt/StackPanel&gt

Щоб змінити розташування елементів з вертикального на горизонтальне,

елемент StackPanel має властивість Orientation:

&ltStackPanel x:Name=&quotLayoutRoot&quot Background=&quotWhite&quot

Orientation=&quotHorizontal&quot&gt

&ltButton Content=&quotButton 1&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 4&quot&gt&lt/Button&gt

&lt/StackPanel&gt

Природно, описане вище поведінка елемента компонування StackPanel може здатися не дуже зручним Тому щоб отримати всі його переваги, необхідно комбінувати його базові можливості з установкою набору властивостей StackPanel і внутрішніх елементів

Ось деякі з корисних властивостей:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp HorizontalAlignment    – Визначає позиціонування дочірніх елементів контейнера, коли доступно додатковий простір по горизонталі Може приймати одне з наступних значень: Left, Right, Center або Stretch (За замовчуванням)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp VerticalAlignment – Визначає позиціонування дочірніх елементів контейнера, коли доступно додатковий простір по вертикалі Може приймати одне з чотирьох значень: Top, Bottom, Center або Stretch (За замовчуванням)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Margin  – Дозволяє задати додаткове місце навколо елемента керування Цей параметр здатний приймати значення, що задають відстань від кожної з кордонів елемента

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MinWidth – Встановлює мінімальні розміри елемента (довжину)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MinHeight – Встановлює мінімальні розміри елемента (ширину)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MaxWidth – Встановлює максимальні розміри елемента (довжину)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MaxHeight – Встановлює максимальні розміри елемента (ширину)

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Padding  —  задає відступи всередині елемента керування, відокремлюючи його вміст від кордонів Це властивість можна використовувати для внутрішніх елементів StackPanel

Елемент управлінняGrid  є одним з найбільш потужних елементів компонування Фактично він дозволяє розбити все доступне простір на набір осередків, задаючи певну кількість стовпців і рядків При цьому для відображення елемента в тій чи іншій клітинці розробник повинен явно вказати її номер Нижче показано невеликий приклад використання елемента компонування Grid Тут ми спеціально задали властивістьShowGridLines, Щоб бачити розмір осередків:

&ltGrid Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltGridRowDefinitions&gt

&ltRowDefinition&gt&lt/RowDefinition&gt

&ltRowDefinition&gt&lt/RowDefinition&gt

&lt/GridRowDefinitions&gt

&ltGridColumnDefinitions&gt

&ltColumnDefinition&gt&lt/ColumnDefinition&gt

&ltColumnDefinition&gt&lt/ColumnDefinition&gt

&ltColumnDefinition&gt&lt/ColumnDefinition&gt

&lt/GridColumnDefinitions&gt

&ltButton Content=&quotButton 1&quot GridRow=&quot0&quot GridColumn=&quot0&quot HorizontalAlignment=&quotStretch&quot VerticalAlignment=&quotStretch&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot GridRow=&quot0&quot GridColumn=&quot1&quot HorizontalAlignment=&quotStretch&quot VerticalAlignment=&quotStretch&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot GridRow=&quot1&quot GridColumn=&quot2&quot

HorizontalAlignment=&quotStretch&quot VerticalAlignment=&quotStretch&quot&gt&lt/Button&gt

&lt/Grid&gt

Нижче показаний результат використання елемента компонування Grid:

Рис 26

Природно, використання елемента Grid так, Як показано вище, не дуже ефективно Тому для приведення інтерфейсу до більш звичного вигляду розробник може скористатися властивостями, описаними в розділі, присвяченому StackPanel Крім цього, розробник може задати розміри колонок і рядків одним з трьох способів:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Абсолютні розміри– Цей спосіб найменш цікавий, оскільки дозволяє задавати довжину і ширину колонок явно, що не підходить для Silverlight

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Автоматичні розміри – Для встановлення автоматичних розмірів використовується спеціальне значення Auto, яке виділяє стільки місця, скільки необхідно для відображення вмісту Нижче показаний приклад з використанням даного способу:

&ltGrid Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltGridRowDefinitions&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&lt/GridRowDefinitions&gt

&ltGridColumnDefinitions&gt

&ltColumnDefinition Width=&quotAuto&quot&gt&lt/ColumnDefinition&gt

&ltColumnDefinition Width=&quotAuto&quot&gt&lt/ColumnDefinition&gt

&ltColumnDefinition Width=&quotAuto&quot&gt&lt/ColumnDefinition&gt

&lt/GridColumnDefinitions&gt

&ltButton Content=&quotButton 1&quot GridRow=&quot0&quot GridColumn=&quot0&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot GridRow=&quot0&quot GridColumn=&quot1&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot GridRow=&quot1&quot GridColumn=&quot2&quot&gt&lt/Button&gt

&lt/Grid&gt

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Пропорційні розміри– Цей спосіб установки розмірів дозволяє встановити пропорції, відповідно до яких будуть визначатися розміри Так, приклад нижче демонструє розбиття місця для рядків у співвідношенні 1 до 2, а місце для стовпців – в співвідношенні 1 до 2 для другого і третього стовпців по відношенню до першого:

&ltGrid Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltGridRowDefinitions&gt

&ltRowDefinition Height=&quot*&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quot2*&quot&gt&lt/RowDefinition&gt

&lt/GridRowDefinitions&gt

&ltGridColumnDefinitions&gt

&ltColumnDefinition Width=&quot*&quot&gt&lt/ColumnDefinition&gt

&ltColumnDefinition Width=&quot2*&quot&gt&lt/ColumnDefinition&gt

&ltColumnDefinition Width=&quot2*&quot&gt&lt/ColumnDefinition&gt

&lt/GridColumnDefinitions&gt

&ltButton Content=&quotButton 1&quot GridRow=&quot0&quot GridColumn=&quot0&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 2&quot GridRow=&quot0&quot GridColumn=&quot1&quot&gt&lt/Button&gt

&ltButton Content=&quotButton 3&quot GridRow=&quot1&quot GridColumn=&quot2&quot&gt&lt/Button&gt

&lt/Grid&gt

Наступна цікава функціяGrid  – Можливість злиття колонок або рядків Розглянемо наступний приклад:

&ltGrid Background=&quot{StaticResource ApplicationPageBackgroundBrush}&quot&gt

&ltGridRowDefinitions&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&ltRowDefinition Height=&quotAuto&quot&gt&lt/RowDefinition&gt

&lt/GridRowDefinitions&gt

&ltGridColumnDefinitions&gt

&ltColumnDefinition Width=&quotAuto&quot&gt&lt/ColumnDefinition&gt

&ltColumnDefinition Width=&quotAuto&quot&gt&lt/ColumnDefinition&gt

&lt/GridColumnDefinitions&gt

&ltTextBlock Text=&quotEmployee&quot GridRow=&quot0&quot GridColumn=&quot0&quot GridColumnSpan=&quot2&quot HorizontalAlignment=&quotCenter&quot FontSize=&quot16&quot FontWeight=&quotBold&quot Margin=&quot5&quot&gt

&lt/TextBlock&gt

&ltTextBlock Text=&quotFirst Name:&quot GridRow=&quot1&quot GridColumn=&quot0&quot Margin=&quot5&quot&gt&lt/TextBlock&gt

&ltTextBox GridColumn=&quot1&quot GridRow=&quot1&quot MinWidth=&quot100&quot Margin=&quot5&quot&gt&lt/TextBox&gt

&ltTextBlock Text=&quotLast Name:&quot GridRow=&quot2&quot GridColumn=&quot0&quot Margin=&quot5&quot&gt&lt/TextBlock&gt

&ltTextBox GridColumn=&quot1&quot GridRow=&quot2&quot MinWidth=&quot100&quot Margin=&quot5&quot&gt&lt/TextBox&gt

&ltTextBlock Text=&quotEMail:&quot GridRow=&quot3&quot GridColumn=&quot0&quot Margin=&quot5&quot&gt&lt/TextBlock&gt

&ltTextBox GridColumn=&quot1&quot GridRow=&quot3&quot MinWidth=&quot100&quot Margin=&quot5&quot&gt&lt/TextBox&gt

&ltButton GridColumn=&quot0&quot GridRow=&quot4&quot GridColumnSpan=&quot2&quot Content=&quotSend&quot Margin=&quot5&quot HorizontalAlignment=&quotCenter&quot Padding=&quot5&quot&gt

&lt/Button&gt

&lt/Grid&gt

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

На відміну від Silverlight, в WindowsRuntime елемент WrapGrid розроблений таким чином, щоб використовуватися в елементах типуItemsControl  (ListView, GridView і тд) Використання цього елемента ми розглянемо далі

Сергій Лутай, Сергій Байдачний, 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>

*

*