WPF中怎么修改button圆角

发布时间:2021-08-10 16:37:32 作者:Leah
来源:亿速云 阅读:396

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>

如图:

WPF中怎么修改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圆角

看完上述内容,你们掌握WPF中怎么修改button圆角的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. Android开发学习笔记:圆角的Button
  2. 如何解决WPF中button按钮同时点击多次触发click的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

wpf button

上一篇:R语言与Python数据聚合功能的用法介绍

下一篇:Activity中怎么实现LifecycleOwner

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》