Вопрос:
Я хочу использовать векторные изображения в моем WPF-приложении (для кнопок и меню). Как мне это сделать? Какие инструменты следует использовать? Может ли кто-нибудь показать мой полный пример?
Лучший ответ:Содержание
Инструменты для создания векторных изображений 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).
