WPF--Blend制作Button控件模板
博客园新人,WPF初学者。不涉及理论知识,直接进入操作。
记录一下使用Blend制作Button控件模板过程中,学到Blend几个知识点:
1、渐变画笔编辑器的Alpha选项可以调控件的透明度。即下图的A,可以调节百分比
渐变过程可以加上渐变点,以达到颜色的层次分明。如下图:




<Style x:Key="BtnS1" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FF99FDFF"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FF06F9D2"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FF8FFDF0"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FF8FFDF0"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FF06F9D2"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="White"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FFFBFBF9"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="#FFFDFCF9"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle"> <EasingColorKeyFrame KeyTime="0" Value="Black"/> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="rectangle" RadiusY="15" RadiusX="15"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFE1F906" Offset="0"/> <GradientStop Color="#FFFDDB8F" Offset="1"/> <GradientStop Color="#FFFFED99" Offset="0.526"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"/> <Trigger Property="IsDefaulted" Value="True"/> <Trigger Property="IsMouseOver" Value="True"/> <Trigger Property="IsPressed" Value="True"/> <Trigger Property="IsEnabled" Value="False"/> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
将上述代码添加到一个资源字典文件里,即可引用。
WPF--Blend制作Button控件模板的更多相关文章
- WPF--Blend制作Button控件模板--问题补充
补充记录Button控件模板 控件模板制作过程中出现下图问题:动画对象不能用于动画属性"Fill” 并且这类问题Blend4中包括VS2010中仍然可以运行,但是只有VS2010中会报错:如 ...
- WPF中的ControlTemplate(控件模板)(转)
原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/28/690993.html WPF中的ControlTemplate(控件模板) ...
- WPF中的ControlTemplate(控件模板)
原文:WPF中的ControlTemplate(控件模板) WPF中的ControlTemplate(控件模板) ...
- [转]WPF中的ControlTemplate(控件模板)
WPF中的ControlTemplate(控件模板) ...
- WPF基础篇之控件模板(ControlTemplate)
WPF中每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应.我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件. 与Style不同,Style只能改变控件 ...
- WPF 中动态改变控件模板
在某些项目中,可能需要动态的改变控件的模板,例如软件中可以选择不同的主题,在不同的主题下软件界面.控件的样式都会有所不同,这时即可通过改变控件模板的方式实现期望的功能. 基本方法是当用户点击切换主题按 ...
- WPF Button控件模板
<Window x:Class="ControlTemplateDemo.MainWindow" xmlns="http://schemas.m ...
- WPF知识点--自定义Button(ControlTemplate控件模板)
ControlTemplate是一种控件模板,可以通过它自定义一个模板来替换掉控件的默认模板以便打造个性化的控件. ControlTemplate包含两个重要的属性:VisualTree 该模板的视觉 ...
- Blend 2015 教程 (四)控件模板
前一篇讲述了修改ListBox样式的方法,本篇将修改性别显示区域的样式. 1. 选择ListBox控件,编辑ItemTemplate的当前项,选择CheckBox控件,在美工板导航栏中点击CheckB ...
随机推荐
- MSF命令 收集
一.msfconsole ? 帮助菜单 back 从当前环境返回 banner 显示一个MSF banner cd 切换目录 color 颜色转换 connect 连接一个主机 e ...
- 2016.04.27,英语,《Vocabulary Builder》Unit 19
bio, comes from the Greek word for 'life'. biosphere ['baɪoʊsfɪr] n. 生物圈: biology [baɪ'ɑːlədʒi] n. 生 ...
- [ZZ] HDR&ToneMapping
http://blog.csdn.net/toughbro/article/details/6745207 float游戏存储照片blogimage HDR high dynamic range. 很 ...
- PHP 设计模式 笔记与总结(2)开发 PSR-0 的基础框架
[PSR-0 规范的三项约定]: ① 命名空间必须与绝对路径一致 ② 类名的首字母必须大写 ③ 除入口文件外,其他".php"必须只有一个类(不能有可执行的代码) [开发符合 PS ...
- 微信自定义菜单说php json_encode不转义中文汉字的方法
http://blog.csdn.net/qmhball/article/details/45690017 最近在开发微信自定义菜单. 接口比较简单,就是按微信要求的格式post一段json数据过去就 ...
- w_all_checked - js -checkbox 多选、全选、submit、request
<!doctype html> <html> <head> <meta charset="UTF-8"> </head> ...
- Java - HttpURLConnection
JDK中的URLConnection参数详解 1:> URL请求的类别: 分为二类,GET与POST请求.二者的区别在于: a:) get请求可以获取静态页面,也可以把参数放在URL字串后面,传 ...
- jdk Tomcat配置
安装Tomcat需要先安装JDKJDK安装JDK安装会有两次,两次不能再同一目录 你可以新建两个文件夹 JDK JRE 第一次安装在JDK 第二次在JRE在我的电脑右键属性 高级系统设置 环境变量 系 ...
- 发现了一个很好的Pasical编程软件Lazarus
下载地址:http://www.lazarus.freepascal.org/ 中文社区:http://www.fpccn.com/ 该软件有几点如下特征: 1.跨平台.体积小(只有100多M) 2. ...
- Java Blocking Queue
//Listing 8-1. The Blocking Queue Equivalent of Chapter 3’s PC Application import java.util.concurre ...