WPF use Canvas as ImageSource - wpf

I am new to WPF and trying to build a basic app with a toolbar and icons. I am testing XamRibbon from Infragistics and ButtonTool that shows on the Ribbon require ImageSource to show an image like so:
<igRibbon:ButtonTool Caption="Edit"
igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge"
LargeImage="{StaticResource stop}"
SmallImage="{StaticResource stop}" />
I have a XAML icon defined in my dictionary with key 'stop' but the icons I am using are all in Canvas form like this:
<Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
<Canvas Clip="M15.82,31.2118l2.0148,-3.8306l-0.0332,-0.0332l0.1068,-0.1068l0.5615,-1.0675l0.253,0.253l8.5884,-8.5885l-0.0112,-0.0111l1.6101,-1.5876c0.4557,-0.4557,0.923,-0.5523,1.234,-0.5523c0.311,0,0.7784,0.0967,1.239,0.5572l0.6169,0.6168V0H0v32h15.7137C15.656,31.7398,15.6889,31.4614,15.82,31.2118z">
<Canvas>
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform X="-1" Y="-1"/>
</TransformGroup>
</Canvas.RenderTransform>
<Polygon Points="17,28 17,24.5 15,24.5 15,28 3,28 3,30 29,30 29,28" Fill="#4EA17E" StrokeLineJoin="Miter"/>
<Path Data="M18.475,31h-4.9c-0.3038,0,-0.575,-0.1962,-0.575,-0.5v-2.95c0,-0.3038,0.2712,-0.55,0.575,-0.55h4.9c0.3038,0,0.55,0.2462,0.55,0.55V30.5C19.025,30.8038,18.7788,31,18.475,31z" Fill="#797979"/>
<Path Data="M28,1H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1V2C29,1.4477,28.5523,1,28,1zM7,6H5V3h2V6zM28,9H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1v-5C29,9.4477,28.5523,9,28,9zM7,14H5v-3h2V14zM28,17H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1v-5C29,17.4477,28.5523,17,28,17zM7,22H5v-3h2V22z" Fill="#3E79B4"/>
<Path Data="M7,22H5v-3h2V22zM7,11H5v3h2V11zM7,3H5v3h2V3z" Fill="#FFFFFF"/>
</Canvas>
</Canvas>
<Canvas>
<Path Data="M19.2158,27.348l9.0199,-9.0199l2.1233,2.1233l-9.0199,9.0199L19.2158,27.348zM29.6123,16.9515c0.3525,-0.3525,0.7113,-0.3525,1.0638,0l1.0596,1.0596c0.3525,0.3525,0.3525,0.7113,0,1.0638l-0.8743,0.8743l-2.1388,-2.1202L29.6123,16.9515zM16.7052,31.677l2.0176,-3.8361l2.1233,2.1233l-3.8361,2.0176c-0.061,0.0321,-0.1358,0.0207,-0.1846,-0.028l-0.0923,-0.0923C16.6845,31.8128,16.6732,31.738,16.7052,31.677z" Fill="#3E79B4"/>
</Canvas>
How can I convert Canvas XAML to something that can be used as ImageSource like a DrawingImage for example? I hope this makes sense.

I don't use Infragistics controls, but I believe they follow the standard WPF controls.
I used image control and try to display your canvas path image.
define the Geometry from your canvas path in resource
<Geometry x:Key="StopGeometry">M13,11.3814v18.115c0.0083,0.2845,0.2134,0.5036,0.4896,0.5036h4c0.2807,0,0.5104,-0.2297,0.5104,-0.5104v-18.088l7.6585,7.6695c0.1259,0.1261,0.3415,0.0369,0.3415,-0.1413v-6.2525c0,-0.2125,-0.0845,-0.4162,-0.2349,-0.5663l-9.934,-9.9139c-0.2999,-0.2654,-0.4015,-0.2654,-0.6944,0.0157L5.235,12.0908c-0.1504,0.1501,-0.235,0.3539,-0.235,0.5664v6.2414c0,0.1782,0.2154,0.2674,0.3414,0.1414L13,11.3814z</Geometry>
in XAML
<Image Height="100" Width="100">
<Image.Source>
<DrawingImage >
<DrawingImage.Drawing>
<GeometryDrawing Brush="#3E79B4" Geometry="{StaticResource StopGeometry}"/>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>

