[WPF] 手把手教你做“咖啡茶”按钮
日期：2014-05-20 浏览次数：21009 次
[WPF] 手把手教你做“咖啡”按钮
概要：本文将通过WPF按钮与Flash按钮的制作流程的对比讲解如何用Xaml实现按钮动画，同时你也还能学习Expression Blend。本文假设你正在制作一套点饮料的系统，现在你要做的就是制作出一个点咖啡按钮，用户点了之后就会给用户下咖啡订单。当然这样的按钮要越直观越好，要让用户一看就明白这是用来点咖啡的按钮，这就是对这个按钮的要求。
本文使用的开发环境：Expression Blend 2 sp1, Expression Design
阅读本文前建议先阅读《WPF揭秘》中的以下章节，学习一些基础概念：
Xaml，《WPF揭秘》第2章
样式，《WPF揭秘》10.1
控件模板，《WPF揭秘》10.2
触发器，《WPF揭秘》10.1.2
动画和Storyboard，《WPF揭秘》第13章
关键帧，《WPF揭秘》13.3
正文
任何一个学过Flash的人首先学习的内容一般都是按钮的制作，在Flash中按钮有四种状态，即Up（未点击）, Over（鼠标悬停）, Down（鼠标按下）, Hit（鼠标点击）。
如果要为某种状态添加动画，则需要用一个内嵌的MovieClip来实现，当然本文并不是讲解Flash的教程，就不多做介绍了。
很多WPF的初学者觉得Flash似乎比微软的东西好用，因为Flash有ButtonClip，很直观很方便。其实呢，从软件开发角度讲，WPF的事件模型更科学，因为程序中所有的动画、视觉效果都是由事件触发的，在WPF中如果要实现类似Flash中的Up, Down, Over, Hit四种状态也并非难事，你其实很容易找到对应的属性和事件，下面我列出一张表，大家看了就很容易明白了：
Flash
WPF
Up MouseLeftButtonUp (Event)
Down MouseLeftButtonDown (Event)
Over IsMouseOver (Property)
Hit IsPressed (Property)
是不是发觉WPF的事件和属性更有针对性，也表达得更清楚些呢？当然我们必须承认Flash有一点做得很好——它把Button所对应的最常用的四种状态放在了一个单独的编辑视图（即ButtonClip编辑器）中，这样初学者很容易上手，也许Expression Blend以后的版本可以借鉴一下。
做任何一样东西，我们必须了解最终我们到底要做什么，所以先来看看效果图：
你是不是有点等不及啦，那我们就开始动手吧！
画图
仔细分析下你会发现其实整个按钮中最关键的还是那个冒着热气的杯子，所以呢，我们先要把杯子画出来，用什么画呢？自然是用Expression Design。
里面画了几个杯子的草稿，搞设计的朋友都知道这其实就是在做Graphics，怎么画不是这篇文章的重点，大家自己揣摩吧。要注意一点，每次画完一个杯子一定要把几个Path放在一个Group中，这样才能保证导出的时候一个Canvas中就是一个杯子的图形，导出的Xaml与下面的代码类似：
--------------
概要：本文将通过WPF按钮与Flash按钮的制作流程的对比讲解如何用Xaml实现按钮动画，同时你也还能学习Expression Blend。本文假设你正在制作一套点饮料的系统，现在你要做的就是制作出一个点咖啡按钮，用户点了之后就会给用户下咖啡订单。当然这样的按钮要越直观越好，要让用户一看就明白这是用来点咖啡的按钮，这就是对这个按钮的要求。
本文使用的开发环境：Expression Blend 2 sp1, Expression Design
阅读本文前建议先阅读《WPF揭秘》中的以下章节，学习一些基础概念：
Xaml，《WPF揭秘》第2章
样式，《WPF揭秘》10.1
控件模板，《WPF揭秘》10.2
触发器，《WPF揭秘》10.1.2
动画和Storyboard，《WPF揭秘》第13章
关键帧，《WPF揭秘》13.3
正文
任何一个学过Flash的人首先学习的内容一般都是按钮的制作，在Flash中按钮有四种状态，即Up（未点击）, Over（鼠标悬停）, Down（鼠标按下）, Hit（鼠标点击）。
如果要为某种状态添加动画，则需要用一个内嵌的MovieClip来实现，当然本文并不是讲解Flash的教程，就不多做介绍了。
很多WPF的初学者觉得Flash似乎比微软的东西好用，因为Flash有ButtonClip，很直观很方便。其实呢，从软件开发角度讲，WPF的事件模型更科学，因为程序中所有的动画、视觉效果都是由事件触发的，在WPF中如果要实现类似Flash中的Up, Down, Over, Hit四种状态也并非难事，你其实很容易找到对应的属性和事件，下面我列出一张表，大家看了就很容易明白了：
Flash
WPF
Up MouseLeftButtonUp (Event)
Down MouseLeftButtonDown (Event)
Over IsMouseOver (Property)
Hit IsPressed (Property)
是不是发觉WPF的事件和属性更有针对性，也表达得更清楚些呢？当然我们必须承认Flash有一点做得很好——它把Button所对应的最常用的四种状态放在了一个单独的编辑视图（即ButtonClip编辑器）中，这样初学者很容易上手，也许Expression Blend以后的版本可以借鉴一下。
做任何一样东西，我们必须了解最终我们到底要做什么，所以先来看看效果图：
你是不是有点等不及啦，那我们就开始动手吧！
画图
仔细分析下你会发现其实整个按钮中最关键的还是那个冒着热气的杯子，所以呢，我们先要把杯子画出来，用什么画呢？自然是用Expression Design。
里面画了几个杯子的草稿，搞设计的朋友都知道这其实就是在做Graphics，怎么画不是这篇文章的重点，大家自己揣摩吧。要注意一点，每次画完一个杯子一定要把几个Path放在一个Group中，这样才能保证导出的时候一个Canvas中就是一个杯子的图形，导出的Xaml与下面的代码类似：
--------------
- XAML code
<Viewbox x:Name="Group" Width="30.8005" Height="32.0573" Canvas.Left="35.6441" Canvas.Top="40.7749">
<Canvas Width="30.8005" Height="32.0573">
<Path x:Name="Path" Width="3.01129" Height="16.1666" Canvas.Left="6.25348" Canvas.Top="2.18024" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 7.92015,3.18024C 7.56208,5.32863 8.36821,8.0273 8.25348,10.0135C 8.08681,12.899 7.25348,14.8798 7.25348,17.3469"/>
<Path x:Name="Path_0" Width="3.01129" Height="16.1666" Canvas.Left="10.7747" Canvas.Top="2.27339" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 12.4414,3.27339C 12.0833,5.42178 12.8895,8.12045 12.7747,10.1067C 12.6081,12.9921 11.7747,14.973 11.7747,17.44"/>
<Path x:Name="Path_1" Width="3.01129" Height="16.1667" Canvas.Left="14.8581" Canvas.Top="2.14838" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FF9E9898" Data="F1 M 16.5247,3.14838C 16.1667,5.29678 16.9728,7.99545 16.8581,9.9817C 16.6914,12.8671 15.8581,14.848 15.8581,17.315"/>
<Path x:Name="Path_2" Width="10.6739" Height="7.81753" Canvas.Left="19.7414" Canvas.Top="19.929" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 22.9393,21.1666C 25.1893,21.1529 29.1164,20.8922 29.3039,20.9334C 29.8005,21.0424 28.6164,23.7316 26.1476,25.1718C 23.7262,26.5844 23.3768,26.8041 20.7414,26.7355"/>
<Path x:Name="Path_3" Width="24.1439" Height="12.9312" Canvas.Left="0.12096" Canvas.Top="18.8018" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF898686" Fill="#FFFFFFFF" Data="F1 M 1.12678,20.5627C 1.48111,19.7491 22.9913,19.4325 23.2518,20.4012C 23.4669,21.2014 21.0644,30.4402 12.6734,30.7251C 2.88443,31.0573 1,20.8539 1.12678,20.5627 Z "/>
</Canvas>
</Viewbox>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
