UWP NavigationView 和 TabView 冲突

Question

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

中

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

主页的

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

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

Answer 1

您遇到的问题是由于 NavigationView 的默认行为造成的。每当 window 大小减小到一定限度时， PaneDisplayMode 更改为 LeftMinimal 以增加可视区域。因此，之前位于导航视图旁边的 Frame 现在位于导航栏的正下方。因此，Tab View 的 "New Tab" 按钮位于导航栏的 "hamburger Button" 下方。

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

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

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

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

例如，如果 window 尺寸大于 ~700px（根据您的偏好），您可以将 PaneDisplayMode 设置为 'Auto'，对于较小的 window 尺寸，您可以将其切换为 'Top'/'Left Compact'。

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 - 顶部小尺寸 window :

PaneDisplayMode - 左紧凑 小 window 尺寸：

Seaky Luo's 评论后更新：

精确解（尽管它看起来不像其他解自然）：

为此，当 window 尺寸较小且 NavigationView 切换为 LeftMinimal 时，您需要为 "New Tab" 按钮添加左边距。

我发现当宽度在 ~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>

它应该看起来像这样：

希望对您有所帮助！

UWP NavigationView 和 TabView 冲突

UWP NavigationView and TabView collision

c#

xaml

win-universal-app

uwp