Создать закругленную кнопку Toggle в WPF

Question

Я хочу создать ToggleButton, у которого есть CornerRadius DependencyProperty, связанный с его CornerRadius Borders в стандартном шаблоне. Мои шаги:

В Blend я просто сбросил ToggleButton на MainWindow, а затем в контекстном меню выбрано «Make Into UserControl». В кодексе позади я создал свой DependencyProperty 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 -> Редактировать копию ..» и поставить его в том же месте, с моим определением 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> 

в окне свойств я получаю CornerRadius собственности, но это не влияет на границы кнопки. Как я могу это решить?

Answer 1

Если честно, создание пользовательского элемента управления вместо UserControl было бы более простым и прямым, чем это.

Создайте класс с именем RoundedToggleButton, который наследует от 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}}}"