使用 Fluent Design 的 UWP 导航答案

【问题标题】：UWP Navigation using Fluent Design使用 Fluent Design 的 UWP 导航
【发布时间】：2018-12-06 12:47:39
【问题描述】：

如何将我的内容放在折叠或展开的导航旁边。我尝试使用列定义的 Width 属性，但无法让它按我想要的方式工作。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition  />
    </Grid.ColumnDefinitions>

    <controls:NavigationView 
        x:Name="MainNavigation" 
        PaneDisplayMode="Auto"
        IsSettingsVisible="False">

        <controls:NavigationView.MenuItems>
            <controls:NavigationViewItem Icon="Home" Content="Dashboard" Tag="home" />
            <controls:NavigationViewItem Icon="Edit" Content="Debrief" Tag="content" />
            <controls:NavigationViewItem Icon="Calendar" Content="Prefill" Tag="content" />
            <controls:NavigationViewItem Icon="PreviewLink" Content="Report" Tag="content" />
            <controls:NavigationViewItem Icon="Repair" Content="Schedule Maintenance" Tag="content" />
        </controls:NavigationView.MenuItems>

        <controls:NavigationView.PaneFooter>
            <controls:NavigationViewItem Icon="Admin" Content="Administration" Tag="admin" />
        </controls:NavigationView.PaneFooter>

    </controls:NavigationView>

    <Pivot x:Name="rootPivot" Title="Category Title">
        <PivotItem Header="Section 1">
            <!--Pivot content goes here-->
            <TextBlock Text="Content of section 1."/>
        </PivotItem>
        <PivotItem Header="Section 2">
            <!--Pivot content goes here-->
            <TextBlock Text="Content of section 2."/>
        </PivotItem>
        <PivotItem Header="Section 3">
            <!--Pivot content goes here-->
            <TextBlock Text="Content of section 3."/>
        </PivotItem>
    </Pivot>
</Grid>

【问题讨论】：

您可以使用Splitview吗？

标签： uwp uwp-xaml fluent-design

【解决方案1】：

只需将您的枢轴放在“NavigationView.Content”中

<Grid>
        <NavigationView x:Name="MainNavigation" IsSettingsVisible="False">
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="Home" Content="Dashboard" Tag="home" />
                <NavigationViewItem Icon="Edit" Content="Debrief" Tag="content" />
                <NavigationViewItem Icon="Calendar" Content="Prefill" Tag="content" />
                <NavigationViewItem Icon="PreviewLink" Content="Report" Tag="content" />
                <NavigationViewItem Icon="Repair" Content="Schedule Maintenance" Tag="content" />
            </NavigationView.MenuItems>
            <NavigationView.PaneFooter>
                <NavigationViewItem Icon="Admin" Content="Administration" Tag="admin" />
            </NavigationView.PaneFooter>
            <NavigationView.Content>
                <Pivot x:Name="rootPivot"  Title="Category Title">
                    <PivotItem Header="Section 1">
                        <!--Pivot content goes here-->
                        <TextBlock Text="Content of section 1."/>
                    </PivotItem>
                    <PivotItem Header="Section 2">
                        <!--Pivot content goes here-->
                        <TextBlock Text="Content of section 2."/>
                    </PivotItem>
                    <PivotItem Header="Section 3">
                        <!--Pivot content goes here-->
                        <TextBlock Text="Content of section 3."/>
                    </PivotItem>
                </Pivot>
            </NavigationView.Content>
        </NavigationView>
    </Grid>

Desktop View

Tablet View

Mobile View

【讨论】：

我明白了。但是，当您切换到移动视图时，您将如何解决显示问题。内容似乎与菜单重叠？
不，不会的。如果将其缩小到移动视图，它将自动关闭窗格（主菜单）。试试看。或者我还将在编辑中附加移动视图
添加了不同视图的截图。它不会重叠。
好吧，我想如果你在顶部放一个厚的填充物就不会了，但这看起来很奇怪。我正在使用 ViewStates 来解决这个问题。感谢您的解决方案。