在按钮模板上设置CornerRadius

时间:2013-07-16 15:40:06

标签: c# wpf silverlight xaml

我想要一个不定义CornerRadius的Button和另外两个定义的Button,我该如何实现?

<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>

7 个答案:

答案 0 :(得分:35)

您不仅限于您正在模板化的控件的依赖项属性。在这种情况下,虽然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>

使用这种方法,您不再需要维护控件模板的多个副本。

答案 1 :(得分:31)

由于Nitesh已经说过你没有在Button上有一个CornerRadius属性,它是你在第一个样式中显示的Border的属性,只是复制你的第一个Style并更改CornerRadius,然后将它分配给Style适当的按钮。

<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>

enter image description here

答案 2 :(得分:10)

只需创建一个新的按钮:

<!--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>

答案 3 :(得分:1)

除了使用ControlTemplate之外,您还可以简单地使用Style.Resources并指定边界:

<Style TargetType="Button" x:Key="TabButton">
  <Setter Property="Background" Value="White" />
  <Setter Property="TextBlock.TextAlignment" Value="Center" />
  <Style.Resources>
    <Style TargetType="Border">
      <Setter Property="CornerRadius" Value="3,0,0,0" />
    </Style>
  </Style.Resources>
</Style>

答案 4 :(得分:0)

我会创建自己的自定义按钮类(继承自Button),其中包含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属性一样。

答案 5 :(得分:0)

您可以使用附加属性来设置按钮边框半径(同样适用于文本框)。

为附加属性创建类

1986-01-01 12:15:00 AM

然后,您可以使用附加的属性语法为多个按钮设置样式,而无需样式重复:

1986-01-01 00:00:00

答案 6 :(得分:0)

 private Button [] Buttonsd() // Select all buttons on page
        {

            /// casting the content into panel
            Panel mainContainer = (Panel)this.Content;

            /// GetAll UIElement
            UIElementCollection element = mainContainer.Children;
         
            /// casting the UIElementCollection into List
            /// 
            List<DependencyObject> lstElement = element.Cast<DependencyObject>().ToList();

            /// Geting all Control from list
            /// 
            Button [] btns =  lstElement.OfType<Button>().ToArray();





            return btns;

            //maingrid.Children.Add(new Button() { Content = "HELLOMOTO" }); added new controls


           



        }     


private void RadiusButtons(int radiusvalue,Button btn)
            {
                ControlTemplate template = btn.Template;
                Border Border = (Border)template.FindName("border", btn);
                CornerRadius radius = new CornerRadius(radiusvalue);
                Border.CornerRadius = radius;
    
              }
    
                private void AllButtonsSettings()
            {
                Button[] buttons = Buttonsd(); // create buttons collection 
    
                foreach(Button btn in Buttonsd())
                {
                    RadiusButtons(21, btn);
                }
    
    
    
            }