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>

如果椭圆是20％，蓝色应仅填充，并且还显示椭圆中心（空白区域）的百分比文本，则说椭圆是100％。

修改

我已添加要在中心显示的文字。

<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

以下是我试图实现的方式：

enter image description here

这里是橙色，填充率为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>

同时检查this链接

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之间的值）。

根据百分比填充椭圆

2 个答案: