Question

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

现在，我希望它们与左侧的“汉堡”按钮和右侧的“添加”按钮水平对齐。我该如何实现？

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的“新建标签”按钮位于导航栏的“汉堡包按钮”下方。

突出显示的选择显示框架所覆盖的区域，该区域具有带有TabView的页面

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

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

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

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

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代码： [要添加到框架内调用的Page（在这种情况下为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碰撞

1 个答案: