您所面临的问题是由于NavigationView的默认行为造成的。每当将窗口大小缩小到一定的限制时，PaneDisplayMode将更改为LeftMinimal，以增加可视区域。因此，先前位于导航视图旁边的Frame现在就在导航栏的正下方。因此，Tab View的"New“按钮位于导航栏的”汉堡包按钮“之下。

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

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

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

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

例如，对于大于~700 to的窗口大小(根据您的喜好)，可以将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 -左边的紧凑型用于小窗口大小：

在 Seaky Luo's 注释之后更新:

确切的解决方案(虽然它看起来不像其他解决方案那样自然)：

为此，当窗口大小较小且NavigationView切换到LeftMinimal时，需要向"New“按钮添加左边距。

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

它应该是这样的：

希望这能帮上忙！

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57863399

复制

相似问题

问NavigationView与TabView碰撞
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NavigationView与TabView碰撞EN