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

don't use frame in your case. Just copy and paste your code from mainPage.xaml into MainWindow.xaml, that is where you want to have your menu. Then, in MainWindow.xaml add ContentControl. This control will let you add your whatever Views, via Content just like a frame - but more lightweight. This is how things work better in WPF. Learn about MVVM & binding too, just an advice. — LuckyLuke82, Oct 01 '20 at 06:47
i would try to explain why i did that. I will have several files mainPage, secondPage, thirdPage. Every page will have another menu. mainPage have menu "Menu", but secondPage would have "menu", "Documents", "Prints". ThirdPage will have "Menu", "Invoices", "Tax". At the beginning i had in MainWindow.xaml two gridrows, first row heigh 20 for the menu. When i could create frame and can load secondPagemenu, and second gridrow with frame when i can load rest of the window from secondPage.xaml — pawel_wpf, Oct 01 '20 at 06:57
frame is intended for pages with navigation. Other than that It's pointless. You'll have more problems with It as with ContentControl, believe me. If you're trying to make an app with a menu and show Windows or Views under It, then drop off a frame. — LuckyLuke82, Oct 01 '20 at 07:01
i have edited last cxomment. What should i use to have another menu in every each option. How to load another xaml into window below the menu? — pawel_wpf, Oct 01 '20 at 07:13

LuckyLuke82 · Answer 1 · 2020-10-01T08:04:03.817

0

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());
 }

edited Oct 01 '20 at 08:04

answered Oct 01 '20 at 07:54

LuckyLuke82

586
1
18
58

I agree with You, that I should use only one menu i mainWindow.xaml. But i do not know what should i use? menu, menu, menu, menu. I do not know how to hide menus in different views. In mainwindowxaml i should see only menu. When I clikc menu>documents i should see menu, documents, prints. When I click Invoices i should see menu, invoices, tax, prints – pawel_wpf Oct 01 '20 at 09:41
@pawel_wpf, your answers or questions are very strange and hard to understand. I think you need to sleep a day or two and completely reconstruct your design idea. Your last comment sounds to me like you want to have multiple apps in one app. Which can be done, but you'll end up in tons of code. My advice is to Google for WPF apps, maybe some video or pictures will give you an idea on what you should do. – LuckyLuke82 Oct 01 '20 at 12:16
@pawel_wpf, ussually app has 1 menu, from which you open another windows or - even better - views. View is your mainPage.xaml - It can be displayed in separate Window, or a part of your MainWindow. And if your view again needs some sort of separation (like have its own menu), then It would be wise to create a view based on TabControl. That means that your mainPage.xaml wouldn't have a Menu, but a TabControl. And each Tab in TabControl would have own view. You could do all that in a single .xaml too. – LuckyLuke82 Oct 01 '20 at 12:22
thanks for response. My answers and questions are weird becuase of my non pro english. I would like to have 1 window, with 1 menu on top. At the program start i would like to see only menu on top and logo(jpg) below. When i click menu>documents i wanne see menu, documents menu and tax menu on top and when i click documents, below the menu i would like to see the list of documents. I'm starting from the beggining in programming, that is why i make simplest mistakes – pawel_wpf Oct 02 '20 at 07:28

BionicCode · Answer 2 · 2020-10-01T08:15:47.090

Two major issues:

You are using the Frame wrong.
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>

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

2 Answers2