WPF: File Menu User Control

Desktop development is one of the key area for building client side applications, of course other areas include web applications, mobile application, tablet applications and so on. With the rise of web development the future of desktop software development seems a bit shady, but, one cannot deny its existence entirely as it is the only offline solution to non-internet accessible applications.
There are two tracks in desktop development. First one is windows form and second one is Windows Presentation Form (WPF). I will be focusing more on the development of second track i.e. WPF as WPF offers more rich and interactive software development as compare to windows form especially in UI/UX designing.

Today, I shall be demonstrating implementation of two key concepts of WPF i.e. file menu and user controls.

Prerequisites:

Following are some prerequisites before you proceed further in this tutorial:

1. Knowledge about Windows Presentation Form (WPF).
2. Knowledge about C# programming.
3. Knowledge about C# LINQ.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

Let's begin now.

1) Create a new WPF application project and name it "File Menu Controls".
2) Create "Views\MenuUserControl.xaml" file and replace following code in it i.e.

<UserControl x:Class="File_Menu_Controls.Views.MenuUserControl"
             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:File_Menu_Controls.Views"
             mc:Ignorable="d" 
             d:DesignHeight="480" d:DesignWidth="640">
    <Grid>
        <Menu>
            <MenuItem Header="File"
                      FontSize="14">

                <MenuItem Header="Menu-1 Level-1"
                      FontSize="14">

                    <MenuItem Header="Menu-1 Level-2"
                      FontSize="14">

                        <MenuItem Header="Menu-1 Level-3"
                      FontSize="14"/>

                        <MenuItem Header="Menu-2 Level-3"
                      FontSize="14"/>                        
                        
                    </MenuItem>

                    <MenuItem Header="Menu-2 Level-2"
                      FontSize="14"/>

                </MenuItem>

                <MenuItem  Header="Exit"
                           FontSize="14"
                           Click="Exit_Click"/>
            </MenuItem>

            <MenuItem Header="Edit" 
                      FontSize="14">

                <MenuItem Header="Undo"
                          FontSize="14">
                    <MenuItem.Icon>
                        <Image Source="/Content/img/undo.ico" Width="16" Height="16" />
                    </MenuItem.Icon>
                </MenuItem>

                <MenuItem Header="Redo"
                          FontSize="14"
                          IsEnabled="False">
                    <MenuItem.Icon>
                        <Image Source="/Content/img/redo.ico" Width="16" Height="16" />
                    </MenuItem.Icon>
                </MenuItem>

                <MenuItem Header="Cut"
                      FontSize="14">

                    <MenuItem.Icon>
                        <Image Source="/Content/img/cut.ico" Width="16" Height="16" />
                    </MenuItem.Icon>
                </MenuItem>

                <MenuItem Header="Copy"
                      FontSize="14">

                    <MenuItem.Icon>
                        <Image Source="/Content/img/copy.ico" Width="16" Height="16" />
                    </MenuItem.Icon>
                </MenuItem>

                <MenuItem Header="Paste"
                      FontSize="14">

                    <MenuItem.Icon>
                        <Image Source="/Content/img/paste.ico" Width="16" Height="16" />
                    </MenuItem.Icon>
                </MenuItem>
            </MenuItem>

            <MenuItem Header="Help"
                          FontSize="14">
                <MenuItem Header="About Us"
                              FontSize="14"/>

            </MenuItem>
        </Menu>
    </Grid>
</UserControl>

In the above code, I have simply created a simple menu structure for my file menu which I will going to use within my application. Notice that file menu in desktop software is essential component for navigation to particular features unlike the UI/UX style of web or mobile base applications, this means that every window or page within the window I create will eventually require file menu as essential part of the application, this means that I need this particular component again and again in my application. So, the reason I have created file menu as User Control is simple i.e. I want to reuse my component instead of rebuilding it again and again on each screen. So, I have created my complex file menu as a user control which means that for every new item within menu or change in existing item, I can simply go to my user control and make change their, which will then automatically reflect on each screen which uses my user control.

3) Open the "Views\MenuUserControl.xaml\MenuUserControl.cs" file and replace following code in it i.e.

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 File_Menu_Controls.Views
{
    /// <summary>
    /// Interaction logic for MenuUserControl.xaml
    /// </summary>
    public partial class MenuUserControl : UserControl
    {
        public MenuUserControl()
        {
            InitializeComponent();
        }

        private void Exit_Click(object sender, RoutedEventArgs e)
        {
            MainWindow window = Application.Current.MainWindow as MainWindow;
            window.Close();
        }
    }
}

Those of you who are familiar with XAML technology, knows that every *.xaml file is attached with *.cs file. So, in the above code, I have added exit method code for exit menu item only.

4) Now, create a new page "Views\HomePage.xaml" file and replace following code in it i.e.

<Page x:Class="File_Menu_Controls.Views.HomePage"
      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:File_Menu_Controls.Views"
      mc:Ignorable="d" 
      d:DesignHeight="480" d:DesignWidth="640"
      Title="HomePage">

    <Grid>
        <DockPanel>
            <local:MenuUserControl x:Name="menuBar" 
                                   DockPanel.Dock="Top"/>


        </DockPanel>
    </Grid>
</Page>

In the above code, I have added my file menu user control to my page and notice that I have added my file menu user control within the DockPanel layout control. The reason is simple i.e. with the help of DockPanel layout control, I have fixed the position of the menu at the top otherwise the menu will float on the screen, So, now all other elements or controls will be added within the DockPanel after the file menu user control.

5) We need to attach the page inside the main window so, open the "MainWindow.xaml" file and replace following in it i.e.

<Window x:Class="File_Menu_Controls.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:File_Menu_Controls"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="640">
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Content/img/bg.jpg"/>
        </Grid.Background>
        <Frame x:Name="mainFrame" 
               NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

In the above code, I have add a default background image taken from freepike and a frame which will contain my page and window will immediate navigate to the main page.

6) Open the "MainWindow.xaml\MainWindow.cs" file and replace following code in it i.e.

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 File_Menu_Controls
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            this.mainFrame.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative));
        }
    }
}

The above piece of code will navigate the frame to our main page when the window is launched.

7) Execute the project and you will be able to see following i.e.

In the above snippet, notice that the file menu user control will take the entire screen, this is default behavior since there is no other element in the home page so add a grid tag after the file menu user control.

8) Open the "Views\HomePage.xaml" file and replace following in it i.e.

<Page x:Class="File_Menu_Controls.Views.HomePage"
      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:File_Menu_Controls.Views"
      mc:Ignorable="d" 
      d:DesignHeight="480" d:DesignWidth="640"
      Title="HomePage">

    <Grid>
        <DockPanel>
            <local:MenuUserControl x:Name="menuBar" 
                                   DockPanel.Dock="Top"/>

            <Grid></Grid>

        </DockPanel>
    </Grid>
</Page>

In the above code, I have simply added the empty grid tag.

9) Now, execute the project and you will see as below i.e.

Conclusion

In this article, you will learn to create file menu for WPF applications. You will also learn to create user controls for WPF application. You will also learn to use DockPanel layout control, you will learn to add background to the main window, you will learn to add page within the window by using frame control and you will also learn about accessing the created user control inside your page.

Disclaimer

The background image use in this article has been taken from freepike.