在按钮模板上设置CornerRadius

Question

我想要一个没有定义CornerRadius和另外两个这样的按钮，我该如何实现？

<Style TargetType="Button" x:Key="TabButton"> 
    <Setter Property="Background" Value="White" /> 
    <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border CornerRadius="0" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="Button" x:Key="TabButtonFirst" BasedOn="{StaticResource TabButton}"> 
    <Setter Property="CornerRadius" Value="3,0,0,0" /> 
</Style> 

<Style TargetType="Button" x:Key="TabButtonLast" BasedOn="{StaticResource TabButton}"> 
    <Setter Property="CornerRadius" Value="0,0,0,3" /> 
</Style> 

Answer 1

正如Nitesh说你没有CornerRadius财产上的按钮，它是边界的属性，你在你的第一个风格已经证明，只是重复你的第一个样式，改变CornerRadius，然后分配它以适当的按钮的样式。

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style TargetType="Button" x:Key="TabButton"> 
      <Setter Property="Background" Value="White" /> 
      <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border CornerRadius="0" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="Button" x:Key="TabButtonFirst"> 
      <Setter Property="Background" Value="White" /> 
      <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border CornerRadius="3,0,0,0" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     <Style TargetType="Button" x:Key="TabButtonLast"> 
      <Setter Property="Background" Value="White" /> 
      <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border CornerRadius="0,0,0,3" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
     </Window.Resources> 
     <Grid Background="Black"> 
     <Button Style="{StaticResource TabButton}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,72,0,0" Name="button1" VerticalAlignment="Top" Width="75" /> 
     <Button Style="{StaticResource TabButtonFirst}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="button2" VerticalAlignment="Top" Width="75" /> 
     <Button Style="{StaticResource TabButtonLast}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,101,0,0" Name="button3" VerticalAlignment="Top" Width="75" /> 
    </Grid> 
</Window> 

Answer 2

你不仅限于你模板化控件的依赖属性。在这种情况下，虽然Button没有CornerRadius财产，Border呢，所以你可以使用Border.CornerRadius代替：

<Style TargetType="Button" x:Key="TabButton"> 
    <Setter Property="Background" Value="White" /> 
    <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border CornerRadius="{TemplateBinding Border.CornerRadius}" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="Button" x:Key="TabButtonFirst" BasedOn="{StaticResource TabButton}"> 
    <Setter Property="Border.CornerRadius" Value="3,0,0,0" /> 
</Style> 

<Style TargetType="Button" x:Key="TabButtonLast" BasedOn="{StaticResource TabButton}"> 
    <Setter Property="Border.CornerRadius" Value="0,0,0,3" /> 
</Style> 

通过这种方法，您不再需要保持你的控件模板的多个副本。

Answer 3

我会做我自己的自定义按钮类（从按钮继承），其中包括一个CornerRadius依赖属性。然后，您的样式的目标类型将变为此新类，并且您可以使用模板绑定来设置角落半径。

使用这种方法，您不仅需要维护控件模板的多个副本，而且每次要修改角半径时都不需要创建新样式。您可以直接设置或直接绑定到您的CornerRadius依赖项属性。

所以你的控制代码可能是这个样子：

public class MyCustomButton : Button 
{ 
    public static readonly DependencyProperty CornerRadiusProperty = 
     DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(MyCustomButton), new FrameworkPropertyMetadata(new CornerRadius(0))); 

    public CornerRadius CornerRadius 
    { 
     get { return (CornerRadius)GetValue(CornerRadiusProperty); } 
     set { SetValue(CornerRadiusProperty, value); } 
    } 
} 

而XAML：

<Style TargetType="MyCustomButton" x:Key="TabButton"> 
    <Setter Property="Background" Value="White" /> 
    <Setter Property="TextBlock.TextAlignment" Value="Center" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="MyCustomButton"> 
       <Border CornerRadius="{TemplateBinding CornerRadius}" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" > 
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

因此，对于你的按钮，不需要拐角半径，因为依赖属性默认它到0，你不需要做任何事情。对于具有圆角半径的那些，只需将该依赖项属性设置为适当的值，就如同您将正常边框的CornerRadius属性一样。

Answer 4

只需创建一个新的按钮是这样的：

<!--Button--> 
      <Button 
       Name="myButton" 
       Content="OK" 
       FontFamily="Century Gothic" 
       Foreground="white" 
       Background="CornflowerBlue" 
       BorderThickness="0" 
       Padding="10" 
       Margin="10,5"> 

       <Button.Resources> 
        <Style TargetType="{x:Type Border}"> 
         <Setter Property="CornerRadius" Value="7"/> 
        </Style> 
       </Button.Resources> 

      </Button>