I used the Blend for Visual studio to convert your Canvas as DrawingBrush. Now I can simply use what Blend Gave me. Only copy and paste I did.
<Image Height="32" Width="32">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup ClipGeometry="M15.82,31.2118L17.8348,27.3812 17.8016,27.348 17.9084,27.2412 18.4699,26.1737 18.7229,26.4267 27.3113,17.8382 27.3001,17.8271 28.9102,16.2395C29.3659,15.7838 29.8332,15.6872 30.1442,15.6872 30.4552,15.6872 30.9226,15.7839 31.3832,16.2444L32.0001,16.8612 32.0001,0 0,0 0,32 15.7137,32C15.656,31.7398,15.6889,31.4614,15.82,31.2118z">
<DrawingGroup>
<DrawingGroup.Transform>
<MatrixTransform Matrix="1,0,0,1,-1,-1" />
</DrawingGroup.Transform>
<GeometryDrawing Brush="#FF4EA17E" Geometry="M17,28 L17,24.5 15,24.5 15,28 3,28 3,30 29,30 29,28 z" />
<GeometryDrawing Brush="#FF797979" Geometry="M18.475,31L13.575,31C13.2712,31,13,30.8038,13,30.5L13,27.55C13,27.2462,13.2712,27,13.575,27L18.475,27C18.7788,27,19.025,27.2462,19.025,27.55L19.025,30.5C19.025,30.8038,18.7788,31,18.475,31z" />
<GeometryDrawing Brush="#FF3E79B4" Geometry="M28,1L4,1C3.4477,1,3,1.4477,3,2L3,7C3,7.5523,3.4477,8,4,8L28,8C28.5523,8,29,7.5523,29,7L29,2C29,1.4477,28.5523,1,28,1z M7,6L5,6 5,3 7,3 7,6z M28,9L4,9C3.4477,9,3,9.4477,3,10L3,15C3,15.5523,3.4477,16,4,16L28,16C28.5523,16,29,15.5523,29,15L29,10C29,9.4477,28.5523,9,28,9z M7,14L5,14 5,11 7,11 7,14z M28,17L4,17C3.4477,17,3,17.4477,3,18L3,23C3,23.5523,3.4477,24,4,24L28,24C28.5523,24,29,23.5523,29,23L29,18C29,17.4477,28.5523,17,28,17z M7,22L5,22 5,19 7,19 7,22z" />
<GeometryDrawing Brush="White" Geometry="M7,22L5,22 5,19 7,19 7,22z M7,11L5,11 5,14 7,14 7,11z M7,3L5,3 5,6 7,6 7,3z" />
</DrawingGroup>
</DrawingGroup>
<GeometryDrawing Brush="#FF3E79B4" Geometry="M19.2158,27.348L28.2357,18.3281 30.359,20.4514 21.3391,29.4713 19.2158,27.348z M29.6123,16.9515C29.9648,16.599,30.3236,16.599,30.6761,16.9515L31.7357,18.0111C32.0882,18.3636,32.0882,18.7224,31.7357,19.0749L30.8614,19.9492 28.7226,17.829 29.6123,16.9515z M16.7052,31.677L18.7228,27.8409 20.8461,29.9642 17.01,31.9818C16.949,32.0139,16.8742,32.0025,16.8254,31.9538L16.7331,31.8615C16.6845,31.8128,16.6732,31.738,16.7052,31.677z" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
I think this is the easiest solution.

Related

How to create and use ResourceDictionary of external XAML images

I would like to use icons from Visual Studio icon set for a WPF app and I would like to do it properly using ResourceDictionaries, but it seems more challenging than I thought.
The example icon is a ViewBox provided in a separate XAML file, it's named home_16x.xaml and the XAML content looks like this:
<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="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
If I use the following on my page then it works, but that's not what I am after. It doesn't seem elegant and I would like to keep the option open for switching ResourceDictionaries (for themes).
<Viewbox Width="400" Height="400">
<Frame Source="\Media\Icons\Home_16x.xaml"/>
</Viewbox>
It also shows the following in design view, which is quite confusing:
I would really like to be able to build a dictionary of the icons, that I could call with something like (or cleaner, if possible):
<Viewbox Width="400" Height="400">
<Frame Content="{StaticResource ResourceKey=Icons.Home}"/>
</Viewbox>
My current Icons ResourceDictionary looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Home">
<Viewbox.Resources>
<ResourceDictionary>
<Frame x:Key="Home" Source="\Media\Icons\Home_16x.xaml"/>
</ResourceDictionary>
</Viewbox.Resources>
</Viewbox>
</ResourceDictionary>
I admit I am quite lost. Any help would be much appreciated.
If you use a visualbrush on say a rectangle as fill, that will stretch to whatever size the rectangle is.
Hence you could have a visualbrush in a resource dictionary:
<DrawingBrush x:Key="HomeBrush">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
And use that:
<Rectangle Fill="{StaticResource HomeBrush}" Width="16" Height="16"/>
Or you could let your rectangle fill whatever cell of a grid it's in and omit width and height.
You don't need a viewbox to scale vectors, they can stretch.
You can also use a visualbrush within a path. The path can define one shape with a geometry ( which could be from a resource ) and within that your drawingbrush could put another geometry drawing with a different colour.
An example geometry out a resource file I have:
<Geometry x:Key="BeeIcon">
M15.551045,25.144995L16.748029,25.144995 ....
</Geometry>
I removed a big chunk of the geometry there.
That BeeIcon can then be re-used in different drawinggroups which is useful if you want to construct icons with several parts.
Brushes and colours for them can also be from a resource dictionary so you can switch them out for different themes or branding.

