UWP中如何在visualstate中使用splitview的pane实现自适应效果？

Question

我在 StackPanel 中有一些导航按钮，我想将它们放在 splitview 的窗格中。当 splitview 的面板打开时，stackpanel 的方向是水平的，而当面板关闭时，stackpanel 的方向是垂直的，这样用户总是能够看到导航按钮。 XAML代码如下

             <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PaneViewStates">
            <VisualState x:Name="PaneClosedState">
                <VisualState.StateTriggers>
                    <StateTrigger  IsActive="{Binding Path=IsPaneOpen, ElementName=SplitView, Converter={StaticResource BooleanNegationConverter}}"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Vertical"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PaneOpenState">
                <VisualState.StateTriggers>
                    <StateTrigger IsActive="{Binding Path=IsPaneOpen, ElementName=SplitView}"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Horizontal"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>

但是我得到了像 The attachable property 'IsPaneOpen' was not found in type 'SplitView'. 这样的错误 我得到了飞机B，即使用OnPaneClosing和OnPaneOpen之类的事件，但是只有PaneClosing事件，没有开幕事件。我想知道是否有人可以提出任何建议。

Answer 1

自适应触发器使用MinWidth 和MinHeight 来检查触发条件。它不检查任何布尔条件。您需要使用StateTrigger 并将IsPaneOpen 绑定到IsActive 以触发“PaneOpenState”。但是如果要触发“PaneClosedState”，不能直接绑定到StateTrigger的IsActive。你需要有一些从 StateTriggerBase 类派生的其他状态触发器，比如这些很棒的WindowsStateTriggers。我正在使用上述集合中的IsFalseStateTrigger。

代码应该是这样的：

<Page ...
    xmlns:triggers="using:WindowsStateTriggers">
...

<VisualState x:Name="PaneOpenState">
    <VisualState.StateTriggers>
        <StateTrigger IsActive="{Binding IsPaneOpen, ElementName=MySplit}"/>
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Horizontal"/>
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="PaneClosedState">
    <VisualState.StateTriggers>
        <triggers:IsFalseStateTrigger Value="{Binding ElementName=MySplit, Path=IsPaneOpen}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Vertical"/>
    </VisualState.Setters>
</VisualState>

编辑

在我们的一位朋友指出之后，我才知道我忘记了使用IsFalseStateTrigger 的最明显方法。您可以使用像 NotTrueConverter 这样的转换器来否定布尔值并使用 StateTrigger 在“PaneClosedState”中使用它