C# WPF 中沿轮廓带有进度条的矩形按钮

它结合了几个问题，包括：

• 如何绘制循环进度;
• 如何剪裁圆角矩形...

我快速地将一些东西放在一起，让你开始。仍有工作要做;)

Xaml：

<Window x:Class="WpfApp3.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Window.Resources>

        <local:AngleToPointConverter x:Key="angleToPointConverter" />
        <local:AngleToIsLargeConverter x:Key="angleToIsLargeConverter" />

        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Viewbox Stretch="Fill"
                                     ClipToBounds="True">
                                <Viewbox.Clip>
                                    <RectangleGeometry RadiusX="10"
                                                       RadiusY="10"
                                                       Rect="0,0,200,100" />
                                </Viewbox.Clip>
                                <Path Stroke="LightGray"
                                      StrokeThickness="100"
                                      Width="100"
                                      Height="100">
                                    <Path.Data>
                                        <PathGeometry>
                                            <PathFigure StartPoint="50,0">
                                                <ArcSegment RotationAngle="0"
                                                            SweepDirection="Clockwise"
                                                            Size="50,50"
                                                            Point="{Binding DataContext.Angle, Converter={StaticResource angleToPointConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}"
                                                            IsLargeArc="{Binding DataContext.Angle, Converter={StaticResource angleToIsLargeConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}">
                                                </ArcSegment>
                                            </PathFigure>
                                        </PathGeometry>
                                    </Path.Data>
                                </Path>
                            </Viewbox>
                            <Border CornerRadius="10"
                                    Background="Transparent"
                                    BorderBrush="Green"
                                    BorderThickness="2">
                                <ContentPresenter HorizontalAlignment="Center"
                                                  VerticalAlignment="Center" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <Grid>
        <TextBlock Text="{Binding Progress}"
                   VerticalAlignment="Top" />
        <Button Width="200"
                Height="100"
                Content="Click me"
                Command="{Binding ClickCommand}" />
    </Grid>
</Window>

Cs：

namespace WpfApp3
{
    public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler? PropertyChanged;

        public DelegateCommand ClickCommand { get; }

        public double Progress { get; set; }
        public double Angle => Progress / 100 * 360;

        public ViewModel()
        {
            var busy = false;

            ClickCommand = new(async o =>
            {
                busy = true;
                ClickCommand!.Update();

                for (int i = 1; i <= 100; i++)
                {
                    SetProgress(i);
                    await Task.Delay(20);
                }

                SetProgress(0);

                busy = false;
                ClickCommand.Update();

            }, o => !busy);
        }

        void SetProgress(double value)
        {
            Progress = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Progress)));
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Angle)));
        }
    }

    public class DelegateCommand : ICommand
    {
        public event EventHandler? CanExecuteChanged;

        readonly Action<object?> execute;
        readonly Predicate<object?> canExecute;

        public DelegateCommand(Action<object?> execute, Predicate<object?> canExecute)
        {
            this.execute = execute;
            this.canExecute = canExecute;
        }

        public void Update() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);

        public bool CanExecute(object? parameter) => canExecute(parameter);

        public void Execute(object? parameter) => execute(parameter);
    }

    class AngleToPointConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double angle = (double)value;
            double radius = 50;
            double piang = angle * Math.PI / 180;

            double px = Math.Sin(piang) * radius + radius;
            double py = -Math.Cos(piang) * radius + radius;

            return new Point(px, py);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    class AngleToIsLargeConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double angle = (double)value;

            return angle > 180;
        }

        public object ConvertBack(object value, Type targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

---

如果需要帮助，

然后只需进行以下更改：

• 设置路径Stroke="Green"
• 设置边框和Background="{TemplateBinding Background}"BorderBrush="Transparent"

这样，按钮就会对动画路径的内部部分进行省略，在更改时只留下外线可见。

您可以创建一个派生控件，该控件在其边框顶部绘制描边几何图形。描边的长度可以通过用于绘制边框几何体的 a 的虚线数组来控制。BorderPen

该控件声明两个附加属性，以及 0 到 1 范围内的双精度值。ProgressBrushProgressValue

下面的示例仅使用 的分量 和 的分量 ，因此它不支持不规则的边框粗细或拐角半径。LeftBorderThicknessTopLeftCornerRadius

public class ProgressBorder : Border
{
    public static readonly DependencyProperty ProgressBrushProperty = DependencyProperty.Register(
        nameof(ProgressBrush), typeof(Brush), typeof(ProgressBorder),
        new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));

    public static readonly DependencyProperty ProgressValueProperty = DependencyProperty.Register(
        nameof(ProgressValue), typeof(double), typeof(ProgressBorder),
        new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.AffectsRender));

    public Brush ProgressBrush
    {
        get => (Brush)GetValue(ProgressBrushProperty);
        set => SetValue(ProgressBrushProperty, value);
    }

    public double ProgressValue
    {
        get => (double)GetValue(ProgressValueProperty);
        set => SetValue(ProgressValueProperty, value);
    }

    protected override void OnRender(DrawingContext drawingContext)
    {
        base.OnRender(drawingContext);

        var w = RenderSize.Width;
        var h = RenderSize.Height;
        var t = BorderThickness.Left;
        var d = t / 2;
        var r = Math.Max(0, Math.Min(CornerRadius.TopLeft, Math.Min(w / 2 - t, h / 2 - t)));
        var geometry = new StreamGeometry();

        using (var dc = geometry.Open())
        {
            dc.BeginFigure(new Point(w / 2, d), true, true);

            dc.LineTo(new Point(w - d - r, d), true, true);
            dc.ArcTo(new Point(w - d, d + r), new Size(r, r), 0, false, SweepDirection.Clockwise, true, true);

            dc.LineTo(new Point(w - d, h - d - r), true, true);
            dc.ArcTo(new Point(w - d - r, h - d), new Size(r, r), 0, false, SweepDirection.Clockwise, true, true);

            dc.LineTo(new Point(d + r, h - d), true, true);
            dc.ArcTo(new Point(d, h - d - r), new Size(r, r), 0, false, SweepDirection.Clockwise, true, true);

            dc.LineTo(new Point(d, d + r), true, true);
            dc.ArcTo(new Point(d + r, d), new Size(r, r), 0, false, SweepDirection.Clockwise, true, true);

            dc.LineTo(new Point(w / 2, d), true, true);
        }

        var length = (2 * w + 2 * h + 4 * ((0.5 * Math.PI - 2) * r - t)) / t;
        var dashes = new double[] { ProgressValue * length, (1 - ProgressValue) * length };
        var pen = new Pen
        {
            Brush = ProgressBrush,
            Thickness = t,
            StartLineCap = PenLineCap.Flat,
            EndLineCap = PenLineCap.Flat,
            DashCap = PenLineCap.Flat,
            DashStyle = new DashStyle(dashes, 0),
            LineJoin = PenLineJoin.Round
        };

        drawingContext.DrawGeometry(null, pen, geometry);
    }
}

XAML 中的用法示例：

<local:ProgressBorder
    Background="AliceBlue"
    BorderBrush="LightGray"
    ProgressBrush="Red"
    BorderThickness="10"
    CornerRadius="10,10,10,10">
    <TextBlock Text="Hello" Margin="10"/>
    <local:ProgressBorder.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                       Storyboard.TargetProperty="ProgressValue"
                       To="1.0" Duration="0:0:3"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </local:ProgressBorder.Triggers>
</local:ProgressBorder>