Relative coordinates in DrawingBrush

I am somewhat confused about how relative coordinates work in WPF, especially in scenarios with DrawingBrushes.
Let's say I want to paint the background of a square area, which is flexible in it's size. I want to paint the background with a special "shape", let's say a kind of "T" laying on the side, with the vertical stroke going through the middle of the area.
Using relative coordinates (the size of the area is flexible), I came up with the following XAML:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<Window.Resources>
<DrawingBrush x:Key="EdgeGrid">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<!-- draw a single T laying on the side -->
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
<!-- left to right -->
<LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.01" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Grid Name="LayoutRoot">
<Rectangle Width="400" Height="400" Stroke="Black" StrokeThickness="1" Fill="{StaticResource EdgeGrid}">
</Rectangle>
</Grid>
But the result I get looks like this:
(source: bilder-hochladen.net)
Shouldn't the vertical stroke go right through the middle (X coordinate is 0.5)?
And also how can I set the pen thickness to be 1 or 2 pixels in relative mode?
Any ideas?
You'll have to set the ViewboxUnits property of the DrawingBrush to Absolute (instead of the default RelativeToBoundingBox). The Viewbox would still be (0,0,1,1).
See the TileBrush Overview article on MSDN for details about a brush's viewbox and viewport.
<DrawingBrush x:Key="EdgeGrid" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
<LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.01" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
Of course this won't let you define stroke widths in pixels. Making the drawing in absolute coordinates and then putting the whole thing in a Viewbox won't also help much, because strokes would still be scaled.
In order to get a scalable drawing with fixed stroke width, you would have to use a Path element, where you set the StrokeThickness and Data properties and assign a ScaleTransform to the Transform property of the Geometry used as Data.
In your special case of drawing a centered, T-shaped figure with fixed stroke width, you may simply draw two (very long) Lines in a Canvas, where the coordinate origin is centered by putting the Canvas in a 2x2 Grid. You may even choose to have different strokes and stroke widths for the two Lines.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas Grid.Column="1" Grid.Row="1">
<Line Y1="-10000" Y2="10000" Stroke="Black" StrokeThickness="1"/>
<Line X2="10000" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Grid>
To get vertical stroke right you need to do it like this:
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="0.75,0.0"
EndPoint="0.75,1" />
<!-- left to right -->
<LineGeometry StartPoint="0.5,0.5"
EndPoint="1,0.5" />
</GeometryGroup>
But that won't help you with pen thickness. In general, if you want to scale a geometry - first create it using absolute coordinates you like (say in 0-100 range), then put that into ViewBox or use ScaleTransform, like this:
<Viewbox Width="400"
Height="400">
<Path Stroke="Black"
StrokeThickness="1">
<Path.Data>
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="75,0"
EndPoint="75, 100" />
<!-- left to right -->
<LineGeometry StartPoint="50,50"
EndPoint="100, 50" />
</GeometryGroup>
</Path.Data>
</Path>
</Viewbox>
Let's see how the proposed solution would look like.
Let's assume we want to show the shapes in a kind of grid and draw various shapes depending on the data (by selecting an appropriate DateTemplate). For simplicity, in this example, let's draw only one kind of shape (a cross, as in my initial question):
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<ItemsControl ItemsSource="{Binding data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="10" Rows="10">
</UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="Cell">
<Path StrokeThickness="2" Stroke="Blue" SnapsToDevicePixels="True">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Transform>
<ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
</GeometryGroup.Transform>
<!-- top to bottom -->
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
</GeometryGroup>
</Path.Data>
</Path>
<Path StrokeThickness="1" Stroke="Black" SnapsToDevicePixels="True">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Transform>
<ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
</GeometryGroup.Transform>
<!-- left to right -->
<LineGeometry StartPoint="0,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
#Clemens Is this the solution you had in mind? Is this the correct way of doing it?
The only problem I have with the result is that the lines are blurry and there is even a break to be seen in the horizontal line. Is there any solution for this?

