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

Троелсен Эндрю

Необходимый файл находится в папке

Pages

(

Documents/1/Pages

) и называется

1.fpage

. Откройте его в текстовом редакторе и скопируйте в буфер все данные кроме открывающего и закрывающего дескрипторов

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

для визуализации графических данных.

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

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