Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

QML与Silverlight的状态和变换基础

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

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 15 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 15 July 2013, at 22:18.
225 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.

×