UWP NavigationView 和 TabView 冲突

Question

从图片顶部可以看到，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

Answer 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>

它应该看起来像这样：

希望这会有所帮助！