使用 Fluent Design 的 UWP 导航

Question

如何将我的内容放置在折叠或展开的导航旁边。我尝试使用列定义的 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>

Answer 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

使用 Fluent Design 的 UWP 导航

UWP Navigation using Fluent Design

uwp

uwp-xaml

fluent-design