Question

我试图在Behavior SDK的帮助下触发视觉状态。弹出窗口（显示/隐藏）的当前状态应取决于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属性），我会得到一个异常，说明控件上没有可视状态。否则（在外部声明并使用属性）根本没有任何反应。那么使用go-to-state行为的正确方法是什么？

更新

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

Answer 1

你的结构都没问题。它不起作用的问题是因为这一行。

TargetObject="{Binding ElementName=Flyout}"

只要您在GoToStateAction中有此内容，它就会进入此Flyout元素（即Border）并尝试找到名为VisualState > ShowFlyout / <强> HideFlyout 即可。当然，它不会找到它，因为这些状态是在最顶层的Grid下声明的。

只需删除这段代码即可。

Answer 2

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

从viewmodel触发可视状态（行为）

2 个答案: