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

Более глубокое исследование API-интерфейсов и элементов управления WPF

В оставшемся материале главы будет построено новое приложение WPF с применением Visual Studio. Целью является создание пользовательского интерфейса, который состоит из виджета TabControl, содержащего набор вкладок. Каждая вкладка будет иллюстрировать несколько новых элементов управления WPF и интересные API-интерфейсы, которые могут быть задействованы в разрабатываемых проектах. Попутно вы также узнаете о дополнительных возможностях визуальных конструкторов WPF из Visual Studio.

Работа с элементом управления TabControl

Первым делом создайте новый проект приложения WPF по имени WpfControlsAndAPIs. Как упоминалось ранее, начальное окно будет содержать элемент управления TabControl с четырьмя вкладками, каждая из которых отображает набор связанных элементов управления и/или API-интерфейсов WPF. Установите свойство Width окна в 800, а свойство Height окна в 350.

Перетащите элемент управления TabControl из панели инструментов Visual Studio на поверхность визуального конструктора и модифицируйте его разметку следующим образом:

     VerticalAlignment="Stretch">

 

   

  

   

     

  

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

 

 

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

Добавьте (используя редактор 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