Лекция 8: Реализация пользовательского интерфейса. Элементы управления. Стили. Ресурсы

Для реализации элементов интерфейса в Winodws 8 используются базовые элементы управления. В среде разработки Visual Studio имеется стандартный набор элементов управления, которые являются неотъемлемой частью любого интерфейса.

Класс 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, в частности позволяет сжимать или растягивать текст.

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

<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> 

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

Рис. 7.1.

Этот элемент пришел с платформы 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> 

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

Рис. 7.2.

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

<Button MaxHeight="150" MaxWidth="200">
<Button.Content>
<MediaElement Source="Wildlife.wmv"></MediaElement>
</Button.Content>
</Button> 

Текстовые элементы управления

В Windows Runtime выделяют три типа базовых элементов управления, позволяющих редактировать текст:

• TextBox - позволяет вводить простой текст в виде одной или нескольких строк;
• PasswordBox - текст скрывается с помощью специальных символов;
• RichEditBox - позволяет вводить форматированный текст. Если рассматривать свойства таких элементов, как TextBox и PasswordBox, можно выделить:
• AcceptsReturn - позволяет выполнять перевод каретки при вводе текста;
• IsReadOnly - определяет, будет ли текстовое поле доступно для ввода;
• SelectedText - возвращает выделенный текст;
• SelectionLength - позволяет получить или задать размер текущего выделения;
• SelectionStart - позволяет получить или задать позицию символа, с которого нужно произвести выделение;
• SelectionBackground - определяет цвет фона выделенного текста;
• SelectionForeground - задает цвет шрифта выделенного текста;
• TextWraping - определяет, будет ли текст переходить на другую строку, если он не помещается в видимой части одной строки.

<TextBox AcceptsReturn="True" TextWrapping="Wrap"
   Width="300" Height="200">
     </TextBox> 

Элементу TextBox можно противопоставить элемент управления TextBlock, задачей которого является отображение текста. Оба эти элемента способны удовлетворить все нужды разработчика в редактировании и отображении простого текста.

Если же говорить о форматированном тексте, тут требуется применять RichTextEdit и RichTextBlock. Если первый элемент позволяет ввести и редактировать форматированный текст, то второй - отображает только чтение. Оба элемента являются контейнерами для других элементов. Так, основным наполнением этих элементов выступает набор элементов Paragraph, которые описывают параграфы текстового документа. В свою очередь, параграф может включать набор из следующих элементов:

• Run - задает обычный текст;
• Span - служит для группировки других элементов;
• Bold - определяет жирное начертание символов;
• LineBreak -задает переход на другую строку;
• Italic - определяет рукописное начертание символов;
• Underline - выделяет текст подчеркиванием;
• HyperLink - создает гиперссылку, которая становится активной только в режиме ReadOnly элемента RichTextArea;
• InlineUIContainer - позволяет вставить в документ любой из элементов, порожденных UIElement.

Ниже пример элемента RichTextBlock, отображающего текст с минимальным форматированием:

<RichTextBlock HorizontalAlignment="Left"
Name="rArea" VerticalAlignment="Top"
Height="300" Width="400" >
<Paragraph>
<Bold>This is a bold text</Bold>
<LineBreak></LineBreak>
<Underline>This is an underline text</Underline>
<LineBreak></LineBreak>
<Italic>This is an italic text</Italic>
<LineBreak></LineBreak>
This is a button:
<InlineUIContainer>
<Button Content="Button"></Button>
</InlineUIContainer>
</Paragraph>
</RichTextBlock> 

В результате на экране отобразится следующий контент:

Рис. 7.3.

Естественно, создавать и заполнять RichTextBlock можно и с помощью кода на C. Вот небольшой пример кода:

Bold b = new Bold();
b.Inlines.Add("This is a bold text");
Italic i = new Italic();
i.Inlines.Add("This is an italic text");
Underline u = new Underline();
u.Inlines.Add("This is an underlined text");
Paragraph myPar = new Paragraph();
myPar.Inlines.Add(b);
myPar.Inlines.Add(new LineBreak());
myPar.Inlines.Add(i);
myPar.Inlines.Add(new LineBreak());
myPar.Inlines.Add(u);
rArea.Blocks.Add(myPar);