Как создать векторные изображения для WPF

Вопрос:Я хочу использовать векторные изображения в моем WPF-приложении (для кнопок и меню). Как мне это сделать? Какие инструменты следует использовать? Может ли кто-нибудь показать мой полный пример? Лучший ответ: Инструменты для создания векторных изображений XAML Вероятно, лучшим приложением для создания векторных изображений XAML является Microsoft Expression Design. Его бесплатный инструмент, который можно загрузить из https://www.microsoft.com/en-gb/download/details.aspx?id=36180

Вопрос:

Я хочу использовать векторные изображения в моем WPF-приложении (для кнопок и меню). Как мне это сделать? Какие инструменты следует использовать? Может ли кто-нибудь показать мой полный пример?

Лучший ответ:Содержание

  1. Инструменты для создания векторных изображений XAML
  2. Если вы используете Inkscape
  3. Пример

Инструменты для создания векторных изображений XAML

Вероятно, лучшим приложением для создания векторных изображений XAML является Microsoft Expression Design. Его бесплатный инструмент, который можно загрузить из https://www.microsoft.com/en-gb/download/details.aspx?id=36180

Когда вы установили Expression Design, запустите его и выберите Edit → Options → Clipboards (XAML). Измените формат буфера обмена на словарь ресурсов XAML WPF. Также измените Группировать по на Документ (иначе каждый слой будет изображением).

Редактируйте изображение в Expression Design. Когда вы закончите, выберите все и откройте меню Изменить, а затем Скопируйте XAML. Вставьте это в соответствующий XAML файл. В приведенном ниже примере вы увидите, как это должно выглядеть. Следует отметить, что вам нужно изменить тег DrawingImage на DrawingBrush.

Когда вы рисуете изображение, установите размер документа в размере, который требуется в вашем WPF-приложении (например, 32×32 пикселя). Это не нужно, но облегчить работу. Прежде чем копировать изображение в XAML, вы, вероятно, захотите сделать прозрачный прямоугольник с тем же размером, что и документ (в противном случае поля могут быть неправильными). Или вы можете добавить это вручную в дочерние элементы группы чертежей:

<GeometryDrawing Brush=»#00FFFFFF» Geometry=»M 0,0L 32,0L 32,32L 0,32L 0,0 Z » />

Если вы используете Inkscape

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

Но в коротких формах есть поддержка входов, в то время как геометрия – просто чистый рисунок и поэтому более легкий.

Inkscape генерирует файлы в формате формы, что хорошо для некоторых случаев, но не для изображений, которые должны использоваться в кнопках и аналогичных. Итак, вы хотите получить изображения в Expression Design. Вы можете сделать это, сохранив изображение как PDF файл, измените расширение файла на AI, а затем в Expression Design используйте Файл, Импортировать файл Adobe Illustrator. Использование EPS – это еще один вариант.

Большинство вещей могут быть импортированы в Expression Design. Но, к примеру, это могут быть некоторые проблемы с границами. Когда у вас есть то, что вы хотите для Expression Design, вероятно, лучше сделать всю работу там. При необходимости вы можете экспортировать свои изображения в SVG, который может быть использован в Inkscape, который обычно работает без проблем.

Пример

Когда вы создали XAML-код для изображения, он довольно прямолинейный. Ниже приведен пример, где векторное изображение используется в меню и две кнопки.

Если вы хотите нарисовать очень тонкую линию (1 пиксель), вы можете добавить RenderOptions.EdgeMode=»Aliased» и SnapsToDevicePixels=»True» к атрибутам элемента управления, который рисует изображение.

Еще одна вещь, о которой стоит иметь в виду, – это то, что нужно делать, когда кнопка отключена. В приведенном ниже примере изображение выглядит одинаково независимо от того, включена ли кнопка или нет (это верно и для обычных растровых изображений). Изменение непрозрачности до 50% – это один подход, который выглядит вполне нормально. Преобразование его в серый цвет сложнее, но для этого есть решения.

