UWP NavigationView 和 TabView 冲突

Posted 2023-04-12

【中文标题】UWP NavigationView 和 TabView 冲突

【英文标题】：UWP NavigationView and TabView collision

【发布时间】：2020-01-11 18:35:43

【问题描述】：

从图片顶部可以看到，NavigationView 的汉堡按钮与我的TabView.TabStartHeader 重叠。 TabView 在MainPage 的Frame 中，而NavigationView 在MainPage 中。

现在我希望它们与左侧的汉堡按钮和右侧的添加按钮水平对齐。我怎样才能做到这一点？

MainPage 的 XAML：https://github.com/SeakyLuo/SMPlayer/blob/master/SMPlayer/MainPage.xaml

TabView 的 XAML： https://github.com/SeakyLuo/SMPlayer/blob/master/SMPlayer/PlaylistsPage.xaml

【问题讨论】：

能否添加 XAML 代码，以便其他人更容易理解和回答您的问题？

@Pratyay 我真的很想。但我不确定我需要发布多少代码，因为它与 2 页 xaml 相关。我认为张贴图片应该已经显示了足够的信息。根据您的要求，我已经添加了它们的链接。

您可以添加MainPage.. 的代码就足够了，因为它有Frame 和NavigationView

@Pratyay 我已经发布了MainPage 的链接。 NavigationView 的结构非常简单，我没有更改那个汉堡按钮。 MainPage 不会提供非常丰富的 IMO。

【参考方案1】：

您面临的问题是由于NavigationView 的默认行为。每当窗口大小减小到一定限度时，PaneDisplayMode 就变为LeftMinimal 以增加可视区域。因此，之前位于导航视图旁边的Frame 现在位于导航栏的正下方。因此，Tab View 的“新标签”按钮位于导航栏的“汉堡按钮”下方。

突出显示的选择显示了 Frame 所覆盖的区域，该区域包含带有 TabView 的页面

为了防止这种情况发生，最简单的方法是为所有屏幕尺寸指定一个PaneDisplayMode：

<NavigationView
            x:Name="MainNavigationView"
            ........
            PaneDisplayMode="LeftCompact">

---

更好的方法是使用VisualStateManager 或自适应触发器切换PaneDisplayMode。

例如，对于大于 ~700 像素（根据您的偏好）的窗口大小，您可以将 PaneDisplayMode 设置为“自动”，对于较小的窗口大小，您可以将其切换为“顶部”/“左侧紧凑”。

XAML 代码

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateMin0">
                <VisualState.Setters>
                    <Setter Target="MainNavigationView.(NavigationView.PaneDisplayMode)" Value="LeftCompact"/>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1" MinWindowHeight="1"/>
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="VisualStateMin700">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" MinWindowHeight="1"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

你应该看到这样的行为：

PaneDisplayMode - 顶部 用于小窗口尺寸：

PaneDisplayMode - Left Compact 适用于小窗口：

---

Seaky Luo's评论后更新：

确切的解决方案（虽然它不像其他解决方案那样自然）：

为此，当窗口较小且NavigationView 切换到LeftMinimal 时，您需要为“新标签”按钮添加左边距。

我发现当宽度约为 640 时，导航视图进入 LeftMinimal（您可能需要微调该数字）。

XAML 代码： [要添加到框架内调用的页面（本例中为 PlayListsPage.xaml）]

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateMin0">
                <VisualState.Setters>
                    <Setter Target="NewPlaylistButton.(FrameworkElement.Margin)">
                        <Setter.Value>
                            <Thickness>40,0,0,0</Thickness>
                        </Setter.Value>
                    </Setter>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1" MinWindowHeight="1"/>
                </VisualState.StateTriggers>
            </VisualState>
            <VisualState x:Name="VisualStateMin640">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="640" MinWindowHeight="1"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

它应该看起来像这样：

希望这会有所帮助！

【讨论】：

如果我仍然想要 LeftMinimal 但汉堡按钮位于新标签按钮的左侧怎么办？

我克隆了您的项目以更深入地研究它.. 是的，您也可以这样做.. 我会尽快更新我的答案.. 虽然它可能看起来不像 自然 作为其他解决方案..

非常感谢！超级有用！

只想禁用极简模式的LeftMinimal，设置<NavigationView CompactModeThresholdWidth="0">