这是一个UserControl的例子，它的外观和你的图片相似。这并不适用于你提到的每一个案例，但我希望这能给你一个好的方向。

AwesomArcControl.xaml

<UserControl
    x:Class="GradientBrushSample.AwesomArcControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:GradientBrushSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Viewbox>
            <Path>
                <Path.Stroke>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Offset="0.0" Color="Yellow" />
                        <GradientStop Offset="0.25" Color="Red" />
                        <GradientStop Offset="0.75" Color="Blue" />
                        <GradientStop Offset="1.0" Color="LimeGreen" />
                    </LinearGradientBrush>
                </Path.Stroke>
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigureCollection>
                                <PathFigure StartPoint="25,50">
                                    <PathFigure.Segments>
                                        <PathSegmentCollection>
                                            <ArcSegment
                                                IsLargeArc="True"
                                                Point="50,25"
                                                Size="25,25"
                                                SweepDirection="Clockwise" />
                                        </PathSegmentCollection>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathFigureCollection>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Viewbox>
        <Viewbox>
            <TextBlock Text="{x:Bind Content, Mode=OneWay}" />
        </Viewbox>
    </Grid>

</UserControl>

AwesomArcControl.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace GradientBrushSample;

public sealed partial class AwesomArcControl : UserControl
{
    public AwesomArcControl()
    {
        this.InitializeComponent();
    }

    // The "new" keyword hides the UserControl's base member "Content".
    public new object Content
    {
        get => (object)GetValue(ContentProperty);
        set => SetValue(ContentProperty, value);
    }

    // The "new" keyword hides the UserControl's base member "ContentProperty".
    public static new readonly DependencyProperty ContentProperty = DependencyProperty.Register(
        nameof(Content),
        typeof(object),
        typeof(AwesomArcControl),
        new PropertyMetadata(default));
}

你可以这样使用它：

<Button
    x:Name="AwesomeButton"
    Width="50"
    Height="50"
    Padding="0">
    <local:AwesomArcControl Content="9" />
</Button>

• LinearGradientBrush
• Path for arcs
• new keyword as modifier