我怎样才能赚到一半"RadialProgressBar"

Question

我想做一个像图中那样的半个“Progressbar”。我该怎么办。我不希望它是现成的。平台：UWP

感谢您的回答。

Answer 1

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，

Answer 2

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

<Grid>
    <Custom:RadialGauge HorizontalAlignment="Left" Margin="230,174,0,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>

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

我怎样才能赚到一半"RadialProgressBar"

How can I make a half "RadialProgressBar"

c#

xaml

uwp

windows-10-universal

uwp-xaml