Классические элементы пользовательского интерфейса в Windows Presentation Foundation

131 Pages·1.719 MB·Russian

by  Шамшев А.Б.

Ан. Б. Шамшев

КЛАССИЧЕСКИЕ
ЭЛЕМЕНТЫ
ПОЛЬЗОВАТЕЛЬСКОГО
ИНТЕРФЕЙСА
ВWINDOWSPRESENTATION
FOUNDATION

Ульяновск 2012
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
«УЛЬЯНОВСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

Ан. Б. Шамшев

КЛАССИЧЕСКИЕ ЭЛЕМЕНТЫ
ПОЛЬЗОВАТЕЛЬСКОГО
ИНТЕРФЕЙСА В
WINDOWSPRESENTATIONFOUN
DATION

Учебное пособие

Ульяновск
УлГТУ
2012
УДК 004.451(075)
ББК 32.973.2-018.2я 7
Ш 19

Рецензенты:
Кафедра «Информационные технологии» Ульяновского
государственного университета (зав. кафедрой кандидат физико–
математических наук, доцент М. А. Волков);
Профессор кафедры «Информационные технологии»УлГУ,
д-р техн.наук, И. В. Семушин.

Утверждено редакционно-издательским советом университета
в качестве учебного пособия

Шамшев, Ан. Б.
Классические элементы пользовательского интерфейса в Windows
Ш19
Presentation Foundation : учебное пособие/ Ан. Б. Шамшев. –
Ульяновск: УлГТУ, 2012. – 130 с.
ISBN 978-5-9795-0925-9

Представлены базовые технологии проектирования интерфейсов с
использованием технологии Windows Presentation Foundation для
платформы MicrosoftdotNET. Особенности проектирования интерфейсов
иллюстрируются примерами кодов разметки.
Пособие предназначено для студентов направлений 230700.62
«Прикладная информатика» профиль «Прикладная информатика в
экономике» и 231000.62 «Программная инженерия», изучающих
дисциплину «Проектирование человеко-машинного интерфейса», а также
для студентов других направлений, изучающих дисциплины, связанные с
проектированием интерфейсов.

УДК 004.451(075)
ББК32.973.2-018.2я 7

© Шамшев Ан. Б., 2012
ISBN 978-5-9795-0925-9 © Оформление. УлГТУ, 2012
ПРЕДИСЛОВИЕ
В учебном пособии представлены классические элементы пользова-
тельского интерфейса и приведены примеры их использования в рамках
процесса проектирования интерфейсов с использованием технологии
Windows Presentation Foundation (WPF) для платформы Microsoft dotNET.
Рассматриваемые примеры иллюстрируются примерами кодов разметки.
Пособие предназначено для студентов направлений 230700.62 «При-
кладная информатика» профиль «Прикладная информатика в экономике»
и 231000.62 «Программная инженерия», изучающих дисциплину «Проек-
тирование человеко-машинного интерфейса», а также разработчикам про-
граммных продуктов и пользовательских интерфейсов, желающим изу-
чить современные технологии создания пользовательских интерфейсов.
Выписка из ГОС ВПО:
Цикл, к Компетенции студента, формируемые в результате освоения
которому дисциплины
относится
дисциплина
Б3.В.1.3 ПК-11: способность принимать участие в создании и управлении ИС
на всех этапах жизненного цикла;
В результате изучения дисциплины студент должен:
 знать основы построения пользовательских интерфейсов, ос-
новные способы и возможности среды разработки пользовательских
интерфейсов, средства создания динамических интерфейсов и при-
вязки интерфейсов к внешним данным;
 уметь формировать пользовательские интерфейсы при помощи
средств разработки и языка описания интерфейсов XAML;
 владеть средствами разработки пользовательских интерфейсов
Visual Studio 2010, технологией разработки интерфейсов
Рассматриваются следующие разделы учебной программы: основы
XAML, элементы управления и окна.
3
ВВЕДЕНИЕ
В учебном пособии [4] была показана концепция формирования
пользовательского интерфейса при помощи вложенных контейнеров ком-
поновки. Подобная схема построения интерфейса обладает целым рядом
достоинств, в частности, автоматическим масштабированием, адаптивно-
стью и концепцией содержимого. Очевидно, что одной компоновки для
создания пользовательского интерфейса недостаточно – ее необходимо
наполнить элементами управления: текстом, изображениями, кнопками,
переключателями и так далее.
Для решения этой задачи используются, в частности, классические
элементы управления, которыми Windows-разработчики пользуются уже
много лет. Несмотря на то, что эти элементы управления используются
уже довольно долго, технология Windows Presentation Foundation добавля-
ет к ним несколько важных деталей.
1. КЛАСС CONTROL
Окна WPF содержат элементы, однако только некоторые из них яв-
ляются элементами управления. К ним относятся элементы, поддержива-
ющие интерактивную связь с пользователем — они могут принимать фо-
кус и получать входные данные от клавиатуры или мыши.
Все элементы управления являются наследниками класса Sys-
tem.Windows.Control, который наделяет их базовыми характеристиками:
 они позволяют определять расположение содержимого внутри
