×
Namespaces

Variants
Actions
Revision as of 01:18, 16 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

QML与Silverlight的状态和变换基础

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 16 Jul 2013 编辑

利用QML,如果你想要实现状态与变换,你必须从开始就分别定义它们。从根本上说你首先应该定义状态,并要了解什么样的属性会改变当状态改变时,这些必须要像下面所示的例子一样处理:

states: [
State {
name: "pressed"
PropertyChanges { target: button; color: "blue"}
},
State {
name: "normal"
PropertyChanges { target: button; color: "green"}
}
]

现在如果你有这样一个实例,例如一个矩形(它的Id是一个按钮),你可以简单的通过改变它的状态来改变它的颜色。状态可以有多个属性的变化,同时它也可以被应用于不同的对象。一旦状态被定义,改变就会立即执行,为了获得改变的动态,你同时也必须定义变换。使用变换的定义,你可以定义确切的from to值来供变换使用,同时也可以供变换中使用的动画。定义状态如下所示:

transitions: [
Transition {
from: "pressed"
to: "normal"
ColorAnimation { target: button; duration: 100}
},
Transition {
from: "normal"
to: "pressed"
ColorAnimation { target: button; duration: 100}
}
]

使用Silverlight,你在处理状态时是不同的,基本上你需要使用VisualStateManager来定义状态并且状态以及动画的定义要在同一文件下。 基本上你需要定义一个VisualStateGroup,在里面你需要定义VisualStates,在每个VisualState里,你将定义所需的Storyboard动画。

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Expressions">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation
Duration='00:00:01'
To="Blue"
Storyboard.TargetName="button"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<Storyboard>
</VisualState>
<VisualState x:Name="pressed">
<Storyboard>
<ColorAnimation
Duration='00:00:01'
To="Green"
Storyboard.TargetName="button"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
<Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

如果需要细微的调整,你要在你定义的状态里的VisualStateGroup下为每个状态定义一个VisualTransitions。 在那里,你可以定义这些动画将要参与的状态,以及状态改变动画所需的任何额外的微调,这里给出了快速实现VisualTransition的实例:

<VisualStateGroup.Transitions>
<VisualTransition To="pressed" GeneratedDuration="00:00:02">
<VisualTransition.GeneratedEasingFunction>
<BounceEase Bounces="4" EasingMode="EaseIn" Bounciness="2"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>

为了改变状态,你需要调用C#代码中的GoToState。

VisualStateManager.GoToState(this, "pressed", true);

示例

简单的silverlight的状态与变换示例在这里提供:Media:Silver SimpleStates1.zip

This page was last modified on 16 July 2013, at 01:18.
75 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×