您好,登錄后才能下訂單哦!
WPF中怎么修改button圓角,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
1. 需要添加button 的template.
2. 設置border的時候,必須要設置background, 否則會提示content 被多次使用。
<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中給他添加幾行代碼就可以做成圓角形狀。
<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"/>:文字垂直居中對齊
加個漸變色
<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>
如圖:
項目實例:
把樣式和空間模板放到資源中,然后去引用
<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>
看完上述內容,你們掌握WPF中怎么修改button圓角的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。