UWP 改变Button样式
-----some words------
1.Control:控制 (我们理解成控件)
2.Template:模板
3.Ellipse 椭圆
4.Content 内容
5.Presenter 呈现者, 节目主持人,演播厅,推荐者
6.ContentPresenter 内容呈现者(可能不是太准确)...
------the end ---------
一:Control类
Control类是所有控件的父类,例如Button按钮控件,TextBlock文本框控件等都是继承于Control类。
二:Ellipse类
UWP里画一个圆,没有圆这个类,用的是Ellipse椭圆类,给这个椭圆的长和框设置成一样就好了。
<Ellipse Width="50"
Height="50"
Fill="Blue"></Ellipse>
三:改变Button控件的样式
虽然我们可以简单的设置一些控件的样式,但是还是不够。例如下面是一个最简单的Button控件,我们可以改的是Width,Height,但如果你想做一个圆形的按钮,怎么做呢?
在设计器里找到你写的Button控件,右键->编辑模板->编辑副本
vs会帮你生成一个样式
<<Page.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="8,4,8,4"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<!--<Setter Property="FocusVisualMargin" Value="-3"/>-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
TargetType="Button" 表示这是一个给Button类型设置的样式。
控件有一个Template属性,该属性用来定义控件的模板,为什么你创建一个Button按钮,是方形的而不是圆形的,就是每个控件都有自己的默认模板,当你不去改Template时,他就是默认的,如果我们想让控件变的漂亮一点,就要改控件的模板。
Template模板属性存的是ControlTemplate(控件模板)
里面放的是一个Grid。
说明这个Grid就是该Button的模板。Background="{TemplateBinding Background}" 说明是将我们的在Xaml代码里写的Background绑定到了模板的最外层。简单来理解就是我们设置的样式,要么是通过继承或者绑定到了我们的模板上。
四:ContentPresenter
内容控件Button有一个Content属性,相应的模板里有一个ContentPresenter类用于单独的装内容。
单独装的好处就是不管你的模板的样式怎么改变,我的内容都不会受到影响。
五:做一个圆形Button控件
既然是圆形的按钮,那么我们在模板里加一个圆形。
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="Transparent">
<Ellipse Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="{TemplateBinding Background}"></Ellipse>
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
将根Grid的背景改成Transparent透明。在Grid里加上一个圆形,将圆形的背景颜色绑定一下。
这里的例子是Button的Content是一个FontIcon,该content被装到了模板里的ContentPresenter里。
background被绑定到了模板里的Ellipse的背景里,这样一个简单的按钮的样式就做好了。之后如果还要用这个样式,引用就好了。
当然现在的按钮的其它状态样式比如Pressed,这类的状态样式我这里没写,下篇再见!
UWP 改变Button样式的更多相关文章
- 改变CSS样式
改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...
- 【译文】CSS技术:如何正确的塑造button样式!
, but useful for */ display: inline-block; text-align: center; text-decoration: none; /* create a sm ...
- unity 改变鼠标样式的两种方法
1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...
- JavaScript:改变 HTML 样式
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- vue踩坑之路--点击按钮改变div样式
有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
- 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件
HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...
- 【问题】js 改变鼠标样式,chrome浏览器不能立即更新,暂没有解决办法
元素的css,cursor可以改变鼠标样式.也就是鼠标放到元素上去时,改变为相应状态. 通过JS改变cursor时,我发现chrome浏览器不能立即更新,需要动一下鼠标才行,试了几个其它浏览器都是立即 ...
- jQuery基础 - 改变CSS样式
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...
- jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ...
随机推荐
- 浅谈java中==与equals的区别
今天做了一个业务模块,需要简单的遍历比较值,所以习惯性的用了 "==" ,但是结果没有达到预想的结果是什么鬼? 看到这里,有人一定会指出这俩货不是基本变量! "关系操作符 ...
- 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?
前言 Java集合框架三种主要类型的集合:规则集(Set).线性表(List).队列(Queue).Set用来存储不可重复的元素:List用来存储有元素构成的有序的集合:而Queue则用于存储用先进先 ...
- poj 2723 二分+2-sat判定
题意:给出n对钥匙,每对钥匙只能选其中一个,在给出每层门需要的两个钥匙,只要一个钥匙就能开门,问最多能到哪层. 思路:了解了2-SAT判定的问题之后主要就是建图的问题了,这里建图就是对于2*n个钥匙, ...
- 自制MPLS解决路由黑洞实验
利用mpls解决BGP路由黑洞配置命令全解析 --By Jim 什么是BGP路由黑洞? BGP规定无论路由器是否启动bgp都要无条件地转发BGP消息和更新包(凌驾于IGP之上),违背了IGP" ...
- mac环境下安装mysql
一,下载mysql 官网"Community " 下会看到"MySQL Community Server"下方有一个"download"点击 ...
- Java GUI+mysql+分页查询
1.要求 : 创建一个学生信息管理数据库 2.实现分页查询 代码如下: a)学生实体类: /** * @author: Annie * @date:2016年6月23日 * @description: ...
- 201521123038 《Java程序设计》 第八周学习总结
201521123038 <Java程序设计> 第八周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 从集合里面获取对象时必须进行强制类 ...
- 201521123003《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源 ...
- 201521123008《Java程序设计》第四周学习总结
1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.包的命名规范 2.面向对象设计:名词/动词 3.类的设计技巧:一定将属性设计为私有priv ...
- 201521123036 《Java程序设计》第9周学习总结
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 书面作业 本次PTA作业题集异常 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中 ...