原文:零元学Expression Blend 4 - Chapter 33 简单轻松的学会如何使用Visual States(下)

上篇提到了Visual State Manager中文翻译为视觉状态管理器是Blend的强大功能之一



本篇要更深入介绍如何使用

?

上篇提到了Visual State Manager中文翻译为视觉状态管理器是Blend的强大功能之一

本篇要更深入介绍如何使用

?

本篇范例最後成果:

?

很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页

?

01

接续着上篇的介绍,所以接下来开始相关效果的设定

左键单击MouseOver,工作区左上方会亮起小红点并显示”state recording is on”

在这个状态下,请把爱心的颜色更改为#FFFFCACA

?

再来是Pressed,一样单击Pressed使之为state recording is on状态

(应该可以发现,从MouseOver转换为Pressed时爱心从粉红色会更改回白色,这就是状态间的变换)

选取最大的圆,并更改些微的大小

?

你可以再次按下F5,试试看是否Button已经有操作时视觉上的反馈了

?

注意到了吗? 我们不用编写任何程式码或XAML就能改变我们按钮的外观

?

02

而接下来介绍如何使用Visual State功能处理视觉状态间的变换

为了更明显看出两个状态变换间的差异,我让Pressed时的圆形变得比刚刚更大一点

?

在Visual State预设情形下,由一个视觉状态移动到另一个视觉状态时,Blend会自动的构建和执行过渡时间的Storyboard(即为Blend自动帮我们生成了2个状态间平滑过渡的动画效果)

再一次实现了在Blend里,你不需编写任何程式码就可以让这一切发生

?

但若还是想要自订过渡时间的Storyboard,你还是能加自己所设计的Storyboard

?

Blend的自动过渡功能中你可以利用的一个特性是,自订视觉状态过渡发生所需要花费的时间

单击Add Transition(状态右边带有”+号”的箭头)->MouseOver->Pressed

?

列表里有:

* -> MouseOver

MouseOver -> Normal

MouseOver -> Pressed

MouseOver -> Disabled

MouseOver –> *

?

“星号*"表任何状态

所以* -> MouseOver表示任何状态到MouseOver

而MouseOver -> *,则表示MouseOver到任何状态

?

设定一个TransitionEffect,Blend已经内建了许多效果,你可以选一个喜欢的效果来测试

范例这里选的是Ripple

?

接着的是EasingFunction,但这个范例我们不使用这项功能

(详细的EasingFunction介绍请看这里)

?

接着设定当MouseOver状态移到Pressed状态时,过渡效果所执行的时间

Transiton duration ->由0s改为1s,设定值接受小数点

这里表示由MouseOver状态移到Pressed状态须经过1秒钟的执行时间

?

完成後按下F5看看成果

?

你应该会发现很明显的差异

?

其他状态的过渡效果可以依不同的需求作调整

相信你会慢慢发现Blend这项强大功能的神奇力量

?

附上本范例的专案

?

?

?

本篇的教学就到此。

?

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

零元学Expression Blend 4 - Chapter 33 简单轻松的学会如何使用Visual States(下)的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 32 简单轻松的学会如何使用Visual States(上)

    原文:零元学Expression Blend 4 - Chapter 32 简单轻松的学会如何使用Visual States(上) Visual State Manager中文翻译为视觉状态管理器,这 ...

  2. 零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异

    原文:零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异 因为先前写到自制Button时需特别注意T ...

  3. 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  4. 零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

    原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Sa ...

  5. 零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能

    原文:零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能 本章所讲的是运用ListBox.TextBox与Button,做出简单的列表 ...

  6. 零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

    原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登 ...

  7. 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II

    原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...

  8. 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

    原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...

  9. 零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

    原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend ...

随机推荐

  1. 【codeforces 604D】Moodular Arithmetic

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  2. Graphics processing architecture employing a unified shader

    FIELD OF THE INVENTION The present invention generally relates to graphics processors and, more part ...

  3. bootstrap, boosting, bagging

    介绍boosting算法的资源: 视频讲义.介绍boosting算法,主要介绍AdaBoosing http://videolectures.net/mlss05us_schapire_b/ 在这个站 ...

  4. 原生H5页面模拟APP左侧滑动删除效果

    话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...

  5. drawText文字绘制知识

    drawText(String text, float x, float y, Paint paint) x,y是基于文字基本线的,而不是android坐标系的左上角. 使用staticLayout进 ...

  6. 源码分析之Dictionary笔记

    接下来我们一步步来熟悉 Dictionary的底层结构实现,下面的MyDictionary等同于源码中的Dictionary看待. 首先我们定义一个类 MyDictionary,类中定义一个结构Ent ...

  7. Java--Vector类

    Java Vector 类 Vector类实现了一个动态数组.和ArrayList和相似,但是两者是不同的: Vector是同步访问的. Vector包含了许多传统的方法,这些方法不属于集合框架. V ...

  8. 开启win10下Ubuntu子系统的SSH服务

    原文:开启win10下Ubuntu子系统的SSH服务 版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/zhouzme https://blog.csdn ...

  9. WPF实现抽屉效果

    原文:WPF实现抽屉效果 界面代码(xaml): <Window x:Class="TransAnimation.MainWindow" xmlns="http:/ ...

  10. 狄利克雷过程(Dirichlet Process)

    0. 引入 现观察得到两个样本 θ1,θ2,来推测它们可能来自的分布: 假设来自于连续型概率密度函数, θ1,θ2∼H(θ) 则 θ1,θ2 相等的概率为 0,p(θ1=θ2)=0 概率为 0,不代表 ...