элемента управления;
 они позволяют определять порядок перехода с использованием
клавиши табуляции;
 они поддерживают рисование фона, переднего плана и рамки:
 они поддерживают форматирование размера и шрифта текстово-
го содержимого.
4
1.1. Кисти фона и переднего плана
Практически любой элемент управления имеет фон и передний план.
Как правило, фоном является поверхность элемента управления (напри-
мер, белая или серая область внутри рамки кнопки), а передним планом —
текст или иное содержимое. Цвет этих двух областей (но не содержимого)
в WPF определяется с помощью свойств Background и Foreground соответ-
ственно.
Следует отметить то, что свойства Background и Foreground не ис-
пользуют объекты цвета, в противоположность приложениям, созданным
на основе технологии Windows Forms. В WPF эти свойства используют
более универсальный объект — Brush (кисть). Благодаря этому можно
осуществлять заливку содержимого фона и переднего плана сплошным
цветом (с помощью кисти SolidColorBrush) или чем-либо более экзотиче-
ским (например, используя кисти LinearGradientBrush или TileBrush). В
этом разделе будет рассмотрена только простая кисть SolidColorBrush, а
ниже будут продемонстрированы другие ее варианты.
1.1.1. Установка цветов в коде
Предположим, что необходимо установить поверхность голубого
цвета внутри кнопки cmd. Ниже показан программный код, с помощью
которого можно это сделать:
cmd.Background = new SolidColorBrush(Colors.AliceBlue);
Этот код создает новый объект SolidColorBrush с помощью готового
цвета посредством статического свойства класса Colors. Имена свойств
основаны на названиях цветов, которые поддерживаются большинством
браузеров. Затем созданная кисть задается в качестве фоновой кисти
кнопки, в результате чего фон кнопки становится светло-голубым. Также
можно использовать системные цвета, которые учитывают предпочтения
пользователя и цветовую схему, установленную в операционной системе.
Эти цвета задаются перечислением System.Windows.SystemColors. Пример
использования системных цветов (в данном случае в качестве цвета ука-
зан стандартный цвет фона кнопки):
5
cmd.Background = new SolidColorBrush(SystemColors.ControlColor);
Поскольку системные кисти используются достаточно часто, класс
SystemColors предлагает готовые свойства, возвращающие объект Solid-
ColorBrush. Ниже показан пример их использования:
cmd.Background = SystemColors.ControlBrush;
Два приведенных примера являются эквивалентными и они оба об-
ладают одним недостатком: если системный цвет будет изменен после то-
го, как был запущен этот код, кнопка не будет обновлена, и новый цвет
применяться не будет. Фактически, приведенный код делает мгновенный
снимок текущего цвета или кисти. Для решения этой проблемы необхо-
димо применять динамические ресурсы.
Классы Colors и SystemColors позволяют просто и быстро задать
цвет, однако существуют другие способы задания цвета. Например, мож-
но создать объект Color, определяя значения R, G и В, каждое из которых
соответствует красной, зеленой и синей составляющим цвета. Каждое из
этих значений является числом из диапазона 0 - 255:
int red = 0; int green = 255, int blue = 0;
cmd.Foreground = new SolidColorBrush(Color.FromRgb(red, green, blue));
Также можно сделать цвет частично прозрачным, используя значе-
ние альфа-канала и вызывая метод Color.FromArgb(). Значение альфа-
канала, равное 255, соответствует полностью непрозрачному цвету, а зна-
чение 0 – полностью прозрачному.
1.1.2. RGB и scRGB
Стандарт RGB применяется во многих программах. Например, мож-
но получить RGB-значение цвета в программе для рисования и использо-
вать этот же цвет в WPF-приложении. Однако возможна ситуация, в кото-
рой другие устройства (например, принтеры или плоттеры) могут поддер-
живать более широкий диапазон цветов. По этой причине был создан аль-
тернативный стандарт scRGB, в котором каждый компонент цвета (альфа-
канал, красный, зеленый и синий) представлен с помощью 64-битных зна-
чений.
6
Структура цветов WPF поддерживает оба подхода. Она включает как
набор стандартных свойств RGB (А, R, G и В), так и набор свойств scRGB
(ScA, ScR, ScG и ScB). Эти свойства связаны между собой, поэтому если
задать свойство R, то соответственным образом изменится и свойство
ScR. Взаимосвязь между значениями RGB и значениями scRGB является
нелинейной. Значение 0 в системе RGB соответствует значению 0 в
scRGB, 255 в RGB соответствует 1 в scRGB, а все значения в диапазоне 0
– 255 в RGB представлены как десятичные значения в диапазоне 0 – 1 в
scRGB.
1.2. Установка цветов в XAML
Если задавать цвет фона или переднего плана средствами XAML, то
можно воспользоваться сокращенным вариантом синтаксиса. Вместо
определения объекта Brush достаточно задать наименование или значение
цвета. Синтаксический анализатор WPF автоматически создаст объект
SolidColorBrush c использованием выбранного цвета и будет применять
этот объект для фона или переднего плана. Ниже показан пример, в кото-
ром используется имя цвета:
<Button Background="Red">A Button</Button>
Он эквивалентен следующему фрагменту разметки XAML:
<Button>A Button
<Button.Background>
<SolidColorBrush Color="Red" />
</Button.Background>
</Button>
Если возникнет необходимость создать другой тип кисти (например,
LinearGradientBrush), то нужно будет использовать полную форму синтак-
сиса и применять ее для рисования фона.
Если необходим код цвета, то необходимо использовать менее удоб-
ный синтаксис, в котором значения R, G и В представляются в шестнадца-
теричном формате. В WPF определены два формата: #rrggbb или
#aarrggbb. Отличие между ними состоит в том, что последний формат со-
держит значение альфа-канала. Чтобы задать значения A, R, G и В,
7
понадобятся только две цифры, поскольку все они представляются в
шестнадцатеричной форме. Ниже показан пример, который создает тот же
цвет, что и в предыдущем фрагменте кода, с помощью записи #aarrggbb:
<Button Background="#FFFF0000">A Button</Button>
Здесь значением альфа-канала является FF (255), значением красной
составляющей— FF (255), а значениями зеленой и синей — 0. Свойства
Background и Foreground не единственные свойства, цвет которых можно
определять при помощи кисти. Также можно нарисовать рамку вокруг
элементов управления с помощью свойств BorderBrush и BorderThickness.
Свойство BorderBrush принимает определенную разработчиком кисть, а
свойство BorderThickness принимает ширину рамки в независящих от
устройства единицах. Рамка будет отображена при установке обоих
свойств.
1.3. Прозрачность
В отличие от Windows Forms, в WPF поддерживается истинная про-
зрачность, если расположить несколько элементов один поверх другого и
задать для каждого из них различную степень прозрачности, то можно
увидеть в точности то, что и следует ожидать. Эта возможность дает воз-
можность создать графический фон, который будет «просматриваться
сквозь» элементы, расположенные на нем. При наличии необходимых
навыков эта особенность позволит создавать многослойные анимацион-
ные объекты и другие эффекты, создание которых в других средах может
оказаться чрезвычайно проблематичным.
Сделать элемент прозрачным можно двумя способами:
 с помощью свойства Opacity. Свойство Opacity (непрозрачность)
