How to make a Home-button in UserControl switch a page in MainWindow frame without using mvvm?

Question

Hi there!
I am new in wpf and c#.
I have now used 2 days on searching the web without any solutions I could implement in a satisfying way. Either I can't make the solutions work or it's the annoying MVVM pattern. At my current learning step it's just too abstract.
Therefore I have created a new app with the most simple elements I need to make the functions I want.
It's a WPF app / .Net 4.8 framework.
MainWindow with a Frame and a UserControl.
3 pages:
LoginPage with 2 buttons that can open 2 other pages within the Frame in MainWindow:
LoginSubPage1
LoginSubPage2
and the UserControl "BottomBar" contains 3 buttons:
Back
Home
Exit

MainWindow.xaml:

<Window x:Class="UserControl2020_12_15.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:uc="clr-namespace:UserControl2020_12_15"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600" WindowStartupLocation="CenterScreen"
        Background="CadetBlue">
    <Grid>
        <Frame x:Name="PageFrame" NavigationUIVisibility="Hidden"
               VerticalAlignment="Top" Height="250"/>
        <uc:BottomBar VerticalAlignment="Bottom" Height="80"/>
    </Grid>
</Window>

LoginPage.xaml:

<Page x:Class="UserControl2020_12_15.LoginPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <StackPanel>
        <Button Content="LoginSubPage1" Click="OneClick" Background="Red"/>
        <Button Content="LoginSubPage2" Click="TwoClick" Background="Green"/>
    </StackPanel>
</Page>

LoginSubPage1.xaml:

<Page x:Class="UserControl2020_12_15.LoginSubPage1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d" Background="Red">
</Page>

LoginSubPage2.xaml:

<Page x:Class="UserControl2020_12_15.LoginSubPage2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d" Background="Green">
</Page>

BottomBar.xaml:

<UserControl x:Class="UserControl2020_12_15.BottomBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" 
             d:DesignHeight="80" d:DesignWidth="800">
    <Grid>
        <Button Content="BackBtn" HorizontalAlignment="Left" Margin="20,0,0,0"
                Click="BackClick" Height="50"/>
        <Button Content="HomeBtn" HorizontalAlignment="Center" Margin="0"
                Click="HomeClick" Height="50"/>
        <Button Content="ExitBtn" HorizontalAlignment="Right" Margin="0,0,20,0"
                Click="ExitClick" Height="50"/>
    </Grid>
</UserControl>

MainWindow.xaml.cs:

using System.Windows;

namespace UserControl2020_12_15
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            LoginPage loginPage = new LoginPage();
            PageFrame.NavigationService.Navigate(loginPage);
        }
    }
}

LoginPage.xaml.cs:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;

namespace UserControl2020_12_15
{
    public partial class LoginPage : Page
    {
        public LoginPage()
        {
            InitializeComponent();
        }

        private void OneClick(object sender, RoutedEventArgs e)
        {
            NavigationService nav = NavigationService.GetNavigationService(this);
            nav.Navigate(new Uri("LoginSubPage1.xaml", UriKind.RelativeOrAbsolute));
        }

        private void TwoClick(object sender, RoutedEventArgs e)
        {
            NavigationService nav = NavigationService.GetNavigationService(this);
            nav.Navigate(new Uri("LoginSubPage2.xaml", UriKind.RelativeOrAbsolute));
        }
    }
}

BottomBar.xaml.cs:

using System.Windows;
using System.Windows.Controls;

namespace UserControl2020_12_15
{
    public partial class BottomBar : UserControl
    {
        public BottomBar()
        {
            InitializeComponent();
        }

        private void BackClick(object sender, RoutedEventArgs e)
        {

        }

        private void HomeClick(object sender, RoutedEventArgs e)
        {

        }

        private void ExitClick(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }
    }
}

The HomeClick should open LoginPage.xaml in the Frame or maybe reload app so it gets back to start where the frame contained LoginPage.xaml
The BackClick should go back to last viewed page no matter where we are in the app

I don't want to make it in an MVVM-build but just in the code behind the BottomBar.

Answer 1

I implement what you want with updating two parts for your project without using MVVM:

Part 1: Add x:FieldModifier="public" for your Frame in MainWindow.xaml, I update your MainWindow.xaml as below:

 <Grid>  
        <Frame Name="PageFrame" NavigationUIVisibility="Hidden" VerticalAlignment="Top" Height="250" x:FieldModifier="public" />  
        <uc:BottomBar VerticalAlignment="Bottom" Height="80"/>  
    </Grid>  

Part 2: Replace your BottomBar.cs with below code:

public partial class BottomBar : UserControl  
    {  
        public BottomBar()  
        {  
            InitializeComponent();  
        }  
  
        Frame frame = (Application.Current.MainWindow as MainWindow).PageFrame;  
  
        private void BackClick(object sender, RoutedEventArgs e)  
        {  
            if(frame.CanGoBack)  
            {  
                frame.GoBack();  
            }  
        }  
  
        private void HomeClick(object sender, RoutedEventArgs e)  
        {  
            frame.Navigate(new Uri("LoginPage.xaml", UriKind.RelativeOrAbsolute));  
        }  
  
        private void ExitClick(object sender, RoutedEventArgs e)  
        {  
            Application.Current.Shutdown();  
        }  
    }  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.