Compass with an arrow wpf

I have to show a compass with an arrow inside a circle
I have the following code:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Pen x:Key="BlackPen1" Thickness="1" Brush="Black"></Pen>
</Page.Resources>
<Grid>
<!-- Image for the Circle -->
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Pen="{StaticResource BlackPen1}" >
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="50" RadiusY="50"></EllipseGeometry>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Path Grid.Row="1" Data="M15,0 L30,40 L0,40Z" Stroke="Black" Fill="Black" StrokeThickness="1" HorizontalAlignment="Center" />
<Line Grid.Row="0" Y1="40" Y2="400" X1="0" X2="0" Stroke="Black" StrokeThickness="5" HorizontalAlignment="Center" />
</Grid>
</Page>
Now I have to transform this whole compass based on the input angle.
One thing I know is If I move my arrow shape into Image type I can tans form this using the following
<Image.RenderTransform>
<RotateTransform Angle="{Binding ElementName=root, Path=Angle}"/>
</Image.RenderTransform>
But I am not able to draw this geometry inside the Image tag.
How to achieve this?
Why would you need to rotate the Ellipse? Surely only the arrow moves in a compass. In order to make that job easier, why don't you create the arrow in just one Path, instead of additionally using a Line element? You could define the same arrow with rotation like this:
<Path Grid.Row="1" Data="M15,0 30,40 18,40 18,400 12,400 12,40 0,40Z" Stroke="Black"
Fill="Black" StrokeThickness="1" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=root}" />
</Path.RenderTransform>
</Path>
You can apply the rotation to the whole Grid That contains all of your controls. Don't forget to set RenderTransformOrigin="0.5,0.5" on the element you rotate so it rotates arround the center and not the top left corner.
Or you could add a RotationTransform to each of the elements Path, Line and Ellipse. However in this case Rotation centers will probably be different for each one and it makes it more complicated.

WPF: Solid color ImageSource

In my app I display images I get from external DLLs, by binding the Source of an Image control to an ImageSource.
This works well, but sometimes I don't get any data from my DLL and I'd like to just show a black image. In that case, how do I create an ImageSource which contains just a solid color?
An alternative method is to give a background color, and not show the image.
// XAML
<Grid Background="Black">
<Image x:Name="imgDisplay"/>
</Grid>
// C#
imgDisplay.Source = null;
// -- OR --
imgDisplay.Visibility = Visibility.Collapsed;
for example you have image somewhere in template, which binds to some property Photo. In case of failure you can return null value.
<Image Source="{Binding Path=Photo, IsAsync=True, TargetNullValue={StaticResource EmptyImageDrawing}}"/>
And somewhere in resources you need
<DrawingImage
x:Key="EmptyImageDrawing">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing>
<GeometryDrawing.Brush>
<VisualBrush
AlignmentX="Center"
AlignmentY="Center"
Stretch="None">
<VisualBrush.Visual>
<TextBlock
Text="Failed to load photo"
FontFamily="Calibri"
FontSize="70"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextAlignment="Center"
TextWrapping="Wrap"/>
</VisualBrush.Visual>
</VisualBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry
Rect="0,0,1920,1080" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>

Path vs GeometryDrawing

Just wondering what's lighter, I'm going to have a control that draws 280 * 4 my SegmentControl, which is a quarter of a circle, and I'm just wondering what's the way that takes least memory to draw said segment.
GeometryDrawing:
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="LightBlue"
Geometry="M24.612317,0.14044853 C24.612317,0.14044853 33.499971,-0.60608719 41,7.0179795 48.37642,14.516393 47.877537,23.404541 47.877537,23.404541 L24.60978,23.401991 z" />
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
Or Path:
<Path Fill="LightBlue"
Stretch="Fill"
Stroke="#FF0DA17D"
Data="M24.612317,0.14044853 C24.612317,0.14044853 33.499971,-0.60608719 41,7.0179795 48.37642,14.516393 47.877537,23.404541 47.877537,23.404541 L24.60978,23.401991 z" />
Or if you know of an even better way, it'll be much appreciated.
Thanks!

Resources