Best approach to swapping content in a page

Question

What is the correct approach for swapping the entire content of the page? Lets say you have a media center and when the user selects a movie you want the entire page to show a MediaPlayerElement which is the movie playing filled on the entire page. Isn't there any guidelines for doing this in WinUi/WindowsAppSdk?

    <?xml version="1.0" encoding="utf-8" ?>
<Page
    x:Class="WinUI3Demo.Pages.MediaCenterPage"
    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:local="using:WinUI3Demo.Pages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:WinUI3Demo.ViewModels"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Page.DataContext>
        <models:MediaModel x:Name="Model" />
    </Page.DataContext>
    <Grid Padding="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="10*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <Viewbox Grid.Row="1" HorizontalAlignment="Left">
                <TextBlock x:Name="HeaderTextBlock" FontWeight="ExtraBold" />
            </Viewbox>
            <Viewbox
                Grid.Row="0"
                Margin="0,15,0,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Stretch="UniformToFill">
                <MediaPlayerElement
                    x:Name="MediaPlayer"
                    AreTransportControlsEnabled="False"
                    AutoPlay="True" />
            </Viewbox>
            <Viewbox Grid.Row="2" HorizontalAlignment="Left">
                <TextBlock
                    x:Name="ContentTextBlock"
                    Width="880"
                    TextWrapping="WrapWholeWords" />
            </Viewbox>
        </Grid>
        <ScrollView
            Grid.Row="1"
            Height="250"
            Padding="0,10,0,0"
            ContentOrientation="Horizontal">
            <ItemsView
                x:Name="MediaCenterItemView"
                ItemsSource="{x:Bind Model.Objects, Mode=OneWay}"
                SelectionChanged="ItemsView_SelectionChanged">
                <ItemsView.Layout>
                    <LinedFlowLayout
                        ItemsStretch="Fill"
                        LineHeight="250"
                        MinItemSpacing="15" />
                </ItemsView.Layout>
                <ItemsView.ItemTemplate>
                    <DataTemplate x:DataType="models:MediaObject">
                        <ItemContainer>
                            <Grid>
                                <Image Source="{x:Bind Thumbnail, Mode=OneWay}" Stretch="Uniform" />
                            </Grid>
                        </ItemContainer>
                    </DataTemplate>
                </ItemsView.ItemTemplate>
            </ItemsView>
        </ScrollView>
    </Grid>
</Page>

Answer 1

You can use a Frame for navigation:

SomePage.xaml

<Page...>
    <Frame x:Name="ContentFrame" />
</Page>

SomePage.xaml.cs

// You can use navigation.
ContentFrame.Navigate(typeof(AnotherPage));

// Or you can set the Frame's Content.
ContentFrame.Content = new AnotherPage();