FluidMoveBehavior、FluidMoveSetTagBehavior 和数据存储

您可以使用 FluidMoveBehavior 行为来动态显示元素位置更改。但是,如果使用 FluidMoveBehavior 本身,则只能动态显示标识项的特定位置到新位置的过渡。通过将 FluidMoveBehaviorFluidMoveSetTagBehavior 结合使用,您可以动态显示从指定起点开始的过渡,即使该初始位置只是由对应用程序中所显示数据的引用指定的。

FluidMoveBehaviorFluidMoveSetTagBehavior 结合使用时,将会创建一个隐藏数据存储,以帮助您访问所需的数据,即使该数据存在于不同的范围中。尽管数据存储隐藏在视图之外,但在使用 FluidMoveBehaviorFluidMoveSetTagBehavior 时,了解数据存储的工作方式将很有帮助。

由 FluidMoveSetTagBehavior 标记的数据,可通过使用隐藏数据存储用于 FluidMoveBehavior

FluidMove 系统

Note注意:

FluidMoveSetTagBehavior 用于将值写入数据存储。 FluidMoveBehavior 既从数据存储中读取数据,也将数据写入数据存储。

下面的示例演示 FluidMoveBehaviorFluidMoveSetTagBehavior 和数据存储如何协同工作,以便在您使用列表-细节数据视图时在 ListBoxListBoxItem 中项的详细信息视图之间创建平滑的过渡。

若要下载本主题中使用的示例项目,请访问 Expression Community Gallery Ff724012.xtlink_newWindow(zh-cn,Expression.40).png(Expression 社区库)。

FluidMoveBehavior 和 FluidMoveSetTagBehavior(用于动态显示列表项和选择了该项后该项的详细信息视图之间的过渡)

FluidMoveBehavior 示例

在本例中, ListBox 将显示一系列 ListBoxItems (列表视图),具体而言,是可供购买的座椅的列表。座椅的列表视图包括分配给每个座椅的所选属性,具体而言,包括名称、价格和图像。

在“ListBox”中选择了一个座椅后,将出现详细信息视图。详细信息视图显示与列表中所选的单个项关联的详细信息。

在本例中,将会动态显示列表中所选的座椅和详细信息视图中显示的座椅之间的过渡。为了实现此过渡,必须将列表中的座椅标识为此动画的起点。这一点是通过使用 FluidMoveSetTagBehavior 行为来标记 ItemTemplate (定义项在列表中的外观的模板)中的 Image 对象来实现的。

如果已从 Expression Community Gallery Ff724012.xtlink_newWindow(zh-cn,Expression.40).png(Expression 社区库)下载了示例并打开了该示例,若要找到项模板,请在“对象和时间线”面板中右键单击“listbox”,单击“编辑其他模板”,单击“编辑生成的项(ItemTemplate)”,然后单击“编辑当前模板”。请注意,已将“FluidMoveSetTagBehavior”添加到“Image”对象。

应用于 Image 对象的 FluidMoveSetTagBehavior

ListBox 中的 FluidMoveSetTagBehavior

将“FluidMoveSetTagBehavior”添加到对象后,“公共属性”和“标记属性”类别将出现在“属性”面板中。

“属性”面板中的 FluidMoveSetTagBehavior

“属性”面板中的 FluidMoveSetTagBehavior

“AppliesTo”属性设置为“Self”,因为图像本身就是应用“FluidMoveSetTagBehavior”的项。

“Tag”属性设置为“DataContext”,因为图像在项模板外部不可用。 DataContext 标记标识此模板所绑定到的数据,具体而言,是与座椅相关的数据。

FluidMoveSetTagBehavior 行为标记数据(本例中为图像),并将其放在数据存储中,以便在应用了 FluidMoveBehaviorFluidMoveBehavior 可找到该数据。

若要查看这一点的运行效果,请在示例项目中单击“返回到范围”Ff724012.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.40).png。在“对象和时间线”面板中,展开“Grid”。请注意,“FluidMoveBehavior”已添加到“Grid”。

应用于 Grid 的 FluidMoveBehavior

网格中的 FluidMoveBehavior

将“FluidMoveBehavior”添加到对象(本例中为“Grid”)后,“公共属性”、“动画属性”和“标记属性”类别将出现在“属性”面板中。

“属性”面板中的 FluidMoveBehavior

“属性”面板中的 FluidMoveBehavior

请注意,在“标记属性”类别中,“InitialTag”属性标记为“DataContext”。换句话说,此行为触发后,它将查找在数据存储中注册的 DataContext (本例中为所选 ListBoxItemItemTemplate 中的 Image 对象)的最后位置。然后,行为将使用该实例作为其原点。

总而言之,“FluidMoveSetTagBehavior”行为在模板中标记您要作为动画起点的对象。数据上下文引用数据源,并向隐藏的数据存储注册该数据源。通过引用“FluidMoveSetTagBehavior”行为,“FluidMoveBehavior”行为可以找到动画的起点,然后将所需的动画属性应用于由“FluidMoveBehavior”行为标记的对象。在本例中,使用了“FluidMoveBehavior”以使较大的座椅(详细信息视图中的座椅)看起来像是由较小的座椅(列表视图中的座椅)变大一样。

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。