The idea is to get rating control, that could have value like 0.3 and draw it as partly filled shape.
The approach I used was described in CodeProject article. Have Path, add mask (rectangle), add outline.
Original code used Margin for mask and fixed-width paths.
The problem is that using rectangle as mask re-draws background, which is gradient, so I can't set the same background value for mask.
I've changed colors just to make it more clear.
Is it possible to simulate partly filled paths?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="gdStar" Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Path
Grid.ColumnSpan="2"
Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
<Rectangle Grid.Column="1"
Fill="Yellow"/>
<Path
Grid.ColumnSpan="2"
Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
</Grid>
</Page>
EDIT
This could be wrong approach. What else could be used? OpacityBrush/Clip?
Are you looking for something like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="gdStar" Width="Auto" Height="Auto">
<Path
Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
<Path.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0.3"/>
<GradientStop Color="White" Offset="0.3"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
<Path
Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
</Grid>
</Page>
Edit Here is a version that changes the background of non filled area by adding a white star behind it, I've left the previous example there because its a bit clearer.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="yellow">
<Grid x:Name="gdStar" Width="Auto" Height="Auto">
<Path
Fill="White" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
<Path
Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z">
<Path.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Transparent" Offset="0.3"/>
<GradientStop Color="White" Offset="0.3"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
<Path
Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/>
</Grid>
</Page>
Related
I have defined two concentric circles and two diagonal lines, which I want to clip to one of the circles.
I have written the following XAML and my problem is that I do not understand its behavior.
<Canvas>
<Ellipse x:Name="OuterCircle" Width="200" Height="200" StrokeThickness="2" Stroke="Black">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCBCFD5" Offset="1"/>
<GradientStop Color="#FFF5F6F7" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="InnerCircle" Width="184" Height="184" Margin="8" >
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCBCFD5" Offset="0"/>
<GradientStop Color="#FFF5F6F7" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!-- In my opinion the lines are clipped to the wrong circle -->
<Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2">
<Line.OpacityMask>
<VisualBrush Visual="{Binding ElementName=InnerCircle}" />
</Line.OpacityMask>
</Line>
<Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2">
<Line.OpacityMask>
<VisualBrush Visual="{Binding ElementName=InnerCircle}" />
</Line.OpacityMask>
</Line>
</Canvas>
</Grid>
</Window>
This appears as follows:
The diagonal lines are clearly clipped to the outer circle.
In the XAML they are specifically clipped to the inner circle using ElementName=InnerCircle.
Why is that?
UPDATE
Using Stretch="None" as suggested by Clemens
<Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2">
<Line.OpacityMask>
<VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>
</Line.OpacityMask>
</Line>
<Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2">
<Line.OpacityMask>
<VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>
</Line.OpacityMask>
</Line>
produces exactly the result I had expected.
Using Clip did not work as I expected
<Line X1="0" X2="200" Y1="0" Y2="200" Stroke="Black" StrokeThickness="2" Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>
<Line X1="0" X2="200" Y1="200" Y2="2" Stroke="Black" StrokeThickness="2" Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>
In the designer, it looked like this
Clearly the margin on the inner circle has not been accounted for. (If I set the margin to 0, the circles are not concentric, but the clipping is correct.)
Weirdly, when I start the application, the diagonal lines do not appear at all.
Brushes are stretched by default. Set Stretch to None:
<VisualBrush Visual="{Binding ElementName=InnerCircle}" Stretch="None"/>
Alternatively, you can also clip the Lines by the geometry of the Ellipse:
<Line ... Clip="{Binding ElementName=InnerCircle, Path=RenderedGeometry}"/>
I know this question has already been answered, as I have followed the instructions of these answers. I have a .SVG image of an icon, which I am trying to convert into useable XAML code, I am using my images like this;
<ControlTemplate x:Uid="ControlTemplate_9" x:Key="IconTemplate">
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16" ToolTip="IconToolTip.">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path16" Fill="#FFFCF0F0">
<Path.Data>
<PathGeometry Figures=" M 22.30" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
</ControlTemplate>
When I picked up this system most of these were already provided, but my issue is adding more to it. When using programs such as Inkscape or printing to PDF and opening the .fpage file I am getting .XAML along the lines of -
<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
The latter will not compile and causes the program to crash. So my extension to the previous questions would be, how do I use the latter XAML in my codebase without directly having an image in the project folder or how do I convert this into useable path data.
What I have done and which is actually working perfectly is to remove all the part with xml:
<Viewbox Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
And I have added them to a ResourceDictionary, so they can be used in the whole project.
<Viewbox x:Key="MyIcon" x:Shared="False" Stretch="Uniform">
<Canvas Name="svg2" Width="24" Height="16">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
<Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
<Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
</Canvas>
</Viewbox>
How to clip path stroke? With ClipToBounds="True" there are unwanted pieces at rigth and bottom side.
<Grid Background="Yellow" ClipToBounds="True">
<Viewbox Stretch="Fill">
<Path Data="M30,0 L0,10 L0,40 L30,50 L30,0" Stroke="Red" StrokeThickness="5" />
</Viewbox>
</Grid>
EDIT
I figured out that I just need not to scale border thickness, so solution will be:
<Grid x:Name="grid" Grid.Row="2" Background="Yellow" >
<Grid.Resources>
<ScaleTransform x:Key="transform"
ScaleX="{Binding ActualWidth, ElementName=grid}"
ScaleY="{Binding ActualHeight, ElementName=grid}" />
</Grid.Resources>
<Path Stroke="Red" StrokeThickness="15" Stretch="Fill">
<Path.Data>
<PathGeometry Transform="{StaticResource transform}">
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="True" StartPoint="0,0.7">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="1,1" />
<LineSegment Point="1,0" />
<LineSegment Point="0,0.3" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Grid>
If it's ok not to scale the stroke thickness, you might drop the Viewbox and set Stretch="Fill" directly at the Path:
<Grid Background="Yellow" ClipToBounds="True" Margin="20">
<Path Stretch="Fill" Data="M30,0 L0,10 L0,40 L30,50 L30,0 Z"
Stroke="Red" StrokeThickness="20" />
</Grid>
Otherwise you might use the Path in a VisualBrush in e.g. a Rectangle (which needs to have some size set explicitly):
<Grid Background="Yellow" ClipToBounds="True" Margin="20">
<Viewbox Stretch="Fill">
<Rectangle Width="1" Height="1">
<Rectangle.Fill>
<VisualBrush>
<VisualBrush.Visual>
<Path Data="M30,0 L0,10 L0,40 L30,50 L30,0 Z"
Stroke="R*emphasized text*ed" StrokeThickness="5" />
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
</Grid>
Please also note that the path geometry is closed by a trailing Z.
I have the following XAML :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1" Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center">
<Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="10,0" EndPoint="0,10" />
<LineGeometry StartPoint="0,10" EndPoint="10,20" />
</GeometryGroup>
</Path.Data>
</Path>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
</Page>
It creates like a speech bubble. However I would like the part where the two join to be white or not to have any stroke.
Not very clever, but perhaps sufficient:
<DockPanel Margin="5">
<Path Stroke="Black" StrokeThickness="1"
Fill="White" DockPanel.Dock="Left" VerticalAlignment="Center"
Panel.ZIndex="1" Margin="0,0,-1,0" Data="M10,0 L0,10 10,20"/>
<Rectangle Stroke="Black" RadiusX="10" RadiusY="10"/>
</DockPanel>
A better solution might be to create a CombinedGeometry from the Path and the Rectangle.
If you have access to Blend you can use the Callout control, which does exactly what you want.
It resides in this assembly:
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\Microsoft.Expression.Drawing.dll
and is used like that:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ed:Callout AnchorPoint="-0.061,0.716" CalloutStyle="RoundedRectangle" Content="Callout" Fill="#FFF4F4F5" FontSize="14.667" HorizontalAlignment="Left" Height="109" Margin="61,78,0,0" Stroke="Black" VerticalAlignment="Top" Width="375"/>
</Grid>
</Window>
Edit: if you have Blend (for VS 2012) you can easily draw a path yourself that looks like a callout.
Example:
<Path Data="M110.029,0.5 L305.895,0.5 C314.17927,0.50000358 320.895,7.2157323 320.895,15.500005 L320.895,144.202 C320.895,152.48627 314.17927,159.202 305.895,159.202 L110.029,159.202 C101.74473,159.202 95.028999,152.48627 95.029,144.202 L95.029,119.139 0.5,94.029644 94.530329,44.776012 95.029,69.723011 95.029,15.500005 C95.028999,7.2157323 101.74473,0.50000358 110.029,0.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="159.702" Margin="122.366,45.642,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="321.395"/>
I have created a UserControl which is a ring by superposing 2 circles the small circle being blank and the second behind the smallest being colored.
In my WPF app, I want to put several rings but the small circle does hide other rings. I'd like to see through it and also capture mouse event for ring behind other rings otherwise it's not real rings. Is it possible ?
I tried OpacityMask for small ellipse as pointed by answer to http://social.msdn.microsoft.com/forums/en-US/wpf/thread/551201d1-c5b3-4e17-ae63-625cfbb8bcc4 but still can't see ring behind hole:
<UserControl x:Class="MyUserControls.MyRing"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="150" d:DesignWidth="150" SizeChanged="UserControl_SizeChanged">
<Grid Height="150" Name="Grid" Width="150" MouseMove="ellipse1_MouseMove">
<Ellipse Fill="Red" Height="150" Width="150" HorizontalAlignment="Left" Margin="0,0,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" >
<Ellipse.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="#FFB94444" Offset="0.496"/>
<GradientStop Color="#00FFFFFF" Offset="0.491"/>
</RadialGradientBrush>
</Ellipse.OpacityMask>
</Ellipse>
<Ellipse Fill="White" Height="100" Width="100" Margin="25,25,25,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" />
</Grid>
</UserControl>
It looks like you already found your answer (a few years ago), but for anyone else looking to do this, you may want to check out CompositeGeometry:
http://msdn.microsoft.com/en-us/library/ms751808.aspx#combindgeometriessection
Such as:
<Path Fill="Red" Stroke="Black">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Xor">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="75" RadiusY="75" Center="75,75" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
Then IsHitTestVisible="False" should prevent mouse interference, when needed.
You could just create a circle with a transparent background and a StrokeThickness in the UserControl.
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Ellipse Width="50" Height="50" Stroke="Blue" StrokeThickness="10" Fill="Transparent"></Ellipse>
</Grid>
</UserControl>
EDIT:
You can set a gradient brush to the stroke as below. You could replace the LinearGradientBrush with any other type of brush as you wish.
<Ellipse Width="50" Height="50" StrokeThickness="10" Fill="Transparent">
<Ellipse.Stroke>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="1" Color="Green"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
Check out this How to create a doughnut with a transparent center?.
Code with path and button under it:
<Grid x:Name="LayoutRoot" Width="109" Height="109">
<Button Content="Below" Width="100" Height="100" />
<Path Fill="#FF1F96D8" Stroke="#FF000000"
Width="109" HorizontalAlignment="Left" Stretch="None"
Data="M54.5,32.5 C41.245167,32.5 30.5,43.021309 30.5,56
30.5,68.978691 41.245167,79.5 54.5,79.5 C67.754837,79.5
78.5,68.978691 78.5,56 C78.5,43.021309 67.754837,32.5
54.5,32.5 z M54.5,0.5 C84.32338,0.5 108.5,24.676624
108.5,54.5 C108.5,84.32338 84.32338,108.5 54.5,108.5
24.676624,108.5 0.5,84.32338 0.5,54.5 0.5,24.676624
24.676624,0.5 54.5,0.5 z" Height="109" />
</Grid>