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

закрывающего дескрипторов FixedPage. Данные путей затем можно поместить внутрь элемента Canvas главного окна в Kaxaml. В итоге изображение будет показано в окне XAML.

На заметку! В последней версии Inkscape есть возможность сохранить файл в формате Microsoft XAML. К сожалению, на момент написания главы он не был совместим с WPF.

Импортирование графических данных в проект WPF

Создайте новый проект приложения WPF по имени InteractiveLaserSign. Измените значения свойств Height и Width элемента Window соответственно на 600 и 650 и замените элемент Grid элементом Canvas:

<Window x:Class="InteractiveLaserSign.MainWindow"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

  xmlns:local="clr-namespace:InteractiveLaserSign"

  mc:Ignorable="d"

  Title="MainWindow" Height="600" Width="650">

  <Canvas>

  </Canvas>

</Window>

Скопируйте полную разметку XAML из файла 1.fpage (исключая внешний дескриптор FixedPage) и вставьте ее в элемент управления Canvas внутри MainWindow. Просмотрев окно в режиме проектирования, легко удостовериться в том, что знак опасности лазерного излучения успешно воспроизводится в приложении.

Заглянув в окно Document Outline, вы заметите, что каждая часть изображения представлена как XAML-элемент Path. Если изменить размеры элемента Window, то качество изображения останется тем же самым безотносительно к тому, насколько большим сделано окно. Причина в том, что изображения, представленные с помощью элементов Path, визуализируются с применением механизма рисования и математики, а не за счет манипулирования пикселями.

Взаимодействие с изображением

Вспомните, что маршрутизируемое событие распространяется туннельным и пузырьковым образом, поэтому щелчок на любом элементе Path внутри Canvas может быть обработан обработчиком событий щелчка на Canvas. Модифицируйте разметку Canvas следующим образом:

<Canvas MouseLeftButtonDown="Canvas_MouseLeftButtonDown">

Добавьте обработчик событий с таким кодом:

private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

  if (e.OriginalSource is Path p)

  {

    p.Fill = new SolidColorBrush(Colors.Red);

  }

}

Запустите приложение и щелкните на линиях, чтобы увидеть эффекты.

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

Визуализация графических данных с использованием визуального уровня

Последний вариант визуализации графических данных с помощью WPF называется визуальным уровнем. Ранее уже упоминалось, что доступ к нему возможен только из кода (он не дружественен по отношению к разметке XAML). Несмотря на то что подавляющее большинство приложений WPF будут хорошо работать с применением фигур, рисунков и геометрических объектов, визуальный уровень обеспечивает самый быстрый способ визуализации крупных объемов графических данных. Визуальный уровень также может быть полезен, когда необходимо визуализировать единственное изображение в крупной области. Например, если требуется заполнить фон окна простым статическим изображением, тогда визуальный уровень будет наиболее быстрым способом решения такой задачи. Кроме того, он удобен, когда нужно очень быстро менять фон окна в зависимости от ввода пользователя или чего-нибудь еще.

Далее будет построена небольшая программа, иллюстрирующая основы использования визуального уровня.

Базовый класс Visual и производные дочерние классы

Абстрактный класс System.Windows.Media.Visual предлагает минимальный набор служб (визуализацию, проверку попадания, трансформации) для визуализации графики, но не предоставляет поддержку дополнительных невизуальных служб, которые могут приводить к разбуханию кода (события ввода, службы компоновки, стили и привязка данных). Класс Visual является абстрактным базовым классом. Для выполнения действительных операций визуализации должен применяться один из его производных классов. В WPF определено несколько подклассов Visual, в том числе DrawingVisual, Viewport3DVisual и ContainerVisual.

Рассматриваемый ниже пример сосредоточен только на DrawingVisual — легковесном классе рисования, который используется для визуализации фигур, изображений или текста.

Первый взгляд на класс DrawingVisual

Чтобы визуализировать данные на поверхности с применением класса DrawingVisual, понадобится выполнить следующие основные шаги:

• получить объект DrawingContext из DrawingVisual;

• использовать объект DrawingContext для визуализации графических данных.

Эти два шага представляют абсолютный минимум, необходимый для визуализации каких-то данных на поверхности. Тем не менее, когда нужно, чтобы визуализируемые графические данные реагировали на вычисления при проверке попадания (что важно для добавления взаимодействия с пользователем), потребуется также выполнить дополнительные шаги:

• обновить логическое и визуальное деревья, поддерживаемые контейнером, на котором производится визуализация;

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

Давайте исследуем последние два шага более подробно. Чтобы продемонстрировать применение класса DrawingVisual для визуализации двумерных данных, создайте в Visual Studio новый проект приложения WPF по имени RenderingWithVisuals. Первой целью будет использование класса DrawingVisual для динамического присваивания данных элементу управления Image из WPF. Начните со следующего обновления разметки XAML окна для обработки события Loaded:

<Window x:Class="RenderingWithVisuals.MainWindow"

      <!--omitted for brevity -->

      Title="Fun With Visual Layer" Height="450" Width="800"

      Loaded="MainWindow_Loaded">

Замените элемент Grid панелью StackPanel и добавьте в нее элемент Image:

<StackPanel Background="AliceBlue" Name="myStackPanel">

  <Image Name="myImage" Height="80"/>

</StackPanel>

Элемент управления Image пока не имеет значения в свойстве Source, т.к. оно будет устанавливаться во время выполнения. С событием Loaded связана работа по построению графических данных в памяти с применением объекта DrawingBrush. Удостоверьтесь в том, что файл MainWindow.cs содержит операторы using для следующих пространств имен:

using System;

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Imaging;

Вот реализация обработчика события Loaded:

private void MainWindow_Loaded(

  object sender, RoutedEventArgs e)

{

  const int TextFontSize = 30;

  // Создать объект System.Windows.Media.FormattedText.

   FormattedText text = new FormattedText(

    "Hello Visual Layer!",

    new System.Globalization.CultureInfo("en-us"),

    FlowDirection.LeftToRight,

    new Typeface(this.FontFamily, FontStyles.Italic,

      FontWeights.DemiBold, FontStretches.UltraExpanded),

    TextFontSize,

    Brushes.Green,

    null,

    VisualTreeHelper.GetDpi(this).PixelsPerDip);

  // Создать объект DrawingVisual и получить объект DrawingContext.

  DrawingVisual drawingVisual = new DrawingVisual();

  using(DrawingContext drawingContext =

    drawingVisual.RenderOpen())