如何制作一半的“ RadialProgressBar”

问题描述

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

谢谢您的回答。

解决方法

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

话虽如此，您可以使用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，

,

谢谢您的回答。我使用了RadialGauge。这是我得到的结果：

<Grid>
    <Custom:RadialGauge HorizontalAlignment="Left" Margin="230,174,0" Value="80" VerticalAlignment="Top" Foreground="Red" MinAngle="-90" MaxAngle="90" Minimum="0" Maximum="180" TickSpacing="0" NeedleWidth="0" Height="591" Width="559" TrailBrush="#FFFF0808" FocusVisualPrimaryBrush="#00000000" ScaleBrush="Black"/>
</Grid>

但是我无法更改“值”的位置，也无法添加单位。