根据百分比填充椭圆

Question

我已经在XAML中创建了Ellipse。

这是代码：

<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>

假设“椭圆”为100％，前提是蓝色只能填充到20％，然后在椭圆的中心（空白区域）显示百分比文本。

编辑

我添加了要显示在中心的文本。

<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>

编辑2

这是我想要达到的效果：

这里是20％填充的橙色。

Answer 1

您可以在装配Microsoft.Expression.Drawing中使用弧形控件预设

它具有StartAngle和EndAngle之类的属性，可以对它们进行适当的操作。

 <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" />

现在，您可以使用此控件执行以下操作：只需选取两个相似的弧线，一个弧线叠加另一个弧线，用蓝色为下方的一个弧线（第一弧线）着色，然后为红色弧线（第二弧线）赋予起点和终点角度属性，布局看起来就像在设计二中提到的那样。

原始用法：

<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>

还要检查此链接

Answer 2

用户控件版本将包括两个部分：XAML +代码隐藏。 XAML部分：

<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>

代码隐藏文件（简短版本，没有起毛）：

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();
}

}

现在，您可以将CustomControl放在XAML中的任何位置，并将ProgressValue属性绑定到相应的数据源。 圆弧将重新绘制自身，并将与值（0到100的值）成比例地填充椭圆形状。