“本文适合silverlight界面设计师参考,程序开发人员最好也了解一下“
先看看需要实现的效果
这里是我的office 2010的截图
我想要模拟这个效果。
因为普通按钮和,类似TapControl是混排在一起的,不太适合用TapControl。所以这里我选择了ToggleButton。
所以本节主要就是制作ToggleButton的样式。
其实制作样式并不复杂,只要理解好视图状态这个感念以及你现在所要做样式的控件结构基本就没什么问题了。
我想大多数朋友都是Button控件制作过了样式。 他的视图状态相对来说比较简单。
这里看一下button和ToggleButton
若是在多个VisualStateGroup同时改变同一个元素的属性,blend就会出现如下的提示:
这里实际的操作一下
先确定状态,我需要的是
普通状态:
鼠标滑入:
选中:
确认了状态后就可以具体的制作样式了。
由于和原先的ToggleButton演示变化比较大,所以这里我选择了创建空项。
确认选中base
在这里,把各个状态的演示都分开绘制上去。
由于这个样式比较简单,所以我选择了Opacity,这样在展示效果上会更好一些。
再看一下这三个状态
普通:
滑入:
接下来在对应状态时候将他们的透明度改成100%即可,最后在设置一下过渡所需要的时间以及过渡效果即可。
样式建立好之后,我在左部放置了多个ToggleButton,并把他们组合到一个StackPanel中。
为每一个ToggleButton应用样式,设置属性。
演示地址:
<a target="_blank" href="http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-2/OperatingTableTestPage.html">http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-2/OperatingTableTestPage.html</a>
<a target="_blank" href="http://www.cnblogs.com/nasa/archive/2010/01/27/dropbox-host-silverlight.html">申请Dropbox来host你的Silverlight</a>
作者:Nasa
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。