Here is the desired effect:

Arc with value in the middle

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

1

There are 1 best solutions below

2
Andrew KeepCoding On BEST ANSWER

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>