建立可扩展的silverlight 应用框架 step-2

“本文适合silverlight界面设计师参考，程序开发人员最好也了解一下“

接上一节，这里我要在左侧添加导航按钮。
先看看需要实现的效果
这里是我的office 2010的截图
我想要模拟这个效果。
因为普通按钮和，类似TapControl是混排在一起的，不太适合用TapControl。所以这里我选择了ToggleButton。
所以本节主要就是制作ToggleButton的样式。
其实制作样式并不复杂，只要理解好视图状态这个感念以及你现在所要做样式的控件结构基本就没什么问题了。
我想大多数朋友都是Button控件制作过了样式。  他的视图状态相对来说比较简单。

这里看一下button和ToggleButton

在我之前的文章里有一篇：“VisualState“视图状态”使用心得”  得出来一个结论：各个VisualStateGroup中的视图状态是可以共存的，VisualStateGroup内部的视图状态只能同时出现一个，尽量不要在多个VisualStateGroup同时改变同一个元素的属性。

若是在多个VisualStateGroup同时改变同一个元素的属性，blend就会出现如下的提示：

这里实际的操作一下

先确定状态，我需要的是
普通状态：
鼠标滑入：
选中：
确认了状态后就可以具体的制作样式了。
由于和原先的ToggleButton演示变化比较大，所以这里我选择了创建空项。
确认选中base
在这里，把各个状态的演示都分开绘制上去。

然后将他们的透明度都设置是0%，为什么要0%，而不是Visibility = Collapsed。   这里是有原因的 设置Visibility 在运行效率上会比Opacity高一点（原因请看这篇文章“Silverlight性能优化”），但是视图状态的过渡效果就会完全失效。

由于这个样式比较简单，所以我选择了Opacity，这样在展示效果上会更好一些。
再看一下这三个状态
普通：
滑入：
选中：
接下来在对应状态时候将他们的透明度改成100%即可，最后在设置一下过渡所需要的时间以及过渡效果即可。
样式建立好之后，我在左部放置了多个ToggleButton，并把他们组合到一个StackPanel中。
为每一个ToggleButton应用样式，设置属性。
演示地址：
 
作者：Nasa 
文章出处：我和未来有约会 (http://nasa.cnblogs.com/) 
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
 
posted @ 2010-01-29 16:42  王喆(nasa)  阅读(3305)  评论(6)  编辑  收藏  举报