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

接上一节,这里我要在左侧添加导航按钮。

先看看需要实现的效果

这里是我的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应用样式,设置属性。

演示地址:

http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step- 2/OperatingTableTestPage.html

你可能感兴趣的:(silverlight)