является дробным значением в диапазоне 0..1, где 1 соответству-
ет полностью непрозрачному цвету, а 0 — полностью прозрачно-
му. Свойство Opacity определяется в классе UIElement, поэтому
оно может быть применено ко всем элементам;
 с помощью полупрозрачного цвета. Любой цвет, значение альфа-
канала которого составляет менее 255, является полупрозрачным.
8
Рекомендуется использовать прозрачные цвета вместо свойства
Opacity.
На рис. 1 показан пример, в котором имеется несколько полупро-
зрачных слоев.

Рис. 1. Окно с полупрозрачными слоями
Перечислим слои, формирующие рис. 1:
 окно имеет непрозрачный белый фон;
 панель верхнего уровня StackPanel, содержащая все элементы,
имеет свойство ImageBrush, которое определяет изображение.
Свойство Opacity этой кисти уменьшено для того, чтобы подсве-
тить ее; это дает возможность видеть сквозь нее белый фон;
 в первой кнопке используется полупрозрачный красный цвет фо-
на. Изображение просматривается сквозь фон кнопки, а текст яв-
ляется непрозрачным;
 метка (ниже первой кнопки) используется без заданной прозрач-
ности;
 текстовое окно использует непрозрачный текст и непрозрачную
рамку, а также полупрозрачный цвет фона;
9