Display DrawingBrush in canvas and keeping his proportions - wpf

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

Related

How to include an XAML icon in another XAML file

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

Wpf canvas grid with coordinates

I have following canvas Code:
<Canvas>
<Canvas.Background>
<DrawingBrush TileMode="Tile" Viewport="0,0,40,40"
ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,400,400"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Red" Thickness="1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Canvas.Background>
</Canvas>
This canvas generates a grid like you can find it on excel.Now I want to know if ist possible to generate the coordinates too. With cooridnates I mean that the first top row in the first fiels has a tiny text in it that says "A0" and the next one has "B0" and so every cell has coordinates like Excel.Would this be possible?

XAML graphic vector as image source

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 :(

Graph paper with elongated grid sections?

I am trying to make some Graph Paper using WPF using the DrawingBrush.
I found the following example on MSDN which is pretty close to what I want but not exactly. I want to do this is pure XAML. I am fairly new to WPF.
<DrawingBrush x:Key="GridTile"
Viewport="0,0,10,10"
ViewportUnits="Absolute"
TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Blue" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Red" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Currently this generates
I want to generate
with a width of 3cm and each row being 4mm
I will use this tile my background or rather the DrawingBrush TileMode takes care of that for me.

Change the size of the Brush so the Viewport has more height than width, and change the Geometry accordingly so the lines still appear 1px thick.
<Window x:Class="WPFTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF" SizeToContent="WidthAndHeight">
<Window.Resources>
<DrawingBrush x:Key="GridTile" Viewport="0,0,4,16"
ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.05 0,0.05Z" Brush="Black"/>
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1 0.1,0Z" Brush="Black"/>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Rectangle Height="512" Width="512" Stroke="Black" StrokeThickness="0"
Fill="{StaticResource GridTile}"/>
</Window>

How to make a brush that paints graph-paper-like squares for Windows Phone 8?

Here is the solution for WPF:
<DrawingBrush Viewport="0,0,20,20"
ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="LightBlue" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="LightBlue" />
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
But as I understand there is no DrawingBrush under WinPhone8.

You can use Path class instead of DrawingBrush.
Examples: msdn tutorial, geekCamp

Resources