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

Построение вкладки 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:

 <ToolBar Name="InkToolBar" Height="60">
 </ToolBar>

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

 <Border Margin="0,2,0,2.4" Width="280" VerticalAlignment="Center">
  <WrapPanel>
  <RadioButton x:Name="inkRadio" Margin="5,10"
  Content="Ink Mode!" IsChecked="True" />
  <RadioButton x:Name="eraseRadio" Margin="5,10" Content="Erase Mode!" />
  <RadioButton x:Name="selectRadio" Margin="5,10" Content="Select Mode!" />
  </WrapPanel>
 </Border>

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

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

 <Separator/>
 <ComboBox x:Name="comboColors" Width="175" Margin="10,0,0,0">
  <ComboBoxItem Content="Red"/>
  <ComboBoxItem Content="Green"/>
  <ComboBoxItem Content="Blue"/>
 </ComboBox>
 <Separator/>

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

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

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

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

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

 <Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Button Grid.Column="0" x:Name="btnSave" Margin="10,10"
  Width="70" Content="Save Data"/>
  <Button Grid.Column="1" x:Name="btnLoad" Margin="10,10"
  Width="70" Content="Load Data"/>
  <Button Grid.Column="2" x:Name="btnClear" Margin="10,10"
  Width="70" Content="Clear"/>
 </Grid>

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

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

 <InkCanvas x:Name="MyInkCanvas" Background="#FFB6F4F1" />

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

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