WPF 如何修改button圆角(经典)
本人想设置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圆角(经典)的更多相关文章
- WPF button 圆角制作
将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="{x:Type Button}"&g ...
- WPF 中的 button style 的修改
<Style x:Key="ButtonStyleTransBack" TargetType="Button"> <Setter Proper ...
- C# Wpf异步修改UI,多线程修改UI(二)
1.使用定时器异步修改 这是相对比较简单的方法 在Wpf中定时器使用DiapatcherTimer,不使用Timer原因: 在一个应用程序中,Timer会重复生成time事件,而DispatcherT ...
- [置顶] WPF数据修改demo
今天晚上研究了下wpf,现在把代码贴出来供大家学习参考 sql语句: create table userinfos ( ContactID int primary key identity(1,1) ...
- Android Demo---如何敲出圆角的Button+圆角头像
经常玩儿App的小伙伴都知道,APP上面有很多按钮都是圆角的,圆形给人感觉饱满,富有张力,不知道设计圆角按钮的小伙伴是不是和小编有着相同的想法`(*∩_∩*)′,听小编公司开发IOS的小伙伴说,他们里 ...
- 【转】【WPF】WPF中的Button的MouseDown事件不触发问题
按照WPF的帮助说明,某些控件的路由事件被内部处理了,已经被标记为Handled,自行定义的事件处理代码便不再起作用了,有时候会很郁闷! 不过WPF提供了必要的方法. 1)使用相应的Preview事件 ...
- 修改button的可点击区域
需求:在cocos2dx引擎中,button的点击区域和button图片的大小是一样的,但是我需要修改可点击区域的大小和位置,需要修改引擎源码: button提供的接口中并没有和touch相关,but ...
- 【C#/WPF】修改图像的DPI、Resolution
问题: WPF中默认使用的图像的DPI是96.如果我们使用的图素的DPI不是96时(比如是72),那么WPF会把图片的DPI自动改为96,导致图像加载出来的实际大小Width和Height会比想要的大 ...
- 【WPF】修改ComboBox样式
修改WPF默认的ComboBox控件样式 如下图所示: 修改代码如下: <UserControl.Resources> <Style TargetType="ToggleB ...
随机推荐
- Codeforces Round #656 (Div. 3) A. Three Pairwise Maximums
题目链接:https://codeforces.com/contest/1385/problem/A 题意 给出三个正整数 $x,y,z$,找出三个正整数 $a,b,c$ 使得 $x = max(a, ...
- python+fiddler下载vip视频 && ts视频可合并
如果你只想在线看视频可以去看这篇博客:python实现通过指定浏览器免费观看vip视频 先看一下我们程序运行的结果 我们要解析的接口就是(就是这个"接口+视频地址"可以解析出vi ...
- UVALive 7146
Long long ago there is a strong tribe living on the earth. They always have wars and eonquer others. ...
- Strategic game POJ - 1463 dfs
题意+题解: 1 //5 2 //1 1 3 //2 1 4 //3 1 5 //1 1 6 //给你5个点,从下面第二行到第五行(称为i行),每一行两个数x,y.表示i和x之间有一条边.这一条边的长 ...
- URAL - 1635 哈希区间(或者不哈希)+dp
题意: 演队在口试中非常不幸.在42道考题中,他恰好没有准备最后一道题,而刚好被问到的正是那道题.演队坐在教授面前,一句话也说不出来.但教授心情很好,给了演队最后一次通过考试的机会.他让这个可怜的学生 ...
- JavaScript_继承
- 国内centos/windows10安装minikube
centos/windows10安装minikube 目录 centos/windows10安装minikube A win10安装minikube 1 下载安装kubectl.exe 1.1 准备目 ...
- 2.API的理解和使用
标题 : 2.API的理解和使用 目录 : Redis 序号 : 2 zset的成员是唯一的,但分数(score)却可以重复. 有序集合的内部编码 1.ziplist(压缩列表):当有序集合的 ...
- woj1008feedinganimals2-贪心-网络流
title: woj1008feedinganimals2-贪心-网络流 date: 2020-03-07 categories: acm tags: [acm,woj,网络流,贪心] 中等题. 标准 ...
- Cortex-M3 内核中悬起标志位细节逻辑
对于外设中断,如果通过NVIC_DisableIRQ(xxx)关闭对应NVIC里面的使能位,会导致对应中断Pend位置起,如果清除Pend位时不清外设的中断标志位将导致对应Pend位立刻再次置起.所以 ...