在 WPF 中创建圆形切换按钮

Question

我想创建 ToggleButton，它具有 CornerRadius Dependency属性，它绑定到标准模板中 Borders 的 CornerRadius。我的步骤：

在 Blend 中，我只是将 ToggleButton 放在 MainWindow 上，然后使用选择的上下文菜单 "Make Into UserControl"。在后面的代码中，我创建了 Dependency属性 CornerRadius:

public partial class RoundedToggleButton : UserControl
{
    public RoundedToggleButton()
    {
        InitializeComponent();   
    }

    [Category("Appearance")]
    public CornerRadius CornerRadius
    {
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); }
    }

    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(RoundedToggleButton), new PropertyMetadata(new CornerRadius()));
}

然后我使用 "Edit Template -> Edit a copy.." 创建了模板并将其与我的 UserControl 定义放在同一个位置并添加了模板绑定：

<UserControl x:Class="SqlDeploymentTool.RoundedToggleButton"
         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="clr-namespace:SqlDeploymentTool"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         d:DesignHeight="19.96"
         d:DesignWidth="76.257"
         mc:Ignorable="d">
<UserControl.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2"
                               SnapsToDevicePixels="true"
                               Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                               StrokeDashArray="1 2"
                               StrokeThickness="1" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />
    <Style x:Key="RoundedToggleButtonStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}" />
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border x:Name="border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding local:RoundedToggleButton.CornerRadius}"
                            SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Focusable="False"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsDefaulted" Value="true">
                            <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource Button.MouseOver.Background}" />
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Pressed.Background}" />
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Pressed.Border}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Disabled.Background}" />
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Disabled.Border}" />
                            <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource Button.Disabled.Foreground}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <ToggleButton x:Name="toggleButton"
                  Content="ToggleButton"
                  Style="{DynamicResource RoundedToggleButtonStyle}" />

</Grid>

在属性 Window 中我得到了 CornerRadius 属性但它不影响按钮的边框。我该如何解决？

Answer 1

老实说，制作自定义控件而不是 UserControl 会比这更简单直接。

创建一个名为 RoundedToggleButton 的 class 继承自 ToggleButton 并在其上包含您的 CornerRadius DependencyProperty。然后创建一个默认样式（没有 x:Key，只有 TargetType）类似于您那里的样式，但将所有 TargetTypes 更改为 RoundedToggleButton 而不是 ToggleButton。

在那种情况下，这一行...

CornerRadius="{TemplateBinding local:RoundedToggleButton.CornerRadius}"

... 简单地说：

CornerRadius="{TemplateBinding CornerRadius}"

最重要的是，它会起作用！

但是由于您已经创建了 UserControl，只需将该行更改为：

CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource 
                       AncestorType={x:Type local:RoundedToggleButton}}}"

在 WPF 中创建圆形切换按钮

Create Rounded Toggle Button in WPF

c#

wpf

user-controls

rounded-corners

togglebutton