mainPage.xaml does not load into mainWindowMain frame in MainWindow.xaml

Question

I have two xaml: MainWindow.xaml. After running program i have only window with text:"mainPage.xaml". There is no menu or jpg that i had setup in mainPage.xaml

MainWindow.xaml code:

<Window x:Class="FK.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"
    mc:Ignorable="d"
    Title="A and I Version 0.1" Height="1080" Width="1920">

<Grid Background="LightGray">

    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Frame x:Name="mainWindowMain"
           Grid.Row="0">
    </Frame>
</Grid>

MainWindow.xaml.cs 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 FK
{
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative);
    }
}
}

mainPage.xaml code:

<Window x:Class="FK.mainPage"
    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:FK"
    mc:Ignorable="d"
    Title="mainPage" Height="450" Width="800">
<Grid Background="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Menu 
        x:Name="mainWindowMainMenu"
        Grid.Row="0"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Height="20"
        Width="auto"
        >
        <MenuItem Header="Menu" Height="20" Width="50">
            <MenuItem x:Name="menuOpcjaFinances"
                      Header="Finances"
                      InputGestureText="Ctrl+F"
                      Height="20"
                      Width="200"
                      >

            </MenuItem>
            <MenuItem x:Name="menuOpcjaInvoices"
                      Header="Invoces"
                      InputGestureText="Ctrl+I"
                      Height="20"
                      Width="200">
            </MenuItem>
            <MenuItem x:Name="menuOpcjaPomoc"
                      InputGestureText="Ctrl+H"
                      Header="Help"
                      Height="20"
                      Width="200"
                      >

            </MenuItem>
            <MenuItem x:Name="menuOpcjaWyjscie"
                      InputGestureText="Ctrl+Q"
                      Header="Exit"
                      Height="20"
                      Width="200"
                      ></MenuItem>
        </MenuItem>
    </Menu>
    <Image Grid.Row="1"
           Source="/mainPicture_.jpg"
           VerticalAlignment="Stretch"
           HorizontalAlignment="Center"></Image>
</Grid>
</Window>

When I had in MainWindow two gridrows, in first gridrow i had menu from mainPage.xaml, and in second grid i had frame, after clicking one of menu, other xaml loads without any problems into the frame.

I tried to setup two gridrows in MainWindow, i have tried to make public void with mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative); and insert the void in public MainWindow, but it does not help. I have no errors while compiling the program, i do not know where to search the problem

Answer 1

Two major issues:

1. You are using the Frame wrong.
2. Window must always be the root element i.e. cannot be a child element.

1.) The value of Frame.Content will be directly rendered on the screen. That's why you only see the Uri.ToString() value "mainPage.xaml".

You must use the Frame.Source property instead. The Frame then loads the content that the URI points to by assigning it to the Content property: you don't want to display the string, but the content of the resource that the string references.

public MainWindow()
{
  InitializeComponent();
  mainWindowMain.Source = new Uri("mainPage.xaml", UriKind.Relative);
}

The recommended pattern is known as View Model First. See this short example: C# WPF Page Navigation.

2.) A Windowmust be the root element and can not be nested into another control i.e. it can't be a child.

To successfully display FK.mainPage as content of the Frame, you must turn it into a UserControl or some other container like Page:

mainPage.xaml

<Page x:Class="FK.mainPage">
  ...
</Page>

Answer 2

First of all, your design is weird. You should have only one menu, in your MainWindow.xaml. Secondly - again - drop off frame control and use ContentControl instead. Frame control is heavy and It's not useful unless you want navigation and all It's features, like navigation history. Drop off Pages too, what you need is to go into the world of UserControls.

For your other "pages" - having each one It's own menu - you think this is nice design? Having top menu and then underlying view have another menu, really ?...I think your views (Pages in your case) should have TabControl, that would look and feel more normal to user. So your app would have top menu to navigate between views, and your views would have Tabs like "Invoices","Tax". That is only my opinion though.

However, you'll need to learn a lot more what WPF provides to you. I suggest you dig into MVVM pattern, WPF bindings, dependency injections, DataTemplates, Command bindings etc. Learning curve is steep, but you'll be glad once you'll figure It out.

Useful links for your answer:

navigation using ContentControl - MVVM article

SO question - check accepted answer

But, If you are a beginner, you can do It without MVVM pattern. Like you did, in code behind.

AND FINAL: If you still persist on your design, then instead of this line:

mainWindowMain.Content = new Uri("mainPage.xaml", UriKind.Relative);

create a click event of your MenuItem (in MainWindow) in code behind:

 private void Menu_item_Click(object sender, RoutedEventArgs e)
 {
     mainWindowMain.Navigate(new mainPage());
 }