Fill Ellipse based on percentage

Question

I have created Ellipse in XAML.

Here is the code :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Ellipse Width="400" Stroke="DodgerBlue" Height="400" StrokeThickness="75" Fill="Transparent">
   </Ellipse>
 </Grid>

Say the Ellipse is 100% if its 20% the blue color should fill only till that and also display the percentage text in the center (empty area) of ellipse.

EDIT

I have add text to display in center.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Ellipse Width="400" Stroke="DodgerBlue" Height="400" StrokeThickness="75" Fill="Transparent">
</Ellipse>
            <TextBlock VerticalAlignment="Center" 
                       HorizontalAlignment="Center" 
                       Text="20"
                       FontSize="125"/>
        </Grid>

EDIT 2

Here is what how it looks like i am trying to acheive:

here the orange color with the 20% fill.

Answer 1

You can use an arc control preset in the assembly Microsoft.Expression.Drawing

It has properties like StartAngle and EndAngle which could be well manipulated accordingly.

 <es:Arc x:Name="arc" ArcThickness="3" ArcThicknessUnit="Pixel" EndAngle="360" Fill="Black" Height="270" Canvas.Left="101.94" Stroke="Black" StartAngle="0" UseLayoutRounding="False" Width="269.941" Canvas.Top="12" />

Now what you could do using this control is : Just take two similar arcs One superimposing the other, color the below one(1st arc) with Blue and give start and end angle properties to the red color arc(2nd arc) which would make your layout look like the way it is mentioned in design two.

Raw Usage:

<Canvas x:Name="canvas1" Margin="0,10,0,0" Height="300" Width="480" HorizontalAlignment="Center">
<es:Arc x:Name="arc" ArcThickness="3" ArcThicknessUnit="Pixel" Fill="Black" Height="100" Canvas.Left="0" Stroke="Blue" UseLayoutRounding="False" Width="100" Canvas.Top="0"/>
</Canvas>
<es:Arc x:Name="arc" ArcThickness="3" EndAngle="120" StartAngle="0" ArcThicknessUnit="Pixel" Fill="Blue" Height="100" Canvas.Left="0" Stroke="Blue" UseLayoutRounding="False" Width="100" Canvas.Top="0"/>
</Canvas>

Check this link as well

Answer 2

User control version would consist of two parts: XAML + code-behind. XAML part:

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Project.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
d:DesignHeight="40"
d:DesignWidth="40">


<Grid Width="40" Height="40">
    <Ellipse StrokeThickness="3" Stroke="#FF89CE25"/>
    <Path Stroke="Red" StrokeThickness="2" x:Name="arcPath">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="20,1">
                    <ArcSegment x:Name="myArc" SweepDirection="Clockwise" IsLargeArc="True" Point="20,1"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

Code-behind file (short version, no fluff):

public sealed partial class MyCustomControl : UserControl
{


public double ProgressValue
{
    get { return (double)GetValue(ProgressValueProperty); }
    set { SetValue(ProgressValueProperty, value); }
}

// Using a DependencyProperty as the backing store for ProgressValue.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ProgressValueProperty =
    DependencyProperty.Register("ProgressValue", typeof(double), typeof(MyCustomControl), new PropertyMetadata(0.0, OnProgressValueChanged));

private static void OnProgressValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    //throw new NotImplementedException();
    MyCustomControl circularProgressBar = d as MyCustomControl;
    if (circularProgressBar != null)
    {
        double r = 19;
        double x0 = 20;
        double y0 = 20;
        circularProgressBar.myArc.Size = new Size(19, 19);
        double angle = 90 - (double)e.NewValue / 100 * 360;
        double radAngle = angle * (PI / 180);
        double x = x0 + r * Cos(radAngle);
        double y = y0 - r * Sin(radAngle);

        if (circularProgressBar.myArc != null)
        {
            circularProgressBar.myArc.IsLargeArc = ((double)e.NewValue >= 50);
            circularProgressBar.myArc.Point = new Point(x, y);
        }
    }
}

public MyCustomControl()
{
    this.InitializeComponent();
}

}

Now, you can throw your CustomControl into any place in your XAML and bind the ProgressValue property to the respective data source. The arc would redraw itself and will fill the Ellipse shape proportionally to the value (a value from 0-100).