How to create a style of arc in gradient color with text value in the middle in WPF to be used for button, Label and Textblock

Question

Here is the desired effect:

Is it possible to create such style in WPF so that it can be used for button, label and textblock as static resource?

Thank you

Answer 1

This is a sample of a UserControl that have the similar look of your image. This doesn't work on every case you mentioned but I hope this puts you on a good direction.

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));
}

And you can use it like this:

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

• LinearGradientBrush
• Path for arcs
• new keyword as modifier