时间戳

首页 > 解决方案 > 如何制作一半“RadialProgressBar”

c# - 如何制作一半“RadialProgressBar”

问题描述

我想像图片中那样制作一半的“进度条”。我该怎么做。我不希望它是现成的。平台：UWP

在此处输入图像描述

谢谢你的答案。

标签： c#xamluwpuwp-xamlwindows-10-universal

解决方案

Windows 社区工具包中有一个类似的控件：RadialGauge，您应该检查一下。另外，如果您想学习如何制作此类控件，请参阅RadialGauge 此处的源代码。

话虽如此，您可以使用Path来实现这样的 UI。这是我得到的结果：

在此处输入图像描述

从这个 XAML ：

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Path Stroke="Gray" StrokeThickness="5">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="10,60">
                        <PathFigure.Segments>
                            <ArcSegment
                                x:Name="DialArc"
                                Point="110,60"
                                Size="50,50"
                                SweepDirection="Clockwise" />
                        </PathFigure.Segments>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="DeepPink" StrokeThickness="5">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="10,60">
                        <PathFigure.Segments>
                            <ArcSegment
                                Point="60,10"
                                Size="50,50"
                                SweepDirection="Clockwise" />
                        </PathFigure.Segments>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    <TextBlock Text="62%" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Grid>

但同样，我强烈建议您使用RadialGauge社区工具包中的

推荐阅读