Язык программирования C#9 и платформа .NET5

Обновите разметку каждого элемента управления 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 и добавления закрывающего дескриптора. Разметка должна иметь такой вид:

 

 

Проектирование панели инструментов

Добавьте (используя редактор XAML) в StackPanel новый элемент управления ToolBar по имени InkToolbar со свойством Height, установленным в 60:

Добавьте в Toolbar три элемента управления RadioButton внутри панели WrapPanel и элемента управления Border:

 

   

        Content="Ink Mode!" IsChecked="True" />

   

   

 

Когда элемент управления RadioButton помещается не внутрь родительской панели, он получает пользовательский интерфейс, идентичный пользовательскому интерфейсу элемента управления Button! Именно потому элементы управления RadioButton были упакованы в панель WrapPanel.

Далее добавьте элемент Separator и элемент ComboBox, свойство Width которого установлено в 175, а свойство Margin — в 10,0,0,0. Добавьте три дескриптора ComboBoxItem с содержимым Red, Green и Blue и сопроводите весь элемент управления ComboBox еще одним элементом Separator:

 

 

 

Элемент управления RadioButton

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

Класс RadioButton имеет свойство IsChecked, значения которого переключаются между true и false, когда конечный пользователь щелкает на элементе пользовательского интерфейса. К тому же элемент управления RadioButton предоставляет два события (Checked и Unchecked), которые можно применять для перехвата такого изменения состояния.

Добавление кнопок сохранения, загрузки и удаления

Финальным элементом управления внутри ToolBar будет Grid, содержащий три элемента управления Button. Поместите после последнего элемента управления Separator следующую разметку:

 

   

   

   

 

 

      Width="70" Content="Save Data"/>

 

      Width="70" Content="Load Data"/>

 

      Width="70" Content="Clear"/>

Добавление элемента управления InkCanvas

Финальным элементом управления для TabControl является InkCanvas. Поместите показанную ниже разметку после закрывающего дескриптора ToolBar, но перед закрывающим дескриптором StackPanel:

Предварительный просмотр окна

 Теперь все готово к тестированию программы, для чего понадобится нажать клавишу <F5>. Должны отобразиться три взаимно исключающих переключателя, раскрывающийся список с тремя элементами и три кнопки (рис. 25.17).

Обработка событий для вкладки Ink API