[.NET/WPF] 设置按钮, 以及其他任何包含边框的控件的圆角

416 字

2 分钟

[.NET/WPF] 设置按钮, 以及其他任何包含边框的控件的圆角

2023-09-02

.NET

dotnet

/

wpf

在 WPF 中, 按钮包含一个 “边框”, 很多时候需要设置按钮的圆角, 但是按钮并没有提供一个属性用来设置边框圆角.

下面以按钮为例, 列举几种常用的设置圆角的方式.

通过附加属性#

定义一个附加属性, 然后在各个地方就能直接方便的使用了, 下面是实际使用方式:

1
<Button utils.BorderUtils.CornerRadius="3"/>

接下来是具体实现代码, 首先是一些工具方法:

1
using System.Windows.Media;
2

3
namespace System.Windows
4
{
5
    public static class CommonUtils
6
    {
7
        public static void RunOnFirstLoaded(this FrameworkElement element, EventHandler handler)
8
        {
9
            void Once(object? sender, RoutedEventArgs e)
10
            {
11
                element.Loaded -= Once;
12
                handler.Invoke(sender, e);
13
            }
14

15
            if (element.IsLoaded)
16
                handler.Invoke(element, EventArgs.Empty);
17
            else
18
                element.Loaded += Once;
19
        }
20

21
        public static TElement? GetElementFromVisualTree<TElement>(this FrameworkElement control) where TElement : FrameworkElement
22
        {
23
            if (control is TElement ele)
24
                return ele;
25

26
            int childrenCount = VisualTreeHelper.GetChildrenCount(control);
27
            for (int i = 0; i < childrenCount; i++)
28
            {
29
                DependencyObject child = VisualTreeHelper.GetChild(control, i);
30
                if (child is TElement eleChild)
31
                    return eleChild;
32
            }
33

34
            return null;
35
        }
36
    }
37
}

然后是 BorderUtils 这个类, 在其中定义 CornerRadius 附加属性:

1
using System;
2
using System.Windows.Controls;
3
using System.Windows.Media;
4

5
namespace System.Windows
6
{
7
    public static class BorderUtils
8
    {
9
        [AttachedPropertyBrowsableForType(typeof(FrameworkElement))]
10
        public static CornerRadius GetCornerRadius(DependencyObject obj)
11
        {
12
            return (CornerRadius)obj.GetValue(CornerRadiusProperty);
13
        }
14

15
        public static void SetCornerRadius(DependencyObject obj, CornerRadius value)
16
        {
17
            obj.SetValue(CornerRadiusProperty, value);
18
        }
19

20
        // Using a DependencyProperty as the backing store for CornerRadius.  This enables animation, styling, binding, etc...
21
        public static readonly DependencyProperty CornerRadiusProperty =
22
            DependencyProperty.RegisterAttached("CornerRadius", typeof(CornerRadius), typeof(BorderUtils), new PropertyMetadata(new CornerRadius(), CornerRadiusChanged));
23

24
        private static void CornerRadiusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
25
        {
26
            if (d is not FrameworkElement ele)
27
                return;
28

29
            ele.RunOnFirstLoaded((s, _e) =>
30
            {
31
                if (CommonUtils.GetElementFromVisualTree<Border>(ele) is not Border border)
32
                    return;
33

34
                border.CornerRadius = (CornerRadius)e.NewValue;
35
            });
36
        }
37
    }
38
}

通过资源#

直接在 Button 节点下添加一个 Border 的样式资源, 然后 Button 中的 Border 就会应用这个样式.

1
<Button>
2
  <Button.Resources>
3
    <Style TargetType="Border">
4
      <Setter Property="CornerRadius" Value="3" />
5
    </Style>
6
  </Button.Resources>
7
</Button>

通过模板#

很麻烦的一种方式, 不推荐

1
<Button>
2
  <Button.Template>
3
    <ControlTemplate TargetType="{x:Type Button}" >
4
      <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
5
        <Border.Background>#FFDDDDDD</Border.Background>
6
        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
7
      </Border>
8
    </ControlTemplate>
9
  </Button.Template>
10
</Button>