本人想設定Button為圓角,奈何搜尋百度,找到的全是坑爹答案,現總結如下:
1. 需要添加button 的template.
2. 設定border的時候,必須要設定background, 否則會提示content 被多次使用。
<ButtonGrid.Row="3"Grid.Column="2"Content="取消"Margin="30,40,200,40" >
<Button.Template >
<ControlTemplateTargetType="{x:Type Button}" >
<BorderBorderBrush="{TemplateBinding Control.BorderBrush}"BorderThickness="1"CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenterContent="{TemplateBinding ContentControl.Content}"HorizontalAlignment="Center"VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
我們只需要在XAML中給他添加幾行程式碼就可以做成圓角形狀。
<Buttonx:Name="button"Content="按鈕"FontSize="40"BorderThickness="0"HorizontalAlignment="Left"Margin="25,58,0,0"VerticalAlignment="Top"Width="472"Height="200"Foreground="White">
<Button.Template>
<ControlTemplateTargetType="{x:Type Button}">
<BorderBorderThickness="1"BorderBrush="Black"CornerRadius="30"Background="{TemplateBinding Background}">
<ContentPresenterVerticalAlignment="Center"HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
內容解析:
BorderThickness
:邊框的大小
BorderBrush
:邊框的顏色
CornerRadius
:圓角的大小
Background
:背景顏色
"{TemplateBinding Background}"
:這個就是使用上面
<Button>
的Background內容值作為他的值
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
:文字垂直居中對齊
加個漸變色
<Buttonx:Name="button"Content="按鈕"FontSize="40"BorderThickness="0"HorizontalAlignment="Left"Margin="25,58,0,0"VerticalAlignment="Top"Width="472"Height="200"Foreground="White">
<Button.Background>
<LinearGradientBrushEndPoint="1,1"StartPoint="0,0">
<GradientStopColor="#FFC564B8"Offset="0"/>
<GradientStopColor="#FFF57A7A"Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Button.Template>
<ControlTemplateTargetType="{x:Type Button}">
<BorderBorderThickness="1"CornerRadius="30"Background="{TemplateBinding Background}">
<ContentPresenterVerticalAlignment="Center"HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
如圖:
計畫例項:
把樣式和空間樣版放到資源中,然後去參照
<Windowx: 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 >
< stylex:Key="dgButton"TargetType="Button" >
<SetterProperty="FontSize"Value="40"/>
<SetterProperty="Content"Value="按鈕"/>
<SetterProperty="Foreground"Value="White"/>
<SetterProperty="Background">
<Setter.Value>
<!--<RadialGradientBrush>
<GradientStop Color="#FFC564B8" Offset="0"/>
<GradientStop Color="#FFF57A7A" Offset="1"/>
</RadialGradientBrush>-->
<LinearGradientBrushEndPoint="1,1"StartPoint="0,0">
<GradientStopColor="#FFC564B8"Offset="0"/>
<GradientStopColor="#FFF57A7A"Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</ style >
<ControlTemplatex:Key="buttonTemplate"TargetType="Button" >
<BorderBorderThickness="1"CornerRadius="30"Background="{TemplateBinding Background}">
<ContentPresenterVerticalAlignment="Center"HorizontalAlignment="Center"/>
</Border>
<!--<Grid >
<Ellipse Name="faceEllipse" Height="50" Width="100" Fill="{TemplateBinding Button.Background}"/>
<TextBlock Name="txtBlock" />
</Grid >-->
<ControlTemplate.Triggers >
<TriggerProperty="Button.IsMouseOver"Value="True">
<SetterProperty="Button.Background"Value="blue"/>
</Trigger >
</ControlTemplate.Triggers >
</ControlTemplate >
</ResourceDictionary >
</Window.Resources >
<Grid>
<ButtonHeight="200"HorizontalAlignment="Center"Name="button1"VerticalAlignment="Center"Width="400" style ="{StaticResource dgButton}"Template="{StaticResource buttonTemplate}"/>
</Grid>
</Window>
滑鼠放到按鈕上以後按鈕呈現藍色