2. Создание тестового приложения wpf

Остальная часть данного руководства посвящена созданию простого приложения для проведения опроса. В процессе создания этого приложения вы познакомитесь со многими новыми функциями конструктора WPF.

Рис. 2. 11.- Готовое приложение

Создайте на поверхности разработки элемент управления типа TextBlock. Элемент управления TextBlock находится на вкладке Controls («Элементы управления») панели элементов.

Когда выбран новый элемент TextBlock, в окне Properties («Свойства») выберите представление в алфавитном порядке и введите в поле поиска значение «text». Обратите внимание, что по мере ввода происходит быстрая фильтрация списка свойств.

Совет.Функция поиска в окне свойств фильтрует свойства и экономит много времени при разработке приложений. Это очень полезная функция.

Измените значение свойства Text на Survey («Опрос»).

Рис. 2.12. - Заголовок формы. Свойство Text элемента управления TextBlock

Далее с помощью окна Properties («Свойства») будет задано положение элемента TextBlock заголовка формы. В окне Properties («Свойства») выберите вид по категориям и пролистайте список до категории Layout («Макет»), как показано на рис. 2.13.

Задайте свойства HorizontalAlignment, VerticalAlignment и Margin, как указано на рисунке ниже. Обратите внимание на расположение элемента TextBlock на поверхности разработки.

Введите в поле поиска строку «font». С помощью редактора категории шрифтов увеличьте размер шрифта до 18.

Рис. 2.13. - Заголовок формы. Расположение элемента управления TextBlock

Примечание. На рис. 2.12 и 2.13 обратите внимание на изображение элемента TextBlock в окне предварительного просмотра слева от имени элемента управления. Такое же окно предварительного просмотра отображается в структуре документа при наведении указателя мыши на элементы управления в списке.

Приложение Survey. Элементы управления формы. Для добавления интерфейса пользователя элементы управления, с которыми пользователь может взаимодействовать во время выполнения приложения.

1. Добавьте четыре элемента управления, показанные на рис. 2.14: два элемента типа Label, один типа TextBox и один типа ComboBox.

Задайте для всех элементов управления выравнивание Top («Сверху») и Left («Слева»). Используйте линии привязки элементов управления при выравнивании и выборе положений элементов.

Выберите элемент TextBox. В окне Properties («Свойства») измените значение свойства Name на «txtName». Выберите элемент ComboBox. Измените свойство Name на «cboProduct».

Рис. 2.14. - Элементы управления формы

2. Выберите верхний элемент Label на поверхности разработки. В поле поиска в окне свойств введите «con». Измените значение свойства Content на «_Name».

3. Выберите нижний элемент Label на поверхности разработки.

Обратите внимание, что в окне свойств выбрано свойство Content этого элемента. Измените значение свойства Content на «_Product».

Рис. 2.15. - Свойство Content элемента Label

Примечание. Для отображения текста в элементе управления Label используется свойство Content.

Свойство Content элемента Label может содержать практически все: текст, изображение, сетку и т. д.

Элемент управления Label может связывать клавишу доступа с другим элементом управления. При нажатии клавиши доступа фокус будет перемещен в целевой элемент управления. При этом используется свойство Content элемента Label.

Свойство Text элемента TextBlock особенное. Оно может содержать текст или элементы встроенного потока содержимого. Встроенное содержимое позволяет отображать многострочное форматированное содержимое в элементе TextBlock.

4. Чтобы определить клавишу доступа элемента Label, необходимо указать клавишу доступа и целевой элемент управления.

Строка «_N» связывает сочетание клавиш ALT+N с клавишей доступа этого элемента Label. Когда нажата клавиша ALT, в элементе Label отображается строка «Name». В WPF целевой элемент управления задается с использованием привязки данных.

Построитель привязок данных в окне свойств предоставляет интерфейс пользователя для создания необходимой привязки данных.

5. Задайте свойство Target для клавиши доступа.

Создание привязки имени элемента. Такая привязка позволяет связывать элемент управления со свойством другого именованного объекта. Выберите элемент управления TextBox и введите строку «tar» в поле поиска окна свойств (рис. 2.16).

Красная стрелка указывает на маркер свойства. Значок маркера свойства зависит от заданного значения свойства и места его задания. Щелкните маркер свойства. Откроется контекстное меню. Выберите команду ApplyDataBinding («Применить привязку данных»).

Рис. 2.16 - Привязка свойства Target

На вкладке Source («Исходный элемент») выберите пункт ElementName. Появится список именованных элементов управления интерфейса пользователя. Выберите элемент txtName. Обратите внимание, что заголовок вкладки Source («Исходный элемент») изменяется при выборе элементов.

Для привязки свойства Target не требуется задавать путь.

Чтобы закрыть построитель привязок данных, нажмите клавишу ВВОД или щелкните мышью за пределами построителя.

Рис. 2.17 - Построитель привязок данных

Давайте протестируем работу клавиши доступа ALT+N. Запустите приложение и нажмите сочетание клавиш ALT+N. Фокус переместится в элемент управления TextBox.

Повторите описанные выше действия для элемента Productlabel, связав сочетание клавиш ALT+P с элементом управления ComboBox.

Важная информация. Выше данные элементов Label были привязаны к элементам TextBox, чтобы обеспечить выбор элемента управления с помощью клавиш доступа. Привязка данных в WPF — одна из самых мощных возможностей платформы, которая широко используется во всех приложениях WPF. Например, привязка элементов интерфейса пользователя к базе данных или данным коллекции и внутриформенные привязки предоставляют возможности взаимодействия пользователям приложения. Использование привязок данных в интерфейсе пользователя избавляет от необходимости написания больших объемов кода, который пришлось бы создавать при разработке на другой платформе. Правильное понимание привязок данных WPF — необходимое условие для разработчика на платформе WPF.

Существует несколько способов добавить элементы в элемент управления типа ComboBox. В этом руководстве в элемент ComboBox будут добавлены три статических элемента.

1) Выберите элемент ComboBox.

2) Выполните поиск строки «items» в окне свойств (рис. 2.18).

3) Щелкните значок многоточия для свойства Items, чтобы открыть редактор коллекции для свойства Items.

Рис. 2.18 - Коллекция Items элемента ComboBox

4) Нажмите кнопку Add («Добавить»). Найдите свойство Content и измените значение. Также можно изменять порядок элементов и удалять элементы.

5) Добавьте три элемента с помощью редактора коллекции, показанного на рис. 2.19. Задайте свойству Content следующие строки:

Deluxe Photo Paper Financial Calculator 4GB USB Thumb Drive

По завершении нажмите кнопку ОК. В редакторе XAML посмотрите на созданную разметку XAML.

Рис. 2.19 - Редактор коллекции

Приложение Survey. Элементы управления формы. Для отображения переключателей RadioButton будет использоваться элемент GroupBox. Переключатели RadioButton взаимоисключающие, то есть выбор переключателя автоматически отменяет ранее выбранный переключатель.

Также будет использован новый элемент управления панели StackPanel. Он группирует дочерние элементы управления по горизонтали или вертикали в зависимости от значения свойства Orientation.

Ниже в элемент ComboBox добавляется элемент GroupBox с помощью вкладки Controls («Элементы управления») панели элементов.

Элемент управления GroupBox может содержать один дочерний элемент управления. Конструктор WPF автоматически добавляет дочерний элемент управления Grid ( рис.2. 20).

Элемент Grid необходимо заменить на элемент StackPanel. Это можно сделать, либо напрямую изменив разметку XAML, либо с помощью конструктора.

Щелкните внутри элемента GroupBox, чтобы выбрать элемент Grid элемента GroupBox. Нажмите клавишу DELETE, чтобы удалить дочерний элемент Grid.




Рис. 2.20 - Элемент GroupBox

Чтобы добавить элемент StackPanel в качестве дочернего элемента GroupBox, перетащите элемент управления StackPanel из панели элементов на элемент GroupBox (рис. 2.21). Обратите внимание на синий декоративный элемент вокруг границы. Он указывает на родительский элемент управления, дочерним элементом которого станет элемент StackPanel, если отпустить его в текущем местоположении.

Рис. 2.21 - Установление родительской связи элемента управления при создании

При добавлении элементов управления на поверхность разработки с помощью панели элементов некоторым свойствам присваиваются значения по умолчанию.

Совет. Также можно перетаскивать элементы управления из панели элементов в редактор XAML. При перетаскивании элемента управления в редактор XAML значения по умолчанию свойствам не присваиваются.

После создания элемента StackPanel поверхность разработки будет выглядеть, как показано на рис. 2.22. Обратите внимание, что в редакторе XAML и структуре документа элемент StackPanel является дочерним элементом GroupBox.

Рис. 2.22 - Элемент StackPanel является дочерним элементом элемента GroupBox

В данном приложении элемент StackPanel должен автоматически занимать все пространство внутри элемента GroupBox, то есть при изменении размера элемента GroupBox на этапе разработки или во время выполнения элемент StackPanel должен увеличиваться или уменьшаться вместе с элементом GroupBox.

Для выполнения этой задачи воспользуемся окном свойств (рис. 2.23). Выберите элемент StackPanel и выполните поиск строки «wid» в окне свойств. Щелкните маркер свойства Width («Ширина») и выберите команду ResetValue («Сбросить значение»). Значение свойства Width изменится на Auto («Авто»).

Рис. 2.23 - Сбросзначений свойства

Повторите аналогичные действия для свойства Height («Высота»). Выполните поиск строки «align». Сбросьте значения свойств HorizontalAlignment и VerticalAlignment. При сбросе их значения будут изменены на Stretch («Растянуть»). Размер элемента StackPanel будет изменяться автоматически, а элемент будет выглядеть, как показано на рисунку 2.24.

Рис.2.24 - Элемент StackPanel с автоматически изменяемым размером

Присвойте элементу GroupBox содержательный заголовок. В окне свойств выполните поиск строки «head» и измените значение свойства Header на «Value» (рис. 2.25).

Выберите элемент StackPanel, добавьте три элемента RadioButton в качестве дочерних элементов элемента StackPanel. Трижды сделайте двойной щелчок элемента RadioButton на панели элементов. После этого поверхность разработки будет выглядеть, как показано на рисунку 2.25.

Конструктор WPF позволяет выбирать несколько элементов управления и изменять значения общих свойств.

Чтобы выбрать три элемента RadioButton, щелкните их, удерживая нажатой клавишу CTRL (CTRL+щелчок). Обратите внимание, что имя окна свойств изменится на Multipleobjectsselected («Выбрано несколько объектов»). В окне свойств сбросьте значения свойств Height («Высота») и Width («Ширина») для выбранных объектов RadioButton. В окне свойств выполните поиск строки «margin» и задайте значение равным 3.5. В зависимости от размера объекта GroupBox изменение свойства Margin может привести к тому, что один или несколько элементов RadioButton исчезнут из вида. Это проблема будет устранена далее.

Рис. 2.25 - Изменение свойств нескольких выбранных элементов

Совет. Также можно выбрать все элементы в контейнере. Для этого следует выбрать контейнер и нажать сочетание клавиш CTRL+A. На рисунку 2.25 выбрано элемент StackPanel и нажато сочетание клавиш CTRL+A, чтобы выбрать три элемента RadioButton.

На поверхности разработки выберите элемент GroupBox. С помощью декоративного элемента для изменения размера измените размер элемента GroupBox, чтобы он выглядел, как на рисунку 2.26. Обратите внимание, что размер дочернего элемента StackPanel меняется автоматически при изменении родительского элемента GroupBox.

Рис. 2.26 - Изменение размера элемента GroupBox

В окне свойств присвойте свойству Content трех элементов RadioButton следующие значения: 
Outstanding («Отлично») Good («Хорошо») Unsatisfied («Неудовлетворительно»)

Рис. 2.27 - Свойство Content элемента RadioButton

Элементу ComboBox можно задать значение по умолчанию путем присвоения значения свойству SelectedIndex.

Выберите элемент ComboBox. В окне свойств измените значение свойства SelectedIndex на 0. Обратите внимание, что в элементе ComboBox отображается значение свойства ComboBoxItem с индексом 0 (рис. 2.28).

Рис. 2.28 - Свойство SelectedIndex элемента ComboBox

Приложение Survey. Элементы управления формы.Чтобы завершить работу над приложением, необходимо добавить две кнопки и код, который будет выполняться при нажатии кнопок.

Добавьте две кнопки, как показано на рис. 2.29. Измените значение свойства Content левой кнопки на OK, а свойству Name присвойте значение btnOK. Измените значение свойства Content правой кнопки на Cancel, а свойству Name присвойте значение btnCancel.

В конструкторе WPF связать код с событием элемента управления можно тремя способами. Двойной щелчок элемента управления приведет к связыванию с событием по умолчанию. На вкладке событий в окне свойств найдите необходимое событие и дважды щелкните область, указанную на рис. 2.29. Если код события уже есть в коде программной части, можно выбрать имя метода в элементе ComboBox, вместо того чтобы выполнять двойной щелчок для создания нового обработчика событий. Создайте новый обработчик событий или выберите метод с помощью редактора XAML.

Выберите кнопку OK. На вкладке событий в окне свойств дважды щелкните область рядом с событием Click. Обработчик событий Click будет связан, а код будет добавлен в код программной части.

Рис. 2.29 - Вкладка событий в окне свойств

В C# событие связывается путем добавления имени события и обработчика событий в разметку XAML.

Дважды щелкните кнопку Cancel на поверхности разработки, чтобы создать обработчик событий для этой кнопки.

Добавьте вызовы методов MessageBox.Show и Close в созданные обработчики событий.

Пример кода на C#:

usingSystem;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace FirstWPFApplication

{

///

/// Interaction logic for Window1.xaml

///

public partial class Window1 : Window {

public Window1() {

InitializeComponent();

}

private void btnOK_Click(object sender, RoutedEventArgs e) {

MessageBox.Show("Thank you for your feedback.");

this.Close();

}

private void btnCancel_Click(object sender, RoutedEventArgs e) {

this.Close();

} }

}

5. Чтобы запустить готовое приложение, нажмите клавишу F5. Переместите фокус в элемент TextBox с помощью клавиши доступа ALT+N. Переместите фокус в элемент ComboBox с помощью сочетания клавиш ALT+P.

Используйте клавиши со стрелками, чтобы изменить значение элемента ComboBox. Нажмите клавишу F4, чтобы открыть раскрывающийся список в элементе ComboBox.

Щелкайте переключатели RadioButton, чтобы убедиться в том, что в любое время выбран только один элемент. Нажатие кнопки Cancel приведет к закрытию приложения. Нажатие кнопки OK приведет к отображению окна сообщения. Закройте окно сообщения, и приложение будет закрыто.

Рис. 2.30 - Работа приложения