<Window xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation» xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml» xmlns:i=»http://schemas.microsoft.com/expression/2010/interactivity» xmlns:ei=»http://schemas.microsoft.com/expression/2010/interactions» x:Class=»VectorGraphicsDemo.MainWindow» Title=»MainWindow» Height=»350″ Width=»616″> <Window.Resources> <!— Note: When Expression Designed generated the code it was generated as DrawingBrush. Remember to change this to DrawingImage. —> <DrawingImage x:Key=»TestImage»> <DrawingImage.Drawing> <DrawingGroup> <GeometryDrawing Brush=»#00FFFFFF» Geometry=»M 0,0L 32,0L 32,32L 0,32L 0,0 Z » /> <GeometryDrawing Brush=»#FFFF0000″ Geometry=»F1 M 6.25,3.97918L 23.125,3.97918L 23.125,16.1458L 6.25,16.1458L 6.25,3.97918 Z «> <GeometryDrawing.Pen> <Pen LineJoin=»Round» Brush=»#FF000000″ /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Brush=»#FF00C800″ Geometry=»F1 M 21.8542,11.0625C 26.399,11.0625 30.0833,14.7468 30.0833,19.2917C 30.0833,23.8365 26.399,27.5208 21.8542,27.5208C 17.3093,27.5208 13.625,23.8365 13.625,19.2917C 13.625,14.7468 17.3093,11.0625 21.8542,11.0625 Z «> <GeometryDrawing.Pen> <Pen LineJoin=»Round» Brush=»#FF000000″ /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Brush=»#FFFFFF00″ Geometry=»F1 M 16.8731,14.9035L 11.9668,16.2498L 8.58953,12.5761L 8.25831,17.6042L 3.62852,19.7405L 8.33013,21.5017L 8.84603,26.4958L 12.083,22.5562L 17.0316,23.5064L 14.3306,19.3103L 16.8731,14.9035 Z «> <GeometryDrawing.Pen> <Pen LineJoin=»Round» Brush=»#FF000000″ /> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> <DrawingImage x:Key=»TestThinLineImage»> <DrawingImage.Drawing> <DrawingGroup> <GeometryDrawing Brush=»#00FFFFFF» Geometry=»M 0,0L 32,0L 32,32L 0,32L 0,0 Z » /> <GeometryDrawing Geometry=»F1 M 2,2L 30,2L 30,30L 2,30L 2,2 Z «> <GeometryDrawing.Pen> <Pen LineJoin=»Round» Brush=»#FF000000″ /> </GeometryDrawing.Pen> </GeometryDrawing> <GeometryDrawing Geometry=»F1 M 7,8L 25,8L 25,24L 7,24L 7,8 Z «> <GeometryDrawing.Pen> <Pen LineJoin=»Round» Brush=»#FFFF0000″ /> </GeometryDrawing.Pen> </GeometryDrawing> </DrawingGroup> </DrawingImage.Drawing> </DrawingImage> </Window.Resources> <Grid> <!— Menu with image —> <Menu HorizontalAlignment=»Stretch» VerticalAlignment=»Top»> <MenuItem Header=»Hello»> <MenuItem Header=»World»> <MenuItem.Icon> <Image Source=»{StaticResource TestImage}» /> </MenuItem.Icon> </MenuItem> </MenuItem> </Menu> <!— Small standard image —> <Button HorizontalAlignment=»Left» Margin=»12,66,0,0″ VerticalAlignment=»Top» Width=»142″ Height=»43″> <StackPanel Orientation=»Horizontal»> <Image x:Name=»imageSmall» Source=»{StaticResource TestImage}» Height=»32″ Width=»32″ /> <Label VerticalAlignment=»Center» Content=»Small image» /> </StackPanel> </Button> <!— Large standard image —> <Button HorizontalAlignment=»Left» Margin=»12,149,0,0″ VerticalAlignment=»Top» Width=»142″ Height=»75″> <StackPanel Orientation=»Horizontal»> <Image x:Name=»imageLarge» Source=»{StaticResource TestImage}» Height=»64″ Width=»64″> </Image> <Label VerticalAlignment=»Center» Content=»Large image» /> </StackPanel> </Button> <!— Small image with thin line with antialising enabled — looks bad! —> <Button HorizontalAlignment=»Left» Margin=»180,67,0,0″ VerticalAlignment=»Top» Width=»177″ Height=»43″> <StackPanel Orientation=»Horizontal»> <Image x:Name=»imageSmall1″ Source=»{StaticResource TestThinLineImage}» Height=»32″ Width=»32″ /> <Label VerticalAlignment=»Center» Content=»Small thin anti alias» /> </StackPanel> </Button> <!— Large image with thin line with antialising enabled — looks bad! —> <Button HorizontalAlignment=»Left» Margin=»180,149,0,0″ VerticalAlignment=»Top» Width=»177″ Height=»75″> <StackPanel Orientation=»Horizontal»> <Image Source=»{StaticResource TestThinLineImage}» Height=»64″ Width=»64″> </Image> <Label VerticalAlignment=»Center» Content=»Large thin anti alias» /> </StackPanel> </Button> <!— Small image with thin line with antialising disabled — looks OK! —> <Button HorizontalAlignment=»Left» Margin=»391,67,0,0″ VerticalAlignment=»Top» Width=»177″ Height=»43″> <StackPanel Orientation=»Horizontal»> <Image SnapsToDevicePixels=»True» RenderOptions.EdgeMode=»Aliased» Source=»{StaticResource TestThinLineImage}» Height=»32″ Width=»32″ /> <Label VerticalAlignment=»Center» Content=»Small thin alias» /> </StackPanel> </Button> <!— Large image with thin line with antialising disabled — looks OK! —> <Button HorizontalAlignment=»Left» SnapsToDevicePixels=»True» RenderOptions.EdgeMode=»Aliased» Margin=»391,149,0,0″ VerticalAlignment=»Top» Width=»177″ Height=»75″> <StackPanel Orientation=»Horizontal»> <Image Source=»{StaticResource TestThinLineImage}» Height=»64″ Width=»64″ /> <Label VerticalAlignment=»Center» Content=»Large thin alias» /> </StackPanel> </Button> </Grid> Ответ №1

Если у вас есть VS2013, у вас должен быть Blend. Если нет, вы можете добавить его из “Установка и удаление программ”, изменив установку Studio и установив флажок.

После того, как у вас есть Blend, вы можете создавать векторные изображения, используя несколько слишком простые инструменты, которые он предоставляет; но более полезной является его способность импортировать файлы Adobe Illustrator. Это все еще приложение для векторной графики для работы. Это здорово, если у вас есть дизайнер для создания активов или у вас есть навыки, чтобы сделать это самостоятельно.

Если вам нужно что-то между основами Blend и All-singing Illustrator, Expression Design достаточно приличный вариант (как уже упоминалось в @pek).

Оцените статью
Добавить комментарий