I've downloaded the Visual Studio Image Library, which contains XAML icons. For example, this is the content of the file FolderClosed_16x.xaml:
<!-- This file was generated by the AiToXaml tool.-->
<!-- Tool Version: 14.0.22307.0 -->
<Viewbox Width="16" Height="16" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
<GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
<GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
I've added this file to my project in Visual Studio. How do I use the icon in another XAML file? Pasting these lines inside my XAML file works as expected, but I'd like to keep all icon files in a directory and reference them in multiple places. Is this possible without modifying the icon files?
I'd like to use it like this in my MainWindow.xaml, but this doesn't work:
<ContentControl Template="{StaticResource Icons/FolderClosed_16x.xaml}" />
You should define the Viewbox as a type or resource.
Create new `UserControl´ (Project->Add user Control (WPF) in Visual Studio) called FolderClosed_16x.
Replace the contents of the FolderClosed_16x.xaml file with this:
<Viewbox x:Class="WpfApp1.FolderClosed_16x"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="16" Height="16">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
<GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
<GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
Change the base type in FolderClosed_16x.xaml.cs to Viewbox:
public partial class FolderClosed_16x : Viewbox
{
public FolderClosed_16x()
{
InitializeComponent();
}
}
Reference the control as usual from another view:
<local:FolderClosed_16x />
This is the solution that I ended up using. I have one xaml file in my project that contains all the icons and they all have an x:Key:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Folder Closed -->
<Rectangle x:Key="FolderClosed" Width="16" Height="16" x:Shared="false">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
<GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
<GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
<!-- more icons go here -->
</ResourceDictionary>
In a file that uses the icon, I reference my icons file:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Icons.xaml"/>
<!-- other files can be referenced here -->
</ResourceDictionary.MergedDictionaries>
<!-- other resources can be defined here here -->
</ResourceDictionary>
</Window.Resources>
And in the same file, I use the icon like this:
<ContentControl Content="{StaticResource FolderClosed}" />
Now many graphics designers provide the images as xaml file not ico, png, ..., How can I use a xaml file as image source?
Thanks
From the MSDN
<Image>
<Image.Source>
<DrawingImage PresentationOptions:Freeze="True">
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
<EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="Blue" />
<GradientStop Offset="1.0" Color="#CCCCFF" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Pen>
<Pen Thickness="10" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
Instead of in-lining the GeometryDrawing you could refer to it as a static resource that you keep in a Resourcedictionary.
<Image>
<Image.Source>
<DrawingImage PresentationOptions:Freeze="True"
Drawing="{StaticResource myDrawing}">
</Image.Source>
</Image>
You will also find that you can show the drawing only once this way. So if you want this image to be present in the UI in multiple places, put the Image in a control template and style the controls with the template.
Thanks too all, this approach I know, my question was what happens when I have 100 xaml graphics files provided by a designer, now I have to extract the content from each file to move in a resource dictionary and set a key for each. I ask only if a more easy way as time.
Thank again too all.
I got a graphic like this
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="128" Height="128">
<Canvas Width="10240" Height="10240">
<Path Data="M5986 6814l828 -828c124,-124 328,-124 452,0l2428 2428c124,124 124,328 0,452l-828 828c-124,124 -328,124 -452,0l-2428 -2428c-124,-124 -124,-328 0,-452z" Fill="#EDC87E"/>
<Path Data="M6082 5442l412 412 -640 640 -412 -412c-534,401 -1197,638 -1916,638 -1764,0 -3194,-1430 -3194,-3194 0,-1764 1430,-3194 3194,-3194 1764,0 3194,1430 3194,3194 0,719 -237,1382 -638,1916zm-2556 -4471c-1411,0 -2555,1144 -2555,2555 0,1411 1144,2555 2555,2555 1411,0 2555,-1144 2555,-2555 0,-1411 -1144,-2555 -2555,-2555z" Fill="#808080"/>
</Canvas>
</Viewbox>
This can be user very easy as a content to a Content control, but to youse this for a control which requires Image source I cannot I have to transform to:
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M5986 6814l828 -828c124,-124 328,-124 452,0l2428 2428c124,124 124,328 0,452l-828 828c-124,124 -328,124 -452,0l-2428 -2428c-124,-124 -124,-328 0,-452z" Brush="#EDC87E">
<GeometryDrawing.Pen>
<Pen Thickness="1000" Brush="Blue"></Pen>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Geometry="M6082 5442l412 412 -640 640 -412 -412c-534,401 -1197,638 -1916,638 -1764,0 -3194,-1430 -3194,-3194 0,-1764 1430,-3194 3194,-3194 1764,0 3194,1430 3194,3194 0,719 -237,1382 -638,1916zm-2556 -4471c-1411,0 -2555,1144 -2555,2555 0,1411 1144,2555 2555,2555 1411,0 2555,-1144 2555,-2555 0,-1411 -1144,-2555 -2555,-2555z" Brush="#808080"/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
The work in to trivial :(
I use the SharpVector to convert icon.svg to icon.xaml.
This program generate a DrawingBrush like :
<DrawingBrush x:Key="Plus">
<DrawingBrush.Drawing>
<DrawingGroup xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DrawingGroup x:Name="DrawingLayer">
<DrawingGroup.ClipGeometry>
<RectangleGeometry Rect="0,0,88.582672,88.582672" />
</DrawingGroup.ClipGeometry>
<GeometryDrawing x:Name="path3767" Brush="#FF4D4D4D">
<GeometryDrawing.Geometry>
<PathGeometry FillRule="Nonzero" Figures="M36.512901,88.58266L36.512901,51.833165 8.88026306711254E-07,51.833165 8.88026306711254E-07,36.47519 36.512901,36.47519 36.512901,-1.76623310039759E-05 52.069777,-1.76623310039759E-05 52.069777,36.47519 88.582677,36.47519 88.582677,51.833165 52.069777,51.833165 52.069777,88.58266z" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingGroup>
</DrawingBrush.Drawing>
for all my icons. But now i want to display my DrawingBrush in a Canvas.Background, it's ok with that :
<Grid Background="{DynamicResource Plus}" Height="200" Width="200" Margin="5">
But i want to keep picture proportions stock in the Rectangle Geometry, for example here Rect="0,0,88.582672,88.582672".
How i can do that?
Gat
Try setting the Stretch property of DrawingBrush to uniform:
<DrawingBrush x:Key="Plus" Stretch="Uniform">
...