<UserControl
    x:Class="MyDriving.UWP.Controls.CirclePercentage"
    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"
    d:DesignHeight="300"
    d:DesignWidth="300">
    <Grid>
        <Path x:Name="Path" Stroke="{StaticResource BrandColor}" StrokeThickness="{x:Bind StrokeThickness}" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="{x:Bind StartPoint}" >
                            <PathFigure.Segments>
                                <ArcSegment x:Name="Arc" Size="{x:Bind Size}" IsLargeArc="{x:Bind IsLargeArc}" SweepDirection="Clockwise" Point="{x:Bind EndPoint}" />
                            </PathFigure.Segments>
                        </PathFigure >
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
   <!--  The purpose of rectangle is for the control to center correctly when the arc is smaller than 180 degrees -->
        <Rectangle Width="{x:Bind TotalSize}" Height="{x:Bind TotalSize}" Stroke="Transparent"/>
    </Grid>
</UserControl>
