WPF ButtonStyle with PathGeometry as an icon - wpf

How I can add PathGeometry as an Icon to the style of the button/radbutton?
In resources I have for example:
<PathGeometry x:Key="HomeIconData">F1 M 22,19L 24,19L 24,57L 22,57L 22,19 Z M 26,57L 26,19.0001L 53.9999,19.0001L 53.9999,57L 26,57 Z M 30,24L 30,27L 50,27L 50,24L 30,24 Z M 30,32L 30,35L 33,35L 33,32L 30,32 Z M 36,32L 36,35L 49,35L 49,32L 36,32 Z M 30,40L 30,43L 33,43L 33,40L 30,40 Z M 36,40L 36,43L 48,43L 48,40L 36,40 Z M 30,48L 30,51L 33,51L 33,48L 30,48 Z M 36,48L 36,51L 50,51L 50,48L 36,48 Z</PathGeometry>
With Path I add this to the style:
<Grid Margin="0,30,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="36" Width="41">
<Path HorizontalAlignment="Center" Data="{Binding Source={StaticResource path1}, Path=Data}" Fill="#FFFFFFFF" Height="27" Stretch="Fill" Width="28.167" VerticalAlignment="Bottom" />
</Grid>
How can I do the same with PathGeometry?
Thanks

This should work:
<Path Data="{StaticResource HomeIconData}" ... />

Related

canvas button content disappears

I've got some weird behavior in a project i'm working on.
Code in question:
<Button cal:Message.Attach="DeleteThruster($dataContext)" ToolTip="Delete">
<Button.Content>
<ContentPresenter Content="{StaticResource appbar_delete}">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Button.Content>
</Button>
<Button Margin="5,0,20,0" cal:Message.Attach="CopyThruster($dataContext)" ToolTip="Copy">
<Button.Content>
<ContentPresenter Content="{StaticResource appbar_page_copy}">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Button.Content>
</Button>
<Canvas x:Key="appbar_delete" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="27.7083" Height="35.625" Canvas.Left="24.1458" Canvas.Top="19.7917" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 25.3333,23.75L 50.6667,23.75C 51.5411,23.75 51.8541,27.3125 51.8541,27.3125L 24.1458,27.3125C 24.1458,27.3125 24.4589,23.75 25.3333,23.75 Z M 35.625,19.7917L 40.375,19.7917C 40.8122,19.7917 41.9583,20.9378 41.9583,21.375C 41.9583,21.8122 40.8122,22.9584 40.375,22.9584L 35.625,22.9584C 35.1878,22.9584 34.0416,21.8122 34.0416,21.375C 34.0416,20.9378 35.1878,19.7917 35.625,19.7917 Z M 27.7083,28.5L 48.2916,28.5C 49.1661,28.5 49.875,29.2089 49.875,30.0834L 48.2916,53.8334C 48.2916,54.7078 47.5828,55.4167 46.7083,55.4167L 29.2917,55.4167C 28.4172,55.4167 27.7083,54.7078 27.7083,53.8334L 26.125,30.0834C 26.125,29.2089 26.8339,28.5 27.7083,28.5 Z M 30.0833,31.6667L 30.4792,52.25L 33.25,52.25L 32.8542,31.6667L 30.0833,31.6667 Z M 36.4167,31.6667L 36.4167,52.25L 39.5833,52.25L 39.5833,31.6667L 36.4167,31.6667 Z M 43.1458,31.6667L 42.75,52.25L 45.5208,52.25L 45.9167,31.6667L 43.1458,31.6667 Z "/>
</Canvas>
For some odd reason when i run my program and click on the copy button previous buttons will lose their content, which is a canvas image. What makes things even more irritating, is that it renders just fine in the designer.
Does this buggy behavior ring a bell to anyone?
Source code available here:
GitHub project / specific file
I had the same issue when using Icons made with a canvas. The solution to my problem was adding x:Shared="False" to my Canvas.
Eg.
<Canvas x:Key="appbar_delete" x:Shared="False" .../>
Hope that that will fix it. Just out of curiosity, for what are you going to use your program? Looks interesting...
Regards
SanHolo

Scaling complex SVG paths in WPF XAML

I have here a set of inordinately complex scalable vector graphic icons which were created using Illustrator, and imported into my WPF app using the Expression Blend and Inkscape hack:
Convert SVG to XAML
I tried various method of importing the original icons, this is above approach is the only way they would import correctly in my app.
So now I need to make my app work on a new smaller resolution, and even when in a ViewBox these icons will not scale.
If I remove the width/height attributes it ruins the SVG and the icon essentially disappears.
<Style x:Key="BenefitsIconFlexBox" TargetType="{x:Type Viewbox}">
<Setter Property="MaxHeight" Value="240"/>
<Setter Property="Height" Value="201"/>
<Setter Property="Margin" Value="10,0,0,10"/>
</Style>
...
<Viewbox Style="{StaticResource BenefitsIconFlexBox}">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Path Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Canvas.Left="60.588" Canvas.Top="46.828">
<Path Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Viewbox>
I am open to using transforms or some c# logic to do the resolution math and scaling, but would prefer to use scaling with the view box.
I am not sure why the SVG goes gonzo when the dimensional data is removed, but surely this is the problem. I feel like if I can get rid of the height and width attributes this would scale.
Any suggestions are welcomed! Thank you.
ViewBox has no concern of it's children's preset sizing attributes. Those are only used as the base but ViewBox is what does the scaling accordingly. So if I say remove the Height/MaxHeight setter's from your associated style template and do the following, notice each ViewBox has a different Height. You could also make a style of the whole thing and avoid the repetitive code but for the sake of a quickie dirty concept example;
<StackPanel>
<Viewbox Height="20" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="50" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="100" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
</StackPanel>
Now say you have that ViewBox placed in say a Grid cell with * sizing on the column/row and you DON'T set a Height/Width value on the ViewBox. Then it will fill whatever space is allowed to it. As the viewing medium (large screen, medium screen, little screen, doesn't matter) changes, it will size itself accordingly using the measurements of it's parent as it's boundary.

Where can I find custom Geometry Shapes?

I'm looking for resources (geometry shapes) for WPF
A website like iconfinder.com for instance...
Is there any website for this??
I'd like to have shapes replacing my icons like (save icon, new icon, ...)
Some examples :
<Path Stretch="Fill" Fill="Black" HorizontalAlignment="Left"
Width="12" Height="12" Data="F1 M 151,217L 152,217L 154.5,219.5L 157,217L 158,217L 158,218L 155.5,220.5L 158,223L 158,224L 157,224L 154.5,221.5L 152,224L 151,224L 151,223L 153.5,220.5L 151,218L 151,217 Z">
</Path>
<Separator></Separator>
<Path Data="M0,0 L8,0 8,1 8,2 0,2 0,1 z" Stretch="Uniform" Fill="Black" HorizontalAlignment="Left"
Width="12" Height="12"></Path>
<Separator></Separator>
<Path Data="F1 M 34,17L 43,17L 43,23L 34,23L 34,17 Z M 35,19L 35,22L 42,22L 42,19L 35,19 Z" Stretch="Fill" Fill="Black" HorizontalAlignment="Left"
Width="12" Height="12"></Path>
<Separator></Separator>
<Path Stretch="Fill" Fill="Black" HorizontalAlignment="Left"
Width="12" Height="12" Data="M1,4.9996096 L1,7.000219 7,6.999219 7,5.001 2,5.001 2,4.9996096 z M3,2.0014141 L3,3.0000001 8,3.0000001 8,4.0000001 8,4.0008045 9,4.0008045 9,2.0014141 z M2,0 L10,0 10,0.0010234118 10,1.0000001 10,5.001 8,5.001 8,7.9990235 0,8.0000239 0,4.0000001 0,3.0009998 0,3.0000001 2,3.0000001 2,1.0000001 2,0.0010234118 z"></Path>
You can try this free tool called Metro Studio http://www.syncfusion.com/downloads/metrostudio
has a huge collection of icons that you can use in different formats (xaml being one of them)
You can also try http://www.xamalot.com/ which contains a lot of vector graphics

Set the icon color in a MahApp application

I want to set the icon color in a MahApp application, but the brush is not working. In this example the icoun should be white, but still it is black.
<Rectangle Width="20" Height="20">
<Rectangle.Resources>
<SolidColorBrush x:Key="BlackBrush" Color="White" />
</Rectangle.Resources>
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" />
</Rectangle.Fill>
</Rectangle>
This is the resource icons.xml file in my app.
<Canvas Width="48" Height="48" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0" x:Key="appbar_cupcake">
<Path Width="24" Height="25" Canvas.Left="13" Canvas.Top="11" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 32,14C 33.1046,14 34,14.8954 34,16C 34,16.3643 33.9026,16.7058 33.7324,17L 34,17C 35.1046,17 36,17.8954 36,19C 36,20.1046 35.1046,21 34,21L 35,21C 36.1046,21 37,21.8954 37,23C 37,24.1046 36.1046,25 35,25L 15,25C 13.8954,25 13,24.1046 13,23C 13,21.8954 13.8954,21 15,21L 16,21C 14.8954,21 14,20.1046 14,19C 14,17.8954 14.8954,17 16,17L 16.2676,17C 16.0974,16.7058 16,16.3643 16,16C 16,14.8954 16.8954,14 18,14C 19,14 21,12 25,11C 29,14 31,14 32,14 Z M 15,26L 35,26L 32,36L 18,36L 15,26 Z " />
</Canvas>
What I'm doing wrong?
If you want to dynamically set the Fill color, you can do that by setting the Fill property. As you can see, you are already using the Fill property for the VisualBrush. Fortunately you can use the VisualBrush also in the OpacityMask property.
<Rectangle Fill="Black">
<Rectangle.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_cupcake}" Stretch="Fill" />
</Rectangle.OpacityMask>
</Rectangle>
Hope that helps.

Use Vector Graphics XAML file as an ImageSource in WPF RibbonButton

I converted an Adobe Illustrator file to .xaml using Expression Design 4. Now want to take the ControlTemplate that was generated and use this as as an ImageProperty in the LargeImageSource or SmallImageSource in the MS RibbonControl.RibbonButton. There is an images resource dictionary that has been created and the following code is placed there:
<Viewbox x:Uid="Viewbox_1" Stretch="Uniform">
<Canvas x:Uid="Canvas_1" Width="224" Height="224" Clip="F1 M 0,0L 224,0L 224,224L 0,224L 0,0">
<Canvas x:Uid="Layer_1" x:Name="Layer_1" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0"/>
<Canvas x:Uid="Layer_1_0" x:Name="Layer_1_0" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0">
<Path x:Uid="Path" x:Name="Path" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0.00012207" Stretch="Fill" Data="F1 M 4.8,0.00012207C 2.16,0.00012207 0,2.1468 0,4.77348L 0,219.228C 0,221.853 2.16,224 4.8,224L 219.201,224C 221.84,224 224,221.853 224,219.229L 224,4.77348C 224,2.1468 221.84,0.00012207 219.201,0.00012207L 4.8,0.00012207 Z ">
<Path.Fill>
<LinearGradientBrush x:Uid="LinearGradientBrush_1" StartPoint="0.500003,1" EndPoint="0.500003,3.06538e-006">
<LinearGradientBrush.GradientStops>
<GradientStop x:Uid="GradientStop_1" Color="#FFFDEFB3" Offset="0"/>
<GradientStop x:Uid="GradientStop_2" Color="#FFF8E291" Offset="0.134848"/>
<GradientStop x:Uid="GradientStop_3" Color="#FFF4D570" Offset="0.5"/>
<GradientStop x:Uid="GradientStop_4" Color="#FFF8E291" Offset="0.865152"/>
<GradientStop x:Uid="GradientStop_5" Color="#FFFDEFB3" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Uid="Path_1" x:Name="Path_1" Width="226.667" Height="226.667" Canvas.Left="-1.33333" Canvas.Top="-1.33333" Stretch="Fill" StrokeThickness="2.66667" StrokeMiterLimit="2.75" Stroke="#FF666666" Data="F1 M 224,219.229C 224,221.853 221.84,224 219.2,224L 4.80134,224C 2.16,224 0,221.853 0,219.228L 0,4.77332C 0,2.14799 2.16,0 4.80134,0L 219.2,0C 221.84,0 224,2.14799 224,4.77332L 224,219.229 Z "/>
<Path x:Uid="Line" x:Name="Line" Width="206.112" Height="8" Canvas.Left="10.2715" Canvas.Top="164.591" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF2A3B8E" Data="F1 M 14.2715,168.591L 212.383,168.591"/>
<Path x:Uid="Path_2" x:Name="Path_2" Width="42.3867" Height="42.3853" Canvas.Left="48.3855" Canvas.Top="147.399" Stretch="Fill" Fill="#FFCF1F3C" Data="F1 M 90.7721,168.594C 90.7721,180.295 81.2868,189.785 69.5775,189.785C 57.8735,189.785 48.3855,180.295 48.3855,168.594C 48.3855,156.887 57.8735,147.399 69.5775,147.399C 81.2868,147.399 90.7721,156.887 90.7721,168.594 Z "/>
<Path x:Uid="Path_3" x:Name="Path_3" Width="42.3867" Height="42.384" Canvas.Left="133.555" Canvas.Top="147.399" Stretch="Fill" Fill="#FF1B75BB" Data="F1 M 175.941,168.594C 175.941,180.295 166.456,189.783 154.747,189.783C 143.043,189.783 133.555,180.295 133.555,168.594C 133.555,156.887 143.043,147.399 154.747,147.399C 166.456,147.399 175.941,156.887 175.941,168.594 Z "/>
<Path x:Uid="Line_4" x:Name="Line_4" Width="68.1093" Height="10.6667" Canvas.Left="119.548" Canvas.Top="64.672" Stretch="Fill" StrokeThickness="10.6667" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Data="F1 M 124.881,70.0053L 182.324,70.0053"/>
<Path x:Uid="Line_5" x:Name="Line_5" Width="10.6667" Height="76.748" Canvas.Left="148.51" Canvas.Top="32.187" Stretch="Fill" StrokeThickness="10.6667" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Data="F1 M 153.844,103.602L 153.844,37.5204"/>
<Path x:Uid="Path_6" x:Name="Path_6" Width="35.5831" Height="28.2761" Canvas.Left="136.055" Canvas.Top="13.6534" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 167.578,37.6095L 153.61,17.7814C 153.485,17.6081 153.286,17.6108 153.167,17.7895L 140.109,37.6041C 139.993,37.7828 140.07,37.9295 140.285,37.9295L 167.413,37.9295C 167.627,37.9295 167.702,37.7868 167.578,37.6095 Z "/>
<Path x:Uid="Path_7" x:Name="Path_7" Width="35.5846" Height="28.2777" Canvas.Left="135.783" Canvas.Top="98.1695" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 167.137,102.169L 140.01,102.169C 139.794,102.169 139.718,102.315 139.843,102.489L 153.813,122.315C 153.935,122.493 154.134,122.491 154.253,122.309L 167.313,102.497C 167.431,102.317 167.35,102.169 167.137,102.169 Z "/>
<Path x:Uid="Path_8" x:Name="Path_8" Width="28.2794" Height="35.5851" Canvas.Left="180.031" Canvas.Top="52.7121" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 184.359,56.7671C 184.182,56.6484 184.031,56.7284 184.031,56.9431L 184.031,84.0724C 184.031,84.2844 184.174,84.3617 184.351,84.2377L 204.179,70.2684C 204.357,70.1431 204.354,69.9444 204.174,69.8284L 184.359,56.7671 Z "/>
<Path x:Uid="Path_9" x:Name="Path_9" Width="28.2777" Height="35.5834" Canvas.Left="100.22" Canvas.Top="51.6494" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 124.169,83.1772C 124.349,83.2972 124.497,83.2159 124.497,83.0025L 124.497,55.8745C 124.497,55.6599 124.355,55.5865 124.176,55.7079L 104.348,69.6759C 104.175,69.8025 104.176,69.9999 104.357,70.1172L 124.169,83.1772 Z "/>
</Canvas>
</Canvas>
</Viewbox>
Currently we are using bitmaps with png files as the image source, but now want to use the above xaml files.
Thank you in advance for any help.
Bill
Use Expression Blend to convert this to a DrawingImage:
Place this XAML in some file where you can see it in the designer.
Select the Viewbox.
Click Tools > Make Brush Resource > Make Drawing Brush.
From the created brush, extract the root DrawingGroup and give it some key.
Create a DrawingImage and assign the Drawing property to the above DrawingGroup.
Assign the DrawingImage to the {Large, Small}ImageSource property.

Resources