从视图模型（行为）触发视觉状态

Posted 2023-04-12

【中文标题】从视图模型（行为）触发视觉状态

【英文标题】：Trigger visual state from viewmodel (behavior)

【发布时间】：2014-09-21 05:31:30

【问题描述】：

我正在尝试在 Behavior SDK 的帮助下触发视觉状态。 Flyout 的当前状态（显示/隐藏）应取决于 ViewModel 中 FlyoutIsVisible 的值。所有绑定都很好，除了动画之外，一切都按预期工作。弹出窗口不显示。当我通过它背后的代码触发视觉状态时。 DataTriggerBehavior 也可以工作（例如，调用命令而不是状态操作）。

<interactivity:Interaction.Behaviors>
    <core:DataTriggerBehavior Binding="Binding FlyoutIsVisible" ComparisonCondition="Equal" Value="True">
        <core:GoToStateAction StateName="ShowFlyout" TargetObject="Binding ElementName=Flyout" />
    </core:DataTriggerBehavior>
    <core:DataTriggerBehavior Binding="Binding FlyoutIsVisible" ComparisonCondition="Equal" Value="False">
        <core:GoToStateAction StateName="HideFlyout" TargetObject="Binding ElementName=Flyout" />
    </core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>

视觉状态：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="ShowFlyout">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="Flyout"
                            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                            From="380" To="0" Duration="0:0:0.5" EnableDependentAnimation="True"
                            d:IsOptimized="True">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </VisualState>
        ...
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

弹出窗口：

<Border x:Name="Flyout">
    <Border.RenderTransform>
        <CompositeTransform TranslateX="380" />
    </Border.RenderTransform>
    ...
</Border>

所以我认为视觉状态的范围/上下文存在问题。我不确定在哪里放置视觉状态和行为。如果两者都在 Flyout 内（并省略 TargetObject 属性），我会收到一个异常，指出控件上没有视觉状态。否则（在外部声明并带有属性）根本不会发生任何事情。那么使用状态转换行为的正确方法是什么？

更新：

Page
-Grid
--Grid (Header)
--Grid (Content)
---Grid
----Some Element
----The Flyout
----Some Element
----Some Element
--VisualStateManager
--DataTriggerBehavior

【参考方案1】：

您的结构一切正常。它不起作用的问题是因为这条线。

TargetObject="Binding ElementName=Flyout"

一旦你在GoToStateAction 中有这个，它实际上会进入这个Flyout 元素（即Border）并尝试找到一个名为ShowFlyout/VisualState强>HideFlyout。当然它不会找到它，因为这些状态是在最上面的Grid 下声明的。

只需删除这段代码，它应该可以工作。

【参考方案2】：

Behavior 和 VisualState 都需要位于根元素下。

【讨论】：

嗨，杰瑞，感谢您的帮助。但这并没有真正奏效。我刚刚用我的页面结构更新了问题。 VisualStates（在它们当前的位置）从后面的代码中与来自 ViewModel 的事件一起使用（不是很好，但很实用）。

也许这里有一些帮助：blog.jerrynixon.com/2013/12/…