1. Create and Connect Windows

Create Project

Let’s start with creating the project.

1. In your Visual Studio, go to Create a New Project tab.
2. Find a project template named WPF App (.NET framework).
3. Using that template, create a project at the location you want.

Create Windows

The template comes with a MainWindow. You are going to create three more windows and build the draft UI components of all windows.

ManageDishes, SingleSuggestion, and MultipleSuggestions Windows

1. Go to Add New Item tab for this project.
2. Select the Window (WPF) template and modify the item name on the bottom to ManageDishes.xaml.
3. Click on Add button.
4. Go to the file and add a button named backBtn. You can use the Visual Studio toolbox (drag and drop) or write code to do this. Check the provided code below to understand better. It is for the most outer grid.

   <Grid>
       <Button x:Name="backBtn" Content="Back to Main"  HorizontalAlignment="Left" Margin="241,158,0,0" VerticalAlignment="Top" Width="332" Height="79"/>
   </Grid>
   

5. Do the same (steps 1-4) for the other two windows using item names SingleSuggestion.xaml and MultipleSuggestions.xaml.

Main Window

1. Go to MainWindow.xaml file and add buttons named manageDishesBtn, singleSuggestionBtn, multipleSuggestionBtn, and exitBtn. Check the provided code below to understand better.

   <Grid>
       <Button x:Name="manageDishesBtn" Content="Manage Dishes" HorizontalAlignment="Left" Margin="223,24,0,0" VerticalAlignment="Top" Width="350" Height="73" />
       <Button x:Name="singleSuggestionBtn" Content="Single Meal Suggestion" HorizontalAlignment="Left" Margin="223,119,0,0" VerticalAlignment="Top" Width="350" Height="73" />
       <Button x:Name="multipleSuggestionBtn" Content="Multiple Meal Plan Suggestions" HorizontalAlignment="Left" Margin="223,212,0,0" VerticalAlignment="Top" Width="350" Height="73" />
       <Button x:Name="exitBtn" Content="Exit" HorizontalAlignment="Left" Margin="223,307,0,0" VerticalAlignment="Top" Width="350" Height="73" />
   </Grid>
   

Connect Windows

ManageDishes, SingleSuggestion, and MultipleSuggestions Windows

1. Go to ManageDishes.xaml.cs.
2. Add a MainWindow field named ParentWindow.
3. Find the constructor, add a MainWindow argument, and use it to set ParentWindow. Check the code below to understand better.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Windows;
   using System.Windows.Controls;
   
   namespace Meal_Suggestion_App
   {
       public partial class ManageDishes : Window
       {
           public MainWindow ParentWindow { get; private set; }
           public ManageDishes(MainWindow parent)
           {
               InitializeComponent();
   
               //assign the given argument to ParentWindow
               this.ParentWindow = parent;
           }
       }
   }
   

4. Do the same (steps 2-3) for SingleSuggestion.xaml.cs and MultipleSuggestions.xaml.cs.

Main Window

1. Go to MainWindow.xaml.cs.
2. Under the constructor, add these functions provided in the code below. The exitBtn_Click will close this window.  The other event handlers hide this MainWindow itself after opening a new window for ManageDishes, SingleSuggestion, or MultipleSuggestions Window.

   private void exitBtn_Click(object sender, RoutedEventArgs e)
   {
       this.Close();
   }
   
   private void manageDishesBtn_Click(object sender, RoutedEventArgs e)
   {
       //create and show a Manage Dishes window
       ManageDishes manageDishes = new ManageDishes(this);
       manageDishes.Show();
   
       //hide this Main Window
       this.Hide();
   }
   
   private void singleSuggestionBtn_Click(object sender, RoutedEventArgs e)
   {
       //create and show a Single Suggestions window
       SingleSuggestion singleSuggestion = new SingleSuggestion(this);
       singleSuggestion.Show();
   
       //hide this Main Window
       this.Hide();
   }
   
   private void multipleSuggestionBtn_Click(object sender, RoutedEventArgs e)
   {
       //create and show a Multiple Suggestions window
       MultipleSuggestions multipleSuggestions = new MultipleSuggestions(this);
       multipleSuggestions.Show();
   
       //hide this Main Window
       this.Hide();
   }
   

3. Go to MainWindow.xaml and add event handlers for each button. Add Click="manageDishesBtn_Click" for manageDishesBtn button, Click="singleSuggestionBtn_Click" for singleSuggestionBtn button, Click="multipleSuggestionBtn_Click" for multipleSuggestionBtn button, and Click="exitBtn_Click" for exitBtn button. Please note that an easier way to create and connect empty event handlers is just double clicking on the button component in Visual Studio’s Design window for XAML files.

Back Buttons

1. Go to ManageDishes.xaml.cs.
2. Add this event handler below.

   private void backBtn_Click(object sender, RoutedEventArgs e)
   {
       //show the ParentWindow and close this window 
       ParentWindow.Show();
       this.Close();
   }
   

3. Go to ManageDishes.xaml.
4. Add Click="backBtn_Click" for backBtn button.

Check Your Code

After following this chapter, your app should be able to:

• show MainWindow with four buttons (manageDishesBtn, singleSuggestionBtn, multipleSuggestionBtn, exitBtn)  when starting the app
• exit or move to each window when clicking on buttons
• navigate back to the MainWindow when clicking on backBtn on ManageDishes, SingleSuggestion, and MultipleSuggestions Windows.