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

0

Рассмотрев элементы компоновки, перейдем к стандартному набору элементов управления, которые являются неотъемлемой частью любого интерфейса.

Класс Control

Прежде  чем  переходить к  таким  элементам, как  кнопки  и  текстовые  поля, рассмотрим класс Windows.UI.Xaml.Controls.Control, который является базовым для всех элементов управления, наделяя их базовыми свойствами. Начнем с трех свойств, которые определяют цветовые характеристики элементов управления:

·                   Background  —  тут  содержатся свойства фона, который,  как  правило,

является поверхностью элемента управления;

·                   Foreground   —   это   свойство   задает   цвет   текста,   который   может присутствовать в качестве содержимого элементов управления;

·                   Opacity   —   это   свойство   (наследуется   от   UIElement)    определяет прозрачность элемента управления. Прозрачность задается в процентах и варьируется от 0 до 1.

Свойства  Background  и  Foreground  могут  принимать  объект   типа   Brush, описывающий кисть. В главе, посвященной работе с графикой, мы рассмотрим доступные  кисти,  а  сейчас  представляем  пример  работы  с  самой  простой кистью — SolidBrush:

<StackPanel>

<Button Background="#FFFF0000" Foreground="#FF00FF00" Content="Hello"></Button>

<Button Background="Red" Foreground="LightGreen" Content="Hello"></Button>

<Button Content="Hello">

<Button.Background>

<SolidColorBrush Color="Red"></SolidColorBrush>

</Button.Background>

<Button.Foreground>

<SolidColorBrush Color="LightGreen"></SolidColorBrush>

</Button.Foreground>

</Button>

</StackPanel>

В этом примере цвет задается сразу тремя способами: в  шестнадцатеричном представлении, с использованием возможности  конвертера значений свойств  в  XAML,  явным созданием  объекта  SolidColorBrush.  Аналогично  свойства можно устанавливать и из C# кода:

btn.Background = new SolidColorBrush(Colors.Red);

Тут Colors представляет собой специальный класс, определяющий  несколько популярных цветов.

Если используемый элемент работает с текстом, то для установки шрифта текста могут пригодиться следующие свойства:

·                   FontFamily — задает имя шрифта, который Вы хотите использовать;

·                   FontSize — размер шрифта в единицах Silverlight;

·                   FontStyle — позволяет задать стиль шрифта, такой как Normal или Italic;

·                   FontWeight — задает вес текста, например Bold;

·                   FontStretch   —   используется   для   поддержки   шрифтов    OpenType,

в частности позволяет сжимать или растягивать текст.

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

<Button Background="Red" Foreground="LightGreen" Content="Hello"

FontFamily="Arial" FontSize="16" FontStyle="Italic" FontWeight="Bold">

</Button>

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

·                   Width — длина элемента управления;

·                   Height — ширина элемента управления;

·                   Padding — расстояние от содержимого до границ элемента;

·                   Margin — расстояние от каждой из границ до границ соседних элементов.

Кнопки

В WinRT представлено большое количество кнопок. Среди них и новые  типы,

такие как ToggleSwitch. Вот краткое описание существующих кнопок:

·                   Button — классическая кнопка, содержащая в  качестве контента любой объект типа UIElement и инициирующая событие Click;

·                   ToggleButton  —  тип  кнопки,    используемый  для  имитации  эффекта залипания. Кнопка может быть в двух  состояниях: нажатой и отпущенной. Чтобы обрабатывать изменение состояния кнопки, используется событие Checked;

·                   RepeatButton — в   отличие от классической  кнопки,  этот вид  кнопки позволяет непрерывно генерировать событие Click, если кнопка остается нажатой, то есть удерживается пользователем в этом состоянии;

·                   CheckBox — эта кнопка  является прямым наследником  ToggleButton и реализует простейший флажок. В отличие от  ToggleButton, флажок можно устанавливать  в   промежуточное  состояние, но только из кода и только если свойство IsThreeState установлено как true;

·                   RadioButton   —   этот   элемент   управления  полностью    аналогичен CheckBox,  но  предоставляет возможность   размещать  целый  набор элементов в группы, позволяя сделать единственный выбор;

·                   HyperlinkButton  —  подобный  тип  кнопки  чаще  всего  используется внутри текста для организации переходов на другие страницы. Кнопка по умолчанию выглядит как обычная гиперссылка в браузере;

·                   ToggleSwitch — этот тип кнопки крайне интересен в условиях появления Touch-интерфейсов, так  как  с  его  помощью  можно  легко  выполнять переключения состояния. Элемент очень напоминает CheckBox, но имеет совершенно уникальное представление.

Поскольку  ToggleSwitch  является новым элементом  управления,   хотелось бы продемонстрировать  пример его работы. Код ниже  задает  такой элемент и позволяет выполнять переключение между двумя состояниями «Да» и «Нет»:

<ToggleSwitch OffContent="Нет" OnContent="Да"></ToggleSwitch>

Вот что мы увидим на экране:

Рис. 2.7.

Этот элемент пришел с платформы Windows Phone и полностью оптимизирован для работы с помощью пальцев.

Следующий    пример,    демонстрирующий    создание    группы     элементов

RadioButton:

<StackPanel>

<RadioButton Content="Choice 1" IsChecked="True" GroupName="Group 1" Margin="5">

</RadioButton>

<RadioButton Content="Choice 1" IsChecked="False" GroupName="Group 1" Margin="5">

</RadioButton>

<RadioButton Content="Choice 1" IsChecked="False" GroupName="Group 1" Margin="5">

</RadioButton>

<RadioButton Content="Choice 1" IsChecked="False" GroupName="Group 1" Margin="5">

</RadioButton>

</StackPanel>

В результате работы кода мы увидим следующую картину:

Рис. 2.8.

Как сказано выше, особенность элементов управления в XAML состоит в том, что в качестве содержимого у любого из элементов (за редким исключением) может выступать контейнер или другой элемент. Ниже пример кнопки, отображающей видео:

<Button MaxHeight="150" MaxWidth="200">

<Button.Content>

<MediaElement Source="Wildlife.wmv"></MediaElement>

</Button.Content>

</Button>

Рис. 2.9.

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

По теме:

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