Базові елементи управління Metro

Розглянувши елементи компоновки, перейдемо до стандартного набору елементів управління, які є невідємною частиною будь-якого інтерфейсу

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Background  – Тут містяться властивості фону, який, як правило,

є поверхнею елемента управління

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Foreground   – Це властивість задає колір тексту, який може бути присутнім в якості вмісту елементів управління

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Opacity   – Це властивість (успадковується відUIElement) Визначає прозорість елемента керування Прозорість задається у відсотках і варіюється від 0 до 1

ВластивостіBackground  іForeground  можуть брати обєкт типуBrush, Що описує кисть У розділі, присвяченому роботі з графікою, ми розглянемо доступні кисті, а зараз представляємо приклад роботи з найпростішої пензлем – SolidBrush:

&ltStackPanel&gt

&ltButton Background=&quot#FFFF0000&quot Foreground=&quot#FF00FF00&quot Content=&quotHello&quot&gt&lt/Button&gt

&ltButton Background=&quotRed&quot Foreground=&quotLightGreen&quot Content=&quotHello&quot&gt&lt/Button&gt

&ltButton Content=&quotHello&quot&gt

&ltButtonBackground&gt

&ltSolidColorBrush Color=&quotRed&quot&gt&lt/SolidColorBrush&gt

&lt/ButtonBackground&gt

&ltButtonForeground&gt

&ltSolidColorBrush Color=&quotLightGreen&quot&gt&lt/SolidColorBrush&gt

&lt/ButtonForeground&gt

&lt/Button&gt

&lt/StackPanel&gt

У цьому прикладі колір задається відразу трьома способами: у шістнадцятковому представленні, з використанням можливості конвертера значень властивостей в XAML, явним створенням обєктаSolidColorBrush Аналогічно властивості можна встановлювати і з C # коду:

btnBackground = new SolidColorBrush(ColorsRed)

Тут Colors являє собою спеціальний клас, який визначає кілька популярних кольорів

Якщо використовуваний елемент працює з текстом, то для установки шрифту тексту можуть стати в нагоді такі властивості:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FontFamily – Задає імя шрифту, який Ви хочете використовувати

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FontSize – Розмір шрифту в одиницях Silverlight

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FontStyle – Дозволяє задати стиль шрифту, такий як Normal або Italic

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FontWeight – Задає вагу тексту, наприклад Bold

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp FontStretch   – Використовується для підтримки шрифтів OpenType,

зокрема дозволяє стискати або розтягувати текст

Нижче наведено приклад використання перерахованих властивостей, застосовуваних для установки написи кнопки в полужірномй шрифтом Arial, відображеному курсивом:

&ltButton Background=&quotRed&quot Foreground=&quotLightGreen&quot Content=&quotHello&quot

FontFamily=&quotArial&quot FontSize=&quot16&quot FontStyle=&quotItalic&quot FontWeight=&quotBold&quot&gt

&lt/Button&gt

Наступні кілька властивостей дозволяють задати розміри елемента, а також відступи від сусідніх елементів і від вмісту:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Width – Довжина елемента управління

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Height – Ширина елемента управління

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Padding – Відстань від вмісту до кордонів елемента

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Margin – Відстань від кожної з кордонів до кордонів сусідніх елементів

У WinRT представлена ​​велика кількість кнопок Серед них і нові типи,

такі як ToggleSwitch Ось короткий опис існуючих кнопок:

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Button – Класична кнопка, що містить в якості контенту будь-який обєкт типу UIElement і ініціює подія Click

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ToggleButton  – Тип кнопки, використовуваний для імітації ефекту залипання Кнопка може бути в двох станах: натиснутою і відпущеної Щоб обробляти зміна стану кнопки, використовується подія Checked

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp RepeatButton – На відміну від класичної кнопки, цей вид кнопки дозволяє безперервно генерувати подію Click, Якщо кнопка залишається натиснутою, тобто утримується користувачем в цьому стані

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp CheckBox – Ця кнопка є прямим спадкоємцемToggleButton і реалізує найпростіший прапорець На відміну відToggleButton, прапорець можна встановлювати в проміжний стан, але тільки з коду і тільки якщо властивість IsThreeState встановлено як true

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

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

·&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp ToggleSwitch – Цей тип кнопки вкрай цікавий в умовах появи Touch-інтерфейсів, так як з його допомогою можна легко виконувати перемикання стану Елемент дуже нагадує CheckBox, Але має зовсім унікальну виставу

ОскількиToggleSwitch  є новим елементом управління, хотілося б продемонструвати приклад його роботи Код нижче задає такий елемент і дозволяє виконувати перемикання між двома станами «Так» і «Ні»:

Ось що ми побачимо на екрані:

Рис 27

Цей елемент прийшов з платформи Windows Phone і повністю оптимізований для роботи з допомогою пальців

Наступний приклад, що демонструє створення групи елементів

RadioButton:

&ltStackPanel&gt

&ltRadioButton Content=&quotChoice 1&quot IsChecked=&quotTrue&quot GroupName=&quotGroup 1&quot Margin=&quot5&quot&gt

&lt/RadioButton&gt

&ltRadioButton Content=&quotChoice 1&quot IsChecked=&quotFalse&quot GroupName=&quotGroup 1&quot Margin=&quot5&quot&gt

&lt/RadioButton&gt

&ltRadioButton Content=&quotChoice 1&quot IsChecked=&quotFalse&quot GroupName=&quotGroup 1&quot Margin=&quot5&quot&gt

&lt/RadioButton&gt

&ltRadioButton Content=&quotChoice 1&quot IsChecked=&quotFalse&quot GroupName=&quotGroup 1&quot Margin=&quot5&quot&gt

&lt/RadioButton&gt

&lt/StackPanel&gt

В результаті роботи коду ми побачимо наступну картину:

Рис 28

Як сказано вище, особливість елементів управління в XAML полягає в тому, що в якості вмісту у будь-якого з елементів (за рідкісним винятком) може виступати контейнер або інший елемент Нижче приклад кнопки, що відображає відео:

&ltButton MaxHeight=&quot150&quot MaxWidth=&quot200&quot&gt

&ltButtonContent&gt

&ltMediaElement Source=&quotWildlifewmv&quot&gt&lt/MediaElement&gt

&lt/ButtonContent&gt

&lt/Button&gt

Рис 29

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

*

*