How can I configure an area that is always visible?

Question

How can I define something like an StackPanel Orientation="Horizontal" that is always visible independent of the page I clicked? It should look like the same header for all pages, shrink and extend with menu area open or closed.

<Page
    x:Class="Application.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:helpers="using:Application.Helpers"
    xmlns:behaviors="using:Application.Behaviors"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    Loaded="OnLoaded">

    <Grid>
        <Grid x:Name="AppTitleBar"
              Canvas.ZIndex="1"
              Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
              IsHitTestVisible="True"
              VerticalAlignment="Top">
            <Image Source="/Assets/WindowIcon.ico"
                   HorizontalAlignment="Left"
                   Width="16"
                   Height="16" />
            <TextBlock x:Name="AppTitleBarText"
                       VerticalAlignment="Center"
                       TextWrapping="NoWrap"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Margin="28,0,0,0"/>
        </Grid>
        <NavigationView
            x:Name="NavigationViewControl"
            Canvas.ZIndex="0"
            IsBackButtonVisible="Visible"
            IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
            SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
            IsSettingsVisible="True"
            ExpandedModeThresholdWidth="1280"
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Header="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
            <NavigationView.MenuItems>
                    .....
            </NavigationView.MenuItems>
            <NavigationView.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </NavigationView.HeaderTemplate>
            <i:Interaction.Behaviors>
                <behaviors:NavigationViewHeaderBehavior
                    DefaultHeader="{x:Bind ((ContentControl)ViewModel.Selected).Content, Mode=OneWay}">
                    <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock
                                    Text="{Binding}"
                                    Style="{ThemeResource TitleTextBlockStyle}" />
                            </Grid>
                        </DataTemplate>
                    </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                </behaviors:NavigationViewHeaderBehavior>
            </i:Interaction.Behaviors>
            <Grid Margin="{StaticResource NavigationViewPageContentMargin}">
                <Frame x:Name="NavigationFrame" />
            </Grid>
        </NavigationView>
    </Grid>
</Page>

I tried it with a stackpanel between the Grid and NavigationView, but that does not shrink and extend with the menu open/close.

Answer 1

If you need an area that is always visible:

<NavigationView>
    <Grid RowDefinitions="Auto,*">
        <Expander Grid.Row="0">
            <StackPanel Orientation="Horizontal">
                <!--  Your visible area  -->
            </StackPanel>
        </Expander>
        <Frame
            x:Name="NavigationFrame"
            Grid.Row="1" />
    </Grid>
</NavigationView>