C# UWP NavigationView和TabView冲突_C#_Xaml_Uwp_Win Universal App

C# UWP NavigationView和TabView冲突

c# xaml uwp

C# UWP NavigationView和TabView冲突,c#,xaml,uwp,win-universal-app,C#,Xaml,Uwp,Win Universal App,从图像顶部可以看到，NavigationView的汉堡按钮与myTabView.TabStartHeader重叠。选项卡视图位于主页的框架中，而导航视图位于主页中现在我希望它们与左边的汉堡按钮和右边的添加按钮水平对齐。我怎样才能做到这一点主页的XAML：选项卡视图的XAML：您面临的问题是由于导航视图的默认行为造成的。每当窗口大小减小到某个限制时，PaneDisplayMode将更改为LeftMinimal，以增加可视区域。因此，先前位于导航视图旁边的框架现在直接位于导航栏下方。因此，

从图像顶部可以看到，

NavigationView

的汉堡按钮与my

TabView.TabStartHeader

重叠。

选项卡视图

位于

主页

的

框架

中，而

导航视图

位于

主页

中

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

主页的XAML：

选项卡视图的XAML：

您面临的问题是由于

导航视图的默认行为造成的。每当窗口大小减小到某个限制时，PaneDisplayMode
将更改为LeftMinimal
，以增加可视区域。因此，先前位于导航视图旁边的框架现在直接位于导航栏下方。因此，选项卡视图的“新建选项卡”按钮位于导航栏的“汉堡按钮”下方
突出显示的选择显示了框架所覆盖的区域，该框架包含带有选项卡视图的页面
要防止这种情况发生，最简单的方法是为所有屏幕大小指定一个PaneDisplayMode
：
<NavigationView
            x:Name="MainNavigationView"
            ........
            PaneDisplayMode="LeftCompact">

您应该看到这样的行为：
窗格显示模式
-顶部适用于小窗口：

PaneDisplayMode
-左紧凑型适用于小窗口：


评论后更新：
精确解（尽管它看起来不像其他解那样自然）：
为此，当窗口较小且NavigationView
切换到LeftMinimal
时，您需要在“新建选项卡”按钮上添加左边距
我发现当宽度约为640时，导航视图进入LeftMinimal
（您可能需要微调该数字）
XAML代码：[添加到框架内调用的页面（本例中为playlispage.XAML）]

40,0,0,0

希望这有帮助
 您面临的问题是由于导航视图的默认行为造成的。每当窗口大小减小到某个限制时，PaneDisplayMode
将更改为LeftMinimal
，以增加可视区域。因此，先前位于导航视图旁边的框架现在直接位于导航栏下方。因此，选项卡视图的“新建选项卡”按钮位于导航栏的“汉堡按钮”下方
突出显示的选择显示了框架所覆盖的区域，该框架包含带有选项卡视图的页面
要防止这种情况发生，最简单的方法是为所有屏幕大小指定一个PaneDisplayMode
：
<NavigationView
            x:Name="MainNavigationView"
            ........
            PaneDisplayMode="LeftCompact">

您应该看到这样的行为：
窗格显示模式
-顶部适用于小窗口：

PaneDisplayMode
-左紧凑型适用于小窗口：


评论后更新：
精确解（尽管它看起来不像其他解那样自然）：
为此，当窗口较小且NavigationView
切换到LeftMinimal
时，您需要在“新建选项卡”按钮上添加左边距
我发现当宽度约为640时，导航视图进入LeftMinimal
（您可能需要微调该数字）
XAML代码：[添加到框架内调用的页面（本例中为playlispage.XAML）]

40,0,0,0

希望这有帮助
 你能添加XAML代码以便其他人更容易理解和回答你的问题吗？@Pratyay我真的很想。但我不确定需要发布多少代码，因为它与2页xaml相关。我认为发布一张图片应该显示足够的信息。根据您的请求，我已经添加了指向它们的链接。您可以为主页添加代码。。这应该足够了，因为它有框架
和导航视图
@Pratyay我已经将链接发布到主页
。导航视图的结构非常简单，我没有改变它的汉堡按钮MainPage
在我看来信息量不大。你能添加XAML代码以便其他人更容易理解和回答你的问题吗？@Pratyay我真的很想。但我不确定需要发布多少代码，因为它与2页xaml相关。我认为发布一张图片应该显示足够的信息。根据您的请求，我已经添加了指向它们的链接。您可以为主页添加代码。。这应该足够了，因为它有框架
和导航视图
@Pratyay我已经将链接发布到主页
。导航视图的结构非常简单，我没有改变它的汉堡按钮MainPage
在我看来信息量不大。如果我仍然想要LeftMinimal
，但在“新建”选项卡按钮的左侧有一个汉堡按钮，该怎么办？我克隆了你的项目，以便更深入地了解它。。而且，是的，你也能做到。。我将很快更新我的答案。。虽然这看起来不像其他解决方案那么自然……非常感谢！这非常有用！如果我仍然想要LeftMinimal，但是要用Hambu呢
<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>