Trigger a Storyboard on ViewModel changes (当ViewModel更改时触发故事板)

原文http://mark.mymonster.nl/2010/12/14/trigger-a-storyboard-on-viewmodel-changes/

Interactions based on ViewModel changes are easy as soon as you understand how it works. A lot of people have been hiding and showing elements in the UI based on a boolean in the ViewModel which is converted to fit the Visibility property. Of course they used an IValueConverter that translates a bool to a Visibility enum.

But sometimes designers are tough, they don’t want to show and hide, they want to play a full animation. Of course I know about the ability to trigger a Storyboard by using EventTriggers (control Loaded or Clicked for example). But did you know about the DataTrigger?

DataTrigger

The DataTrigger comes Expression Blend, you’ll have to reference the Microsoft.Expression.Interactions library, which can be found here: C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Silverlight\v4.0\Libraries\Microsoft.Expression.Interactions.dll

It’s not really that complex to use. If you only want to start a Storyboard when a specific value is put in the bound property the binding looks very much like this.

?


1

2

3

4

5

6

7

<Grid x:Name="LoginGrid">

  <i:Interaction.Triggers>

    <ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="true">

      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>

    </ei:DataTrigger>

  </i:Interaction.Triggers>

</Grid>

Operators

If you have something more specific where you want to use an operator other than equal it will be just a little bit different. The below only starts the storyboard when the value is less than 1.

?


1

2

3

4

5

6

7

<Grid x:Name="LoginGrid">

  <i:Interaction.Triggers>

    <ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="1" Comparison="LessThan">

      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>

    </ei:DataTrigger>

  </i:Interaction.Triggers>

</Grid>

You can use any of the following operators: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual.

Really complex scenario’s

Alright, it will start to become more complex when you have more than just on condition that needs to be applied. It would be more clear to make use of a PropertyChangedTrigger in that case, and additional set Conditions. The below example gets a trigger if the IsLoggedIn is changed, and than will apply the conditions, greater than 1 and less than 10 in this example. If the outcome of the conditions is true the Storyboard will start.

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<Grid x:Name="LoginGrid">

  <i:Interaction.Triggers>

    <ei:PropertyChangedTrigger Binding="{Binding IsLoggedIn}">

      <i:Interaction.Behaviors>

        <ei:ConditionBehavior>

          <ei:ConditionalExpression>

            <ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="GreaterThan" RightOperand="1"/>

            <ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="LessThan" RightOperand="10"/>

          </ei:ConditionalExpression>

        </ei:ConditionBehavior>

      </i:Interaction.Behaviors>

      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>

    </ei:PropertyChangedTrigger>

  </i:Interaction.Triggers>

</Grid>

Doing other things…

Yes this isn’t limited to the controlling of a storyboard. You can also use the GoToStateAction or any other action, mentioned here. But it’s not limited to built-in actions, you can build your own Trigger Action by implementing TriggerAction<T>.

 

时间: 2024-10-01 12:06:32

Trigger a Storyboard on ViewModel changes (当ViewModel更改时触发故事板)的相关文章

如何用代码组织多个Storyboard(故事板)

1. 新建一个Storyboard取名为OtherStoryboard.storyboard 2. 使用下面代码加载 UIStoryboard *newStoryboard = [UIStoryboard storyboardWithName:@"OtherStoryboard" bundle:nil]; 3. 使用scene identifier获取view controller instantiateViewControllerWithIdentifier: (scene iden

WPF中的触发器简单总结

原文 http://blog.sina.com.cn/s/blog_5f2ed5cb0100p3ab.html 触发器,从某种意义上来说它也是一种Style,因为它包含有一个Setter集合,并根据一个或多个条件执行Setter中的属性改变.因为复用的缘故,Styles是放置触发器的最好位置.但对于每个FrameworkElement来说都有Triggers集合,你也可以放在Triggers集合里.触发器有三种类型: 属性触发器Property Trigger:当Dependency Prope

WPF – 使用触发器

WPF提供了很重要的一个东西就是绑定Binding, 它帮助我们做了很多事情,这个我们在WPF学习之绑定这篇里边有讲过.对于Binding我们可以设置其绑定对象,关系,并通过某种规则去验证输入,或者转换值等等,这一切的背后是省去了很多我们需要自己去处理的代码.而对于WPF最主要表现的东西-渲染UI,当然是我们必须去了解和把握的了.美工设计了很多效果,并把其设计成样式展现(很大程度上我们应该认为Style也是一种资源),而作为程序员的我们不应该只是简单的拿来这些拼凑的效果,根据程序的逻辑和用户的操

微信公众平台开发 JS-SDK开发(图像接口实例)

本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档<微信JS-SDK说明文档>.微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照.选图.语音.位置等基本能力,还可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 微信JS-SDK提供的11类接口(分享接口.图像接口.音频接口.智能

微信JS接口汇总及使用详解_javascript技巧

基本说明 使用说明 1.引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js 备注:支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口 所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用). 复制代码 代码如下: wx.config({  debug:

微信JS接口大全_javascript技巧

本文为大家分享了js微信接口详细版,供大家参考,具体内容如下 基本说明使用说明1.引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js  备注:支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口  所有需要使用JSSDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用).

MySQL中触发器的基础学习教程_Mysql

0.触发器的基本概念触发器是一种特殊的存储过程,它在插入,删除或修改特定表中的数据时触发执行,它比数据库本身标准的功能有更精细和更复杂的数据控制能力. 数据库触发器有以下的作用: (1).安全性.可以基于数据库的值使用户具有操作数据库的某种权利.   # 可以基于时间限制用户的操作,例如不允许下班后和节假日修改数据库数据.   # 可以基于数据库中的数据限制用户的操作,例如不允许股票的价格的升幅一次超过10%. (2).审计.可以跟踪用户对数据库的操作.     # 审计用户操作数据库的语句.

《Swift iOS应用开发实战》——2.5与代码进行关联

2.5与代码进行关联 通过前面的学习,我们已经知道如何在故事板中创建用户界面,但在搭建好用户界面以后又要做什么呢?接下来就需要将控件对象和程序代码关联起来.我们在创建Calculator项目的时候使用了默认的Single View Controller模板,该模板关联了故事板中的View Controller场景和ViewController.swift文件中的ViewController类.现在我们在故事板中查验一下.在故事板中选中View Controller场景,使用Command+Opt

学习JavaFX Script,第一部分:针对Java程序员的JavaFX介绍

      原文地址:http://java.sun.com/developer/technicalArticles/scripting/javafxpart1/          JavaFX Script编程语言(以下称为JavaFX)有Sun微系统公司开发的一种declarative, statically typed(声明性的.静态类型)脚本语言.如Open JavaFX(OpenJFX)网站所述,JavaFX技术有着良好的前景,包括可以直接调用Java API的能力.因为JavaFX