在按钮模板上设置CornerRadius
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在按钮模板上设置CornerRadius相关的知识,希望对你有一定的参考价值。
我想要一个定义没有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>
正如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>
您不仅限于您正在模板化的控件的依赖项属性。在这种情况下,虽然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>
使用此方法,您不再需要维护控件模板的多个副本。
只需像这样创建一个新的Button:
<!--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>
我将创建自己的自定义按钮类(继承自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}" VerticalAlig以上是关于在按钮模板上设置CornerRadius的主要内容,如果未能解决你的问题,请参考以下文章
如何在按钮边缘上制作cornerRadius,以便在swiftUI中不剪裁边缘
UIButton的layer.cornerRadius删除了按钮标题的可见性
较小尺寸的按钮不是带有 layer.cornerRadius 的圆形
根据子类中的 UIButton 大小设置cornerRadius 的最佳位置?