Обратите внимание, что ни в одном обработчике событий пузырьковое распространение не останавливается. После запуска приложения отобразится окно с уникальным сообщением, которое зависит от места на кнопке, где был произведен щелчок. На рис. 25.15 показан результат щелчка на внешнем объекте Ellipse.
![]()
Итак, почему события WPF обычно встречаются парами (одно туннельное и одно пузырьковое)? Ответ можно сформулировать так: благодаря предварительному просмотру событий появляется возможность выполнения любой специальной логики (проверки достоверности данных, отключения пузырькового распространения и т.п.) перед запуском пузырькового аналога событий. В качестве примера предположим, что создается элемент TextBox, который должен содержать только числовые данные. В нем можно было бы обработать событие PreviewKeyDown; если выясняется, что пользователь ввел нечисловые данные, то пузырьковое событие легко отменить, установив свойство Handled в true.
Как несложно было предположить, при построении специального элемента управления, который поддерживает специальные события, событие допускается реализовать так, чтобы оно могло распространяться пузырьковым (или туннельным) образом по дереву разметки XAML. В настоящей главе мы не рассматриваем процесс создания специальных маршрутизируемых событий (хотя он не особо отличается от построения специального свойства зависимости). Если интересно, загляните в раздел "Routed Events Overview" ("Обзор маршрутизируемых событий") документации по .NET Core, где предлагается несколько обучающих руководств, которые помогут в освоении этой темы.
Более глубокое исследование API-интерфейсов и элементов управления WPF
В оставшемся материале главы будет построено новое приложение WPF с применением Visual Studio. Целью является создание пользовательского интерфейса, который состоит из виджета TabControl, содержащего набор вкладок. Каждая вкладка будет иллюстрировать несколько новых элементов управления WPF и интересные API-интерфейсы, которые могут быть задействованы в разрабатываемых проектах. Попутно вы также узнаете о дополнительных возможностях визуальных конструкторов WPF из Visual Studio.
Работа с элементом управления TabControl
Первым делом создайте новый проект приложения WPF по имени WpfControlsAndAPIs. Как упоминалось ранее, начальное окно будет содержать элемент управления TabControl с четырьмя вкладками, каждая из которых отображает набор связанных элементов управления и/или API-интерфейсов WPF. Установите свойство Width окна в 800, а свойство Height окна в 350.
Перетащите элемент управления TabControl из панели инструментов Visual Studio на поверхность визуального конструктора и модифицируйте его разметку следующим образом:
<TabControl Name="MyTabControl" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TabItem Header="TabItem">
(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
Вы заметите, что два элемента типа вкладок предоставляются автоматически. Чтобы добавить дополнительные вкладки, нужно щелкнуть правой кнопкой мыши на узле TabControl в окне Document Outline и выбрать в контекстном меню пункт Add TabItem (Добавить TabItem). Можно также щелкнуть правой кнопкой мыши на элементе TabControl в визуальном конструкторе и выбрать тот же самый пункт меню или просто ввести разметку в редакторе XAML. Добавьте одну дополнительную вкладку, используя любой из подходов.
Обновите разметку каждого элемента управления TabItem в редакторе XAML и измените их свойство Header, указывая Ink API, Data Binding и DataGrid. Окно визуального конструктора должно выглядеть примерно так, как на рис. 25.16.
![]()
Имейте в виду, что выбранная для редактирования вкладка становится активной, и можно формировать ее содержимое, перетаскивая элементы управления из панели инструментов. Располагая определением основного элемента управления TabControl, можно проработать детали каждой вкладки, одновременно изучая дополнительные средства API-интерфейса WPF.
Построение вкладки Ink API
Первая вкладка предназначена для раскрытия общей роли интерфейса Ink API, который позволяет легко встраивать в программу функциональность рисования. Конечно, его применение не ограничивается приложениями для рисования; Ink API можно использовать для разнообразных целей, включая фиксацию рукописного ввода.
На заметку! В оставшейся части главы (и в последующих главах, посвященных WPF) вместо применения разнообразных окон визуального конструктора будет главным образом напрямую редактироваться разметка XAML. Хотя процедура перетаскивания элементов управления работает нормально, чаще всего компоновка оказывается нежелательной (Visual Studio добавляет границы и заполнение на основе того, где размещен элемент), а потому приходится тратить значительное время на очистку разметки XAML.
Начните с замены дескриптора Grid в элементе управления TabItem, помеченном как Ink API, дескриптором StackPanel и добавления закрывающего дескриптора. Разметка должна иметь такой вид:
<TabItem Header="Ink API">
<StackPanel Background="#FFE5E5E5">
</StackPanel>
</TabItem>
Проектирование панели инструментов
Добавьте (используя редактор XAML) в StackPanel новый элемент управления ToolBar по имени InkToolbar со свойством Height, установленным в 60:
