Посвятите некоторое время добавлению значений свойств напрямую в редакторе XAML. Обязательно освойте данный аспект визуального конструктора WPF.

Установка свойств с использованием окна Properties

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

В качестве простого примера выберите в визуальном конструкторе ранее добавленный элемент управления Button. С применением окна Properties измените цвет в свойстве Background элемента Button, используя встроенный редактор кистей (рис. 24.6); редактор кистей будет более подробно рассматриваться в главе 26 во время исследования графики WPF.

На заметку! В верхней части окна Properties имеется текстовая область, предназначенная для поиска. Чтобы быстро найти свойство, которое требуется установить, понадобится ввести его имя.

После завершения работы с редактором кистей имеет смысл взглянуть на сгенерированную разметку, которая может выглядеть так:

VerticalAlignment="Top" Width="75">

Обработка событий с использованием окна Properties

Для организации обработки событий, связанных с определенным элементом управления, также можно применять окно Properties, но на этот раз понадобится щелкнуть на кнопке Events (События), расположенной справа вверху окна (кнопка с изображением молнии). На поверхности визуального конструктора выберите элемент Button, если он еще не выбран, щелкните на кнопке Events в окне Properties и дважды щелкните на поле для события Click. Среда Visual Studio автоматически построит обработчик событий, имя которого имеет следующую общую форму:

ИмяЭлементаУправления_ИмяСобытия

Так как кнопка не была переименована, в окне Properties отображается сгенерированный обработчик событий по имени button_Click (рис. 24.7).

Кроме того, Visual Studio сгенерирует соответствующий обработчик события C# в файле кода для окна. В него можно поместить любой код, который должен выполняться, когда на кнопке произведен щелчок.

В качестве простого примера добавьте следующий оператор кода:

private void Button_Click(object sender, RoutedEventArgs e)

{

  MessageBox.Show("You clicked the button!");

}

Обработка событий в редакторе XAML

Обрабатывать события можно и непосредственно в редакторе XAML. Например, поместите курсор мыши внутрь элемента и введите имя события MouseMove, а за ним знак равенства. Среда Visual Studio отобразит все совместимые обработчики из файла кода (если они существуют), а также пункт для создания нового обработчика событий (рис. 24.8).

Позвольте IDE-среде создать обработчик события MouseMove, введите следующий код и запустите приложение, чтобы увидеть результат:

private void MainWindow_MouseMove (object sender, MouseEventArgs e)

{

  this.Title = e.GetPosition(this).ToString;

}

На заметку! В главе 28 описаны паттерны MWM и "Команда" (Command), которые являются гораздо лучшими способами обработки событий щелчков в корпоративных приложениях.

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

Окно Document Outline

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

В настоящее время ваша разметка довольно проста, т.к. было определено лишь несколько элементов управления внутри начального элемента . Тем не менее, необходимо найти окно Document Outline (Схема документа), которое по умолчанию располагается в левой части окна IDE-среды (если обнаружить его не удается, то данное окно можно открыть через пункт меню View? Other Windows (Вид?Другие окна)). При активном окне визуального конструктора XAML (не окне с файлом кода С#) в IDE-среде можно заметить, что в окне Document Outline отображаются вложенные элементы (рис. 24.9).