UWP：带有 VisualStateManager 的 SplitView 问题

Question

我在尝试创建示例（而且简单！）UW 应用程序时一直在与 SplitView 控件作斗争。首先是问题列表，然后是代码：

我正在使用 VisualStateManager 来控制 DisplayState 和 Pane 可见性。所以我没有在XAML.
中使用相应的属性（DisplayMode和IsPaneOpen） 面临的问题：
a. 有时设计师展示Exception from HRESULT: 0x88000FA8
b. 窗格始终处于 Closed 状态 - 在 Designer 和运行时中。
c. 我也收到运行时异常显示 Debugger 代码，但在重新启动后 Visual Studio 它停止了。
如果我在 XAML 标记中添加两个属性（注释掉 VisualStateManager），那么对于以下组合，Hamburger 按钮不起作用：IsPaneOpen="False" DisplayMode="Overlay"。 Hamburger 按钮的代码很普通 - MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;

标记：

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="721" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="False" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
            <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
                      Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
        </Button>
        <TextBlock RelativePanel.RightOf="HamBurgerButton" 
                   Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
                   Text="Title"/>
        <SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
                   RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
            <SplitView.Pane>
                <StackPanel Orientation="Horizontal" Background="Gray">
                    <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                    <TextBlock Text="About"/>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                              HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                    <Frame x:Name="ContentFrame"/>
                </ScrollViewer>
            </SplitView.Content>
        </SplitView>
    </RelativePanel>

所以有人可以确认这些问题可以在他们结束时被复制（即它们是错误）或者我在某处错了或者有可用的解决方法吗？

Answer 1

我认为您的 Adaptive Trigger 根本无法正常工作。将它放在 relativePanel 中，看看它是否被触发。

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
        <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
                  Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
    </Button>
    <TextBlock RelativePanel.RightOf="HamBurgerButton" 
               Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
               Text="Title"/>
    <SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
               RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
               RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
        <SplitView.Pane>
            <StackPanel Orientation="Horizontal" Background="Gray">
                <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                <TextBlock Text="About"/>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                          HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </SplitView.Content>
    </SplitView><VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="721" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
            </VisualState.Setters>
        </VisualState>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="548" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
            </VisualState.Setters>
        </VisualState>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
                <Setter Target="MainSplitView.IsPaneOpen" Value="False" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</RelativePanel>

Answer 2

这段代码可以工作...

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
        <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
              Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
    </Button>
    <TextBlock RelativePanel.RightOf="HamBurgerButton" 
           Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
           Text="Title"/>
    <SplitView x:Name="MainSplitView" IsPaneOpen="False" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
           RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
           RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
        <SplitView.Pane>
            <StackPanel Orientation="Horizontal" Background="Gray">
                <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                <TextBlock Text="About"/>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                      HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </SplitView.Content>
    </SplitView>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="721" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</RelativePanel>

汉堡包按钮在宽度介于 0 和 548 之间时不起作用，因为模式设置为叠加...实际上窗格已经在框架外打开和关闭...这就是为什么它不可见的原因你认为按钮不起作用。这不是 splitview 中的错误...如果它不起作用评论...会帮助您...

UWP：带有 VisualStateManager 的 SplitView 问题

UWP: Issues with SplitView with VisualStateManager

xaml

visualstatemanager

uwp