Прежде чем можно будет импортировать сложные графические данные (такие как векторная графика) в приложение WPF, графику понадобится преобразовать в данные путей. Чтобы проиллюстрировать, как это делается, возьмите пример файла изображения .svg с упомянутым выше знаком опасности лазерного излучения. Затем загрузите и установите инструмент с открытым кодом под названием Inkscape (из веб-сайта www.inkscape.org). С помощью Inkscape откройте файл LaserSign.svg из подкаталога Chapter_26. Вы можете получить запрос о модернизации формата. Установите настройки, как показано на рис. 26.12.

Следующие шаги поначалу покажутся несколько странными, но на самом деле они представляют собой простой способ преобразования векторных изображений в разметку XAML. Когда изображение приобрело желаемый вид, необходимо выбрать пункт меню File? Print (Файл?Печать). В открывшемся окне нужно ввести имя файла и выбрать место, где он должен быть сохранен, после чего щелкнуть на кнопке Save (Сохранить). В результате получается файл *.xps (или *.oxps).

На заметку! В зависимости от нескольких переменных среды в конфигурации системы сгенерированный файл будет иметь либо расширение .xps, либо расширение .oxps. В любом случае дальнейший процесс идентичен.

Форматы *.xps и *.oxps в действительности представляют собой архивы ZIP. Переименовав расширение в .zip, файл можно открыть в проводнике файлов (либо в 7-Zip или в предпочитаемой утилите архивации). Файл содержит иерархию папок, приведенную на рис. 26.13.

Необходимый файл находится в папке Pages (Documents/1/Pages) и называется 1.fpage. Откройте его в текстовом редакторе и скопируйте в буфер все данные кроме открывающего и закрывающего дескрипторов FixedPage. Данные путей затем можно поместить внутрь элемента Canvas главного окна в Kaxaml. В итоге изображение будет показано в окне XAML.

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

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

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

  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">

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

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

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

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

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

private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

  if (e.OriginalSource is Path p)

  {

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

  }

}

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