zoukankan      html  css  js  c++  java
  • 建立可扩展的silverlight应用框架 step2

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

    先看看需要实现的效果

    这里是我的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

    Powered By D&J (URL:http://www.cnblogs.com/Areas/)
  • 相关阅读:
    文本省略并显示省略号
    屏蔽IOS端alert窗口带URL的方法
    vue实现打印功能
    使用vue-cli搭建vue项目
    四元表达式
    循环数组中的对象 放进另一个数组对象里面
    vue中选择图片,预览图片,返回base64
    上传图片,预览并保存成blob类型 和 base64
    【HbuilerX-Bug】终端无法显示打印信息,也无法输入
    el-tag标签使用三元表达动态改变type类型
  • 原文地址:https://www.cnblogs.com/Areas/p/2169763.html
Copyright © 2011-2022 走看看