Page content does not display in frame instead it shows the page object name

Question

I am trying to implement basic navigation in UWP, all according to https://learn.microsoft.com/en-us/windows/uwp/design/basics/navigate-between-two-pages.

I've made the example as simple as possible. Made a main application window, with a frame and 2 buttons in it. Clicking a button will navigate the frame to display the content of page 1 or 2 respectively. The page contain as simple textblock

Code compiles and runs, navigating the frame works, however instead of the content of the page (the XAML content that is), it shows the name of the page object (i.e. ConceptTestApp.Page1 resp. ConceptTestApp.Page2) instead of the content of the page (i.e. the textblock 'This is Page 1' resp. 'This is Page 2').

I cannot see what I am doing wrong here. Any help greatly appreciated.

Application XAML

<Window x:Class="ConceptTestApp.MainWindow"
        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:local="clr-namespace:ConceptTestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Button x:Name="btnPage1" FontSize="14" Height="20" Width="120" Content="Ga naar Pagina 1" Click="BtnPage1_Click" Margin="10,0"  />
                <Button x:Name="btnPage2" FontSize="14" Height="20" Width="120" Content="Ga naar Pagina 2" Click="BtnPage2_Click" Margin="10,0"  />
            </StackPanel>
            <Frame x:Name="rootFrame" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" NavigationUIVisibility="Hidden" Width="600" Height="450"/>
        </StackPanel>

    </Grid>
</Window>

Application code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ConceptTestApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.rootFrame.Navigate(typeof(Page1));

        }


        private void BtnPage1_Click(object sender, RoutedEventArgs e)
        {
            // go to Pagina 1

            this.rootFrame.Navigate(typeof(Page1));
        }


        private void BtnPage2_Click(object sender, RoutedEventArgs e)
        {
            // go to Pagina 2

            this.rootFrame.Navigate(typeof(Page2));
        }
    }
}

Page1 XAML

<Page x:Class="ConceptTestApp.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ConceptTestApp"
      mc:Ignorable="d" 
      d:DesignHeight="400" d:DesignWidth="600"
      Title="Page1">

    <Grid>
        <TextBlock x:Name="pageTitle" FontSize="36" >This is Page 1</TextBlock>
    </Grid>

</Page>

Page2 XAML

<Page x:Class="ConceptTestApp.Page2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ConceptTestApp"
      mc:Ignorable="d" 
      d:DesignHeight="400" d:DesignWidth="600"
      Title="Page2">

    <Grid>
        <TextBlock x:Name="pageTitle" Text="This is Page 2" FontSize="24" />
    </Grid>
</Page>

(both pages don't have any code behind, only default init code)

Answer 1

It seems you create a WPF application. And in WPF, when you use Frame.Navigate, it is different with UWP, you need to pass the page object instead of Type.

private void BtnPage1_Click(object sender, RoutedEventArgs e)
{
    // go to Pagina 1
    this.rootFrame.Navigate(new Page1());
}


private void BtnPage2_Click(object sender, RoutedEventArgs e)
{
    // go to Pagina 2
    this.rootFrame.Navigate(new Page2());
}

Answer 2

It looks like you doing a WPF application rather than a UWP application. This does work in a UWP application if you use MainPage

For example,

<Page
    x:Class="PageIssueSOF.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PageIssueSOF"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >

    <Grid>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Button x:Name="btnPage1" FontSize="14" Height="20" Width="120" Content="Ga naar Pagina 1" Click="BtnPage1_Click" Margin="10,0"  />
                <Button x:Name="btnPage2" FontSize="14" Height="20" Width="120" Content="Ga naar Pagina 2" Click="BtnPage2_Click" Margin="10,0"  />
            </StackPanel>
            <Frame x:Name="rootFrame" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" Width="600" Height="450"/>
        </StackPanel>

    </Grid>
</Page>

---

On a side note NavigationUIVisibility="Hidden" is not available in UWP so has been removed in the example above.