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

<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).

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

Следующая задача для вкладки Ink API связана с организацией обработки события Click для каждого элемента управления RadioButton. Как вы поступали в других проектах WPF, просто щелкните на значке с изображением молнии в окне Properties среды Visual Studio и введите имена обработчиков событий. С помощью упомянутого приема свяжите событие Click каждого элемента управления RadioButton с тем же самым обработчиком по имени RadioButtonClicked. После обработки всех трех событий Click обработайте событие SelectionChanged элемента управления ComboBox, используя обработчик по имени ColorChanged. В результате должен получиться следующий код С#:

public partial class MainWindow : Window

{

  public MainWindow()

  {

    this.InitializeComponent();

    // Вставить сюда код, требуемый при создании объекта.

  }

    private void RadioButtonClicked(object sender,RoutedEventArgs e)

  {

    // TODO: добавить сюда реализацию обработчика событий.

  }

  private void ColorChanged(object sender,SelectionChangedEventArgs e)

  {

    // TODO: добавить сюда реализацию обработчика событий.

  }

}

Обработчики событий будут реализованы позже, так что оставьте их пока пустыми.

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

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

Щелкните правой кнопкой мыши где-нибудь в области панели инструментов и выберите в контекстном меню пункт