當前位置: 妍妍網 > 碼農

WPF 如何修改button圓角(經典)

2024-02-11碼農

本人想設定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>

滑鼠放到按鈕上以後按鈕呈現藍色