uwpuwp-xamlfluent-design

UWP Navigation using Fluent Design

How do I place my content to be right next to the collapsed or expanded navigation. I tried playing with Width property of the column definition and I can't get it to work the way I want it to.

<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>

enter image description here

Solution

  • Just Simply place your pivot inside "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