Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

Choose Items (Выбрать элементы). Вскоре появится список возможных компонентов для добавления в панель инструментов. Вас интересует элемент управления InkCanvas (рис. 25.18).

На заметку! Элементы управления Ink API не совместимы с визуальным конструктором XAML в версии Visual Studio 16.8.3 (текущая версия на момент написания главы) или Visual Studio 16.9 Preview 2. Использовать элементы управления можно, но только не через визуальный конструктор.

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

Простое добавление InkCanvas делает возможным рисование в окне. Рисовать можно с помощью мыши либо, если есть устройство, воспринимающее касания, то пальца или цифрового пера. Запустите приложение и нарисуйте что-нибудь (рис. 25.19).

Элемент управления InkCanvas обеспечивает нечто большее, чем просто рисование штрихов с помощью мыши (или пера); он также поддерживает несколько уникальных режимов редактирования, управляемых свойством EditingMode, которому можно присвоить любое значение из связанного перечисления InkCanvasEditingMode. В данном примере вас интересует режим Ink, принятый по умолчанию, который только что демонстрировался, режим Select, позволяющий пользователю выбирать с помощью мыши область для перемещения или изменения размера, и режим EraseByStroke, который удаляет предыдущий штрих мыши.

На заметку! Штрих — это визуализация, которая происходит во время одиночной операции нажатия и отпускания кнопки мыши. Элемент управления InkCanvas сохраняет все штрихи в объекте StrokeCollection, который доступен с применением свойства Strokes.

Обновите обработчик RadioButtonClicked() следующей логикой, которая помещает InkCanvas в нужный режим в зависимости от выбранного переключателя RadioButton:

private void RadioButtonClicked(object sender,RoutedEventArgs e)

{

  // В зависимости от того, какая кнопка отправила событие,

  // поместить InkCanvas в нужный режим оперирования.

  this.MyInkCanvas.EditingMode =

      (sender as RadioButton)?.Content.ToString() switch

  {

    // Эти строки должны совпадать со значениями свойства Content

    // каждого элемента RadioButton.

    "Ink Mode!" => InkCanvasEditingMode.Ink,

    "Erase Mode!" => InkCanvasEditingMode.EraseByStroke,

    "Select Mode!" => InkCanvasEditingMode.Select,

    _ => this.MyInkCanvas.EditingMode

  };

}

Вдобавок установите Ink как стандартный режим в конструкторе окна. Там же установите стандартный выбор для ComboBox (элемент управления ComboBox более подробно рассматривается в следующем разделе):

public MainWindow()

{

  this.InitializeComponent();

  // Установить режим Ink в качестве стандартного.

  this.MyInkCanvas.EditingMode = InkCanvasEditingMode.Ink;

  this.inkRadio.IsChecked = true;

  this.comboColors.SelectedIndex = 0;

}

Теперь запустите программу еще раз, нажав <F5>. Войдите в режим Ink и нарисуйте что-нибудь. Затем перейдите в режим Erase и сотрите ранее нарисованное (курсор мыши автоматически примет вид стирающей резинки). Наконец, переключитесь в режим Select и выберите несколько линий, используя мышь в качестве лассо.

Охватив элемент, его можно перемещать по поверхности холста, а также изменять размеры. На рис. 25.20 демонстрируются разные режимы в действии.

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

После заполнения элемента управления ComboBox (или ListBox) есть три способа определения выбранного в них элемента. Во-первых, когда необходимо найти числовой индекс выбранного элемента, должно применяться свойство SelectedIndex (отсчет начинается с нуля; значение -1 представляет отсутствие выбора). Во-вторых, если требуется получить объект, выбранный внутри списка, то подойдет свойство SelectedItem. В-третьих, свойство SelectedValue позволяет получить значение выбранного объекта (обычно с помощью вызова ToString()).

Последний фрагмент кода, который понадобится добавить для данной вкладки, отвечает за изменение цвета штрихов, нарисованных в InkCanvas. Свойство DefaultDrawingAttributes элемента InkCanvas возвращает объект DrawingAttributes, который позволяет конфигурировать многочисленные аспекты пера, включая его размер и цвет (помимо других настроек). Модифицируйте код C# следующей реализацией метода ColorChanged():

private void ColorChanged(object sender, SelectionChangedEventArgs e)

{

  // Получить выбранный элемент в раскрывающемся списке.

  string colorToUse =

    (this.comboColors.SelectedItem as ComboBoxItem)?.Content.ToString();

  // Изменить цвет, используемый для визуализации штрихов.

  this.MyInkCanvas.DefaultDrawingAttributes.Color =

    (Color)ColorConverter.ConvertFromString(colorToUse);

}

Вспомните, что ComboBox содержит коллекцию ComboBoxIterns. В сгенерированной разметке XAML присутствует такое определение:

<ComboBox x:Name="comboColors" Width="100" SelectionChanged="ColorChanged">

  <ComboBoxItem Content="Red"/>

  <ComboBoxItem Content="Green"/>

  <ComboBoxItem Content="Blue"/>

</ComboBox>

В результате обращения к свойству SelectedItem получается выбранный элемент ComboBoxItem, который хранится как экземпляр общего типа Object. После приведения Object к ComboBoxItem извлекается значение Content, которое будет строкой Red, Green или Blue. Эта строка затем преобразуется в объект Color с применением удобного служебного класса ColorConverter. Снова запустите программу. Теперь должна появиться возможность переключения между цветами при визуализации изображения.

Обратите внимание, что элементы управления ComboBox и ListBox также могут иметь сложное содержимое, а не только список текстовых данных. Чтобы получить представление о некоторых возможностях, откройте редактор XAML для окна и измените определение элемента управления ComboBox, поместив в него набор элементов StackPanel, каждый из которых содержит Ellipse и Label (свойство Width элемента ComboBox установлено в 175):

<ComboBox x:Name="comboColors" Width="175" Margin="10,0,0,0"

    SelectionChanged="ColorChanged">

  <StackPanel Orientation ="Horizontal" Tag="Red">

    <Ellipse Fill ="Red" Height ="50" Width ="50"/>

    <Label FontSize ="20" HorizontalAlignment="Center"

        VerticalAlignment="Center" Content="Red"/>

  </StackPanel>

   <StackPanel Orientation ="Horizontal" Tag="Green">

    <Ellipse Fill ="Green" Height ="50" Width ="50"/>

    <Label FontSize ="20" HorizontalAlignment="Center"

        VerticalAlignment="Center" Content="Green"/>

  </StackPanel>

  <StackPanel Orientation ="Horizontal" Tag="Blue">

    <Ellipse Fill ="Blue" Height ="50" Width ="50"/>

    <Label FontSize ="20" HorizontalAlignment="Center"

        VerticalAlignment="Center" Content="Blue"/>

  </StackPanel>

</ComboBox>

В определении каждого элемента StackPanel выполняется присваивание значения свойству Tag, что является быстрым и удобным способом выявления, какой стек элементов был выбран пользователем (для этого существуют и лучшие способы, но пока достаточно такого). С указанной поправкой необходимо изменить реализацию метода ColorChanged():

private void ColorChanged(object sender, SelectionChangedEventArgs e)

{

  // Получить свойство Tag выбранного элемента StackPanel.

  string colorToUse = (this.comboColors.SelectedItem

      as StackPanel).Tag.ToString();

  ...

}

После запуска программы элемент