Post
Ask Question

WPF - File Menu User Control

Desktop development is one of the key areas for building client-side applications, of course, other areas include web applications, mobile applications, 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. The first one is Windows form and the second one is Windows Presentation Form (WPF). I will be focusing more on the development of the second track; i.e., WPF as WPF offers more rich and interactive software development as compared to windows form especially in UI/UX designing.

Today, I will 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 of Windows Presentation Form (WPF).
  2. Knowledge of C# programming.
  3. Knowledge of 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.

Let's begin now.

Step 1

Create a new WPF application project and name it "File Menu Controls".

Step 2

Create "Views\MenuUserControl.xaml" file and replace following code in it i.e.

  1. <UserControl x:Class="File_Menu_Controls.Views.MenuUserControl"  
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
  6.              xmlns:local="clr-namespace:File_Menu_Controls.Views"  
  7.              mc:Ignorable="d"   
  8.              d:DesignHeight="480" d:DesignWidth="640">  
  9.     <Grid>  
  10.         <Menu>  
  11.             <MenuItem Header="File"  
  12.                       FontSize="14">  
  13.   
  14.                 <MenuItem Header="Menu-1 Level-1"  
  15.                       FontSize="14">  
  16.   
  17.                     <MenuItem Header="Menu-1 Level-2"  
  18.                       FontSize="14">  
  19.   
  20.                         <MenuItem Header="Menu-1 Level-3"  
  21.                       FontSize="14"/>  
  22.   
  23.                         <MenuItem Header="Menu-2 Level-3"  
  24.                       FontSize="14"/>                          
  25.                           
  26.                     </MenuItem>  
  27.   
  28.                     <MenuItem Header="Menu-2 Level-2"  
  29.                       FontSize="14"/>  
  30.   
  31.                 </MenuItem>  
  32.   
  33.                 <MenuItem  Header="Exit"  
  34.                            FontSize="14"  
  35.                            Click="Exit_Click"/>  
  36.             </MenuItem>  
  37.   
  38.             <MenuItem Header="Edit"   
  39.                       FontSize="14">  
  40.   
  41.                 <MenuItem Header="Undo"  
  42.                           FontSize="14">  
  43.                     <MenuItem.Icon>  
  44.                         <Image Source="/Content/img/undo.ico" Width="16" Height="16" />  
  45.                     </MenuItem.Icon>  
  46.                 </MenuItem>  
  47.   
  48.                 <MenuItem Header="Redo"  
  49.                           FontSize="14"  
  50.                           IsEnabled="False">  
  51.                     <MenuItem.Icon>  
  52.                         <Image Source="/Content/img/redo.ico" Width="16" Height="16" />  
  53.                     </MenuItem.Icon>  
  54.                 </MenuItem>  
  55.   
  56.                 <MenuItem Header="Cut"  
  57.                       FontSize="14">  
  58.   
  59.                     <MenuItem.Icon>  
  60.                         <Image Source="/Content/img/cut.ico" Width="16" Height="16" />  
  61.                     </MenuItem.Icon>  
  62.                 </MenuItem>  
  63.   
  64.                 <MenuItem Header="Copy"  
  65.                       FontSize="14">  
  66.   
  67.                     <MenuItem.Icon>  
  68.                         <Image Source="/Content/img/copy.ico" Width="16" Height="16" />  
  69.                     </MenuItem.Icon>  
  70.                 </MenuItem>  
  71.   
  72.                 <MenuItem Header="Paste"  
  73.                       FontSize="14">  
  74.   
  75.                     <MenuItem.Icon>  
  76.                         <Image Source="/Content/img/paste.ico" Width="16" Height="16" />  
  77.                     </MenuItem.Icon>  
  78.                 </MenuItem>  
  79.             </MenuItem>  
  80.   
  81.             <MenuItem Header="Help"  
  82.                           FontSize="14">  
  83.                 <MenuItem Header="About Us"  
  84.                               FontSize="14"/>  
  85.   
  86.             </MenuItem>  
  87.         </Menu>  
  88.     </Grid>  
  89. </UserControl> 

In the above code, I have simply created a simple menu structure for my file menu which I will be going to use within my application. Notice that file menu in desktop software is an essential component for navigation to particular features unlike the UI/UX style of web or mobile based 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 the menu or changes in an existing item, I can simply go to my user control and make a change there, which will then automatically reflect on each screen which uses my user control.

Step 3

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using System.Windows;  
  7. using System.Windows.Controls;  
  8. using System.Windows.Data;  
  9. using System.Windows.Documents;  
  10. using System.Windows.Input;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Imaging;  
  13. using System.Windows.Navigation;  
  14. using System.Windows.Shapes;  
  15.   
  16. namespace File_Menu_Controls.Views  
  17. {  
  18.     /// <summary>  
  19.     /// Interaction logic for MenuUserControl.xaml  
  20.     /// </summary>  
  21.     public partial class MenuUserControl : UserControl  
  22.     {  
  23.         public MenuUserControl()  
  24.         {  
  25.             InitializeComponent();  
  26.         }  
  27.   
  28.         private void Exit_Click(object sender, RoutedEventArgs e)  
  29.         {  
  30.             MainWindow window = Application.Current.MainWindow as MainWindow;  
  31.             window.Close();  
  32.         }  
  33.     }  
  34. } 

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.

Step 4

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

  1. <Page x:Class="File_Menu_Controls.Views.HomePage"  
  2.       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
  5.       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
  6.       xmlns:local="clr-namespace:File_Menu_Controls.Views"  
  7.       mc:Ignorable="d"   
  8.       d:DesignHeight="480" d:DesignWidth="640"  
  9.       Title="HomePage">  
  10.   
  11.     <Grid>  
  12.         <DockPanel>  
  13.             <local:MenuUserControl x:Name="menuBar"   
  14.                                    DockPanel.Dock="Top"/>  
  15.   
  16.   
  17.         </DockPanel>  
  18.     </Grid>  
  19. </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.

Step 5

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

  1. <Window x:Class="File_Menu_Controls.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6.         xmlns:local="clr-namespace:File_Menu_Controls"  
  7.         mc:Ignorable="d"  
  8.         Title="MainWindow" Height="480" Width="640">  
  9.     <Grid>  
  10.         <Grid.Background>  
  11.             <ImageBrush ImageSource="Content/img/bg.jpg"/>  
  12.         </Grid.Background>  
  13.         <Frame x:Name="mainFrame"   
  14.                NavigationUIVisibility="Hidden"/>  
  15.     </Grid>  
  16. </Window> 

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

Step 6

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

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using System.Windows;  
  7. using System.Windows.Controls;  
  8. using System.Windows.Data;  
  9. using System.Windows.Documents;  
  10. using System.Windows.Input;  
  11. using System.Windows.Media;  
  12. using System.Windows.Media.Imaging;  
  13. using System.Windows.Navigation;  
  14. using System.Windows.Shapes;  
  15.   
  16. namespace File_Menu_Controls  
  17. {  
  18.     /// <summary>  
  19.     /// Interaction logic for MainWindow.xaml  
  20.     /// </summary>  
  21.     public partial class MainWindow : Window  
  22.     {  
  23.         public MainWindow()  
  24.         {  
  25.             InitializeComponent();  
  26.   
  27.             this.Loaded += MainWindow_Loaded;  
  28.         }  
  29.   
  30.         private void MainWindow_Loaded(object sender, RoutedEventArgs e)  
  31.         {  
  32.             this.mainFrame.Navigate(new Uri("/Views/HomePage.xaml", UriKind.Relative));  
  33.         }  
  34.     }  
  35. } 

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

Step 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.

Step 8

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

  1. <Page x:Class="File_Menu_Controls.Views.HomePage"  
  2.       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
  5.       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
  6.       xmlns:local="clr-namespace:File_Menu_Controls.Views"  
  7.       mc:Ignorable="d"   
  8.       d:DesignHeight="480" d:DesignWidth="640"  
  9.       Title="HomePage">  
  10.   
  11.     <Grid>  
  12.         <DockPanel>  
  13.             <local:MenuUserControl x:Name="menuBar"   
  14.                                    DockPanel.Dock="Top"/>  
  15.   
  16.             <Grid></Grid>  
  17.   
  18.         </DockPanel>  
  19.     </Grid>  
  20. </Page> 

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

Step 9

Now, execute the project and you will see it as below:



Conclusion

In this article, you learned to create file menu for WPF applications and also saw how to create user controls for WPF application. We also learned how to use DockPanel layout control.


Disclaimer

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


Similar Articles