本人想设置Button为圆角,奈何搜索百度,找到的全是坑爹答案,现总结如下:
1. 需要添加button 的template.
2. 设置border的时候,必须要设置background, 否则会提示content 被多次使用。
代码语言:javascript复制
<Button Grid.Row="3" Grid.Column="2" Content="取消" Margin="30,40,200,40" >
<Button.Template >
<ControlTemplate TargetType="{x:Type Button}" >
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
我们只需要在XAML中给他添加几行代码就可以做成圆角形状。
代码语言:javascript复制<Button x:Name="button" Content="按钮" FontSize="40" BorderThickness="0" HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" Width="472" Height="200" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="1" BorderBrush="Black" CornerRadius="30" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
属性解析:
BorderThickness
:边框的大小
BorderBrush
:边框的颜色
CornerRadius
:圆角的大小
Background
:背景颜色"{TemplateBinding Background}"
:这个就是使用上面<Button>
的Background属性值作为他的值
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
:文字垂直居中对齐
加个渐变色
代码语言:javascript复制<Button x:Name="button" Content="按钮" FontSize="40" BorderThickness="0" HorizontalAlignment="Left" Margin="25,58,0,0" VerticalAlignment="Top" Width="472" Height="200" Foreground="White">
<Button.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FFC564B8" Offset="0"/>
<GradientStop Color="#FFF57A7A" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="1" CornerRadius="30" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
如图:
项目实例:
把样式和空间模板放到资源中,然后去引用
代码语言:javascript复制<Window x:Class="WpfApp18.MainWindow"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp18"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources >
<ResourceDictionary >
<Style x:Key="dgButton" TargetType="Button" >
<Setter Property="FontSize" Value="40"/>
<Setter Property="Content" Value="按钮"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<!--<RadialGradientBrush>
<GradientStop Color="#FFC564B8" Offset="0"/>
<GradientStop Color="#FFF57A7A" Offset="1"/>
</RadialGradientBrush>-->
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FFC564B8" Offset="0"/>
<GradientStop Color="#FFF57A7A" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style >
<ControlTemplate x:Key="buttonTemplate" TargetType="Button" >
<Border BorderThickness="1" CornerRadius="30" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<!--<Grid >
<Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/>
<TextBlock Name="txtBlock" />
</Grid >-->
<ControlTemplate.Triggers >
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Background" Value="blue"/>
</Trigger >
</ControlTemplate.Triggers >
</ControlTemplate >
</ResourceDictionary >
</Window.Resources >
<Grid>
<Button Height="200" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center" Width="400" Style ="{StaticResource dgButton}" Template="{StaticResource buttonTemplate}"/>
</Grid>
</Window>
鼠标放到按钮上以后按钮呈现蓝色