How to share splitview between pages?

Question

On my mainpage I have a splitview with two buttons. The buttons navigate to other pages. The other pages do not contain the splitview. How can I share the splitview between all pages without code duplication? So that the splitview is available on each page.

MainPage.xaml:

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="170">
    <SplitView.Pane>
        <StackPanel Background="Gray">
            <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>

            <StackPanel Orientation="Horizontal">
                <Button x:Name="LocatieButton" FontFamily="Segoe MDL2 Assets" Content="&#xE825;" Width="50" Height="50" Background="Transparent" Click="LocatieButton_Click"/>
                <TextBlock Text="Locatie" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>

            <StackPanel Orientation="Horizontal">
                <Button x:Name="RDWButton" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;" Width="50" Height="50" Background="Transparent" Click="RDWButton_Click"/>
                <TextBlock Text="Parkeren" FontSize="18" VerticalAlignment="Center" />
            </StackPanel>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Grid>
            <TextBlock Text="Basic" FontSize="54" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </SplitView.Content>
</SplitView>

MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void HamburgerButton_Click(object sender, RoutedEventArgs e)
    {
        MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    }

    private void LocatieButton_Click(object sender, RoutedEventArgs e)
    {
        this.Frame.Navigate(typeof(LocatiePage));
    }

    private void RDWButton_Click(object sender, RoutedEventArgs e)
    {
        this.Frame.Navigate(typeof(ParkeerplaatsPage));
    }
}

Answer 1

You can create your own Frame inside SplitView.Content and use it to display the pages:

<SplitView.Content>
    <Frame x:Name="Fr_MainFrame"/>
</SplitView.Content>

And then instead of this.Frame you'll use Fr_MainFrame for navigation:

Fr_MainFrame.Navigate(typeof(ParkeerplaatsPage));