Create Menus In WPF

Overview

In this article, we will see how to create menus in WPF and load its respective page or form. As there are many ways to create the menus in WPF, I had done it by using frame. Create a form and target that form on the frame. You can find many ways of creating menus in WPF .

Note

For those who are familiar with Windows Applications in Window form, we can create MDI. In WPF, we cannot create MDI forms.

So Let's Start

• Open Visual Studio
  
  We will be using the same solution which we used for logging in to WPF using N tier architecture. You can download the existing solution here,
  
  WPF Login with N-Tier Architecture
  
  
• Now, let's add the images. I had added images in images folder, shown below:
  
  
  
  
• After adding the images, we write the code for MainScreen, i.e Dashboardd, as shown below:
  
  1. <Window x:Class="The_Parcel.MainScreen"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Height="{Binding SystemParameters.PrimaryScreenHeight}"
  5. Width="{Binding SystemParameters.PrimaryScreenWidth}"
  6. Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >
• As you can see, Title is Dashboard; give the suitable name that will appear on top of the screen.
  
  
• Windowstartuplocation: Centerscreen is a screen, which will open at the center.
  
• WindowState: Maximizes full mode sceren.
  
• WindowStartupLocation: By setting it to centerscreen, it will open in the middle of the sceren, when you run your solution .

Similarly WindowState: Maxmized and Minimized

• Maximized: The Window will open in the full screen mode, whereas Minimized will open in a small screen mode.
  
  
• Now, let's add an image background and imagebrush property, as shown below:
  
  1. <Window.Background>
  2. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
  3. </Window.Background>
  4. <Window.Resources>
  5. <ImageBrush x:Key="Background1" ImageSource="Images/17_Booksellers_Most.jpg" />
  6. <ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />
  7. <ImageBrush x:Key="Background3" ImageSource="Images/smsalerts.jpg" />
  8. <ImageBrush x:Key="Background4" ImageSource="Images1/reports.jpg" />
  9. <ImageBrush x:Key="Background5" ImageSource="Images1/xyz.png" />
  10. <ImageBrush x:Key="Background6" ImageSource="Images1/partyorders.jpg" />
  11. <ImageBrush x:Key="Background7" ImageSource="Images/help_balloon.png" />
  12. <ImageBrush x:Key="Background8" ImageSource="Images1/neworder.jpg" />
  13. <ImageBrush x:Key="Background9" ImageSource="Images1/inventory.png" />
  14. <ImageBrush x:Key="Background10" ImageSource="Images1/Loyalcustomers.jpg" />
  15. <ImageBrush x:Key="Background11" ImageSource="Images1/oie_3svVKQ9e5T5o.png" />
  16. </Window.Resources>
• Remember the keys for which you are specifying for the button.
  
• Now add the buttons.
  
  We have specified the keys for each button, as shown below:
  
  1. <ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />
  Now, by adding the buttons, let's bind those keys by {staticResource ResourceKey=”ItsBackground”},
  
  1. <Viewbox Stretch="Uniform">
  2. <Grid Height="950" Width="1500">
  3. <Grid Height="950">
  4. <Grid.ColumnDefinitions>
  5. <ColumnDefinition Width="435*" />
  6. <ColumnDefinition Width="723*" />
  7. </Grid.ColumnDefinitions>
  8. <Button Background="{StaticResource ResourceKey=Background3}" ToolTip="Send SMS and Email." Height="91" HorizontalAlignment="Left" Name="btnSMSEmail" VerticalAlignment="Top" Width="100" Click="btnSMSEmail_Click" Grid.Column="1" Margin="19,8,0,0">
  10. </Button>
  11. <Button Background="{StaticResource ResourceKey=Background5}" ToolTip="Manage employee data." Height="92" HorizontalAlignment="Left" Margin="473,7,0,0" Name="btnEmpDetails" VerticalAlignment="Top" Width="90" Click="btnEmpDetails_Click">
  13. </Button>
  14. <Button Background="{StaticResource ResourceKey=Background7}" ToolTip="Need help click here." Height="91" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btnHelp" VerticalAlignment="Top" Width="92" Grid.Column="1" Click="btnHelp_Click">
  16. </Button>
  17. <Button Background="{StaticResource ResourceKey=Background8}" Height="91" ToolTip="Place New Order" HorizontalAlignment="Left" Margin="14,7,0,0" Name="btnOrder" VerticalAlignment="Top" Width="92" Click="btnOrder_Click">
  19. </Button>
  20. <Button Background="{StaticResource ResourceKey=Background9}" ToolTip="View Reports" Height="91" HorizontalAlignment="Left" Margin="132,7,0,0" Name="btnInventory" VerticalAlignment="Top" Width="92" Click="btnInventory_Click">
  22. </Button>
  23. <Button Background="{StaticResource ResourceKey=Background10}" ToolTip="View your customers." Height="92" HorizontalAlignment="Left" Margin="365,7,0,0" Name="btnCustomer" VerticalAlignment="Top" Width="92" Click="btnCustomer_Click" Grid.ColumnSpan="2">
  25. </Button>
  26. <Button Background="{StaticResource ResourceKey=Background11}" ToolTip="Party orders coming soon.." Height="92" HorizontalAlignment="Left" Margin="250,6,0,0" Name="btnPartyOrders" VerticalAlignment="Top" Width="92" Click="btnPartyOrders_Click_1">
  28. </Button>
• Hence, it's going to look like the menus now, as shown below:
  
  
  
  
• Now, let's add a frame in which our respective form will be displayed.
  
  A normal <Frame></Frame> Tag will now be created here. I had specified some properties like vertical alignment, width and so on. You can explore more properties.
  
  1. VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2"
  2. <Frame Height="900" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>
• Final Code
  
  MainScren.Xaml
  
  1. <Window x:Class="The_Parcel.MainScreen"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Height="{Binding SystemParameters.PrimaryScreenHeight}"
  5. Width="{Binding SystemParameters.PrimaryScreenWidth}"
  6. Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >
  7. <Window.Background>
  8. <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />
  9. </Window.Background>
  10. <Window.Resources>
  11. <ImageBrush x:Key="Background1" ImageSource="Images/17_Booksellers_Most.jpg" />
  12. <ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />
  13. <ImageBrush x:Key="Background3" ImageSource="Images/smsalerts.jpg" />
  14. <ImageBrush x:Key="Background4" ImageSource="Images1/reports.jpg" />
  15. <ImageBrush x:Key="Background5" ImageSource="Images1/xyz.png" />
  16. <ImageBrush x:Key="Background6" ImageSource="Images1/partyorders.jpg" />
  17. <ImageBrush x:Key="Background7" ImageSource="Images/help_balloon.png" />
  18. <ImageBrush x:Key="Background8" ImageSource="Images1/neworder.jpg" />
  19. <ImageBrush x:Key="Background9" ImageSource="Images1/inventory.png" />
  20. <ImageBrush x:Key="Background10" ImageSource="Images1/Loyalcustomers.jpg" />
  21. <ImageBrush x:Key="Background11" ImageSource="Images1/oie_3svVKQ9e5T5o.png" />
  22. </Window.Resources>
  23. <Viewbox Stretch="Uniform">
  24. <Grid Height="950" Width="1500">
  25. <Grid Height="950">
  26. <Grid.ColumnDefinitions>
  27. <ColumnDefinition Width="435*" />
  28. <ColumnDefinition Width="723*" />
  29. </Grid.ColumnDefinitions>
  30. <Button Background="{StaticResource ResourceKey=Background3}" ToolTip="Send SMS and Email." Height="91" HorizontalAlignment="Left" Name="btnSMSEmail" VerticalAlignment="Top" Width="100" Click="btnSMSEmail_Click" Grid.Column="1" Margin="19,8,0,0">
  32. </Button>
  33. <Button Background="{StaticResource ResourceKey=Background5}" ToolTip="Manage employee data." Height="92" HorizontalAlignment="Left" Margin="473,7,0,0" Name="btnEmpDetails" VerticalAlignment="Top" Width="90" Click="btnEmpDetails_Click">
  35. </Button>
  36. <Button Background="{StaticResource ResourceKey=Background7}" ToolTip="Need help click here." Height="91" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btnHelp" VerticalAlignment="Top" Width="92" Grid.Column="1" Click="btnHelp_Click">
  38. </Button>
  39. <Button Background="{StaticResource ResourceKey=Background8}" Height="91" ToolTip="Place New Order" HorizontalAlignment="Left" Margin="14,7,0,0" Name="btnOrder" VerticalAlignment="Top" Width="92" Click="btnOrder_Click">
  41. </Button>
  42. <Button Background="{StaticResource ResourceKey=Background9}" ToolTip="View Reports" Height="91" HorizontalAlignment="Left" Margin="132,7,0,0" Name="btnInventory" VerticalAlignment="Top" Width="92" Click="btnInventory_Click">
  44. </Button>
  45. <Button Background="{StaticResource ResourceKey=Background10}" ToolTip="View your customers." Height="92" HorizontalAlignment="Left" Margin="365,7,0,0" Name="btnCustomer" VerticalAlignment="Top" Width="92" Click="btnCustomer_Click" Grid.ColumnSpan="2">
  47. </Button>
  48. <Button Background="{StaticResource ResourceKey=Background11}" ToolTip="Party orders coming soon.." Height="92" HorizontalAlignment="Left" Margin="250,6,0,0" Name="btnPartyOrders" VerticalAlignment="Top" Width="92" Click="btnPartyOrders_Click_1">
  50. </Button>
  52. <Frame Height="900" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>
  53. </Grid>
  55. </Grid>
  56. </Viewbox>
  57. </Window>
• Double click on the each button and you will see as shown below:
  (you need to specify the action for the buttons OnClick).
  
  
  
  Now, let's add a simple form, as shown below:
  
  
  
  
• Select the page, as shown below:
  
  
  
  Give Suitable Name
  
  Add what you want as I had added a software version
  
  Page2.Xaml
  
  1. <Page x:Class="The_Parcel.Page1"
  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. mc:Ignorable="d"
  7. d:DesignHeight="192" d:DesignWidth="469"
  8. Title="Page1">
  10. <Grid Height="958" Width="604">
  11. <Grid.ColumnDefinitions>
  12. <ColumnDefinition Width="7*" />
  13. <ColumnDefinition Width="1169*" />
  14. </Grid.ColumnDefinitions>
  15. <Grid.RowDefinitions>
  16. <RowDefinition Height="361*" />
  17. <RowDefinition Height="597*" />
  18. </Grid.RowDefinitions>
  19. <RichTextBox SpellCheck.IsEnabled="True" Margin="4,8,0,43" Name="RichTextBox1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="588" Height="310" FontSize="18" FontFamily="Tahoma" IsReadOnly="True" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Visible" >
  20. <FlowDocument>
  21. <Paragraph>
  22. <Bold FontFamily="Tahoma">Welcome To Parcel V 1.0 .</Bold>
  23. </Paragraph>
  27. </FlowDocument>
  28. </RichTextBox>
  29. </Grid>
  30. </Page>
• Now, let's move back to Mainscreen.xaml.cs and just write as shown below:
  
  1. private void btnHelp_Click(object sender, RoutedEventArgs e)
  2. {
  3. frame1.Source = new Uri("Page2.xaml", UriKind.Relative);
  4. }
• Final Mainscrren.xaml.cs code
  
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Shapes;
  13. using System.Data.SqlClient;
  14. using System.Collections.Generic;
  15. using System.ComponentModel;
  16. using System.Configuration;
  19. namespace The_Parcel
  20. {
  21. /// <summary>
  22. /// Interaction logic for Window1.xaml
  23. /// </summary>
  24. public partial class MainScreen : Window
  25. {
  27. // Uri iconUri = new Uri("pack://application:,,,/Icon1.ico", UriKind.RelativeOrAbsolute);
  28. //this.Icon = BitmapFrame.Create(iconUri);
  29. // public static string strconn = ConfigurationManager.ConnectionStrings["HotemManagement"].ConnectionString;
  30. // SqlConnection connection = new SqlConnection(strconn);
  31. public MainScreen()
  32. {
  33. InitializeComponent();
  34. }
  36. private void btnOrder_Click(object sender, RoutedEventArgs e)
  37. {
  41. }
  43. private void btnEmpDetails_Click(object sender, RoutedEventArgs e)
  44. {
  46. }
  48. private void btnSMSEmail_Click(object sender, RoutedEventArgs e)
  49. {
  51. }
  53. private void btnCustomer_Click(object sender, RoutedEventArgs e)
  54. {
  56. }
  58. private void btnPartyOrders_Click_1(object sender, RoutedEventArgs e)
  59. {
  60. //frame1.Source = new Uri("Partorders.xaml", UriKind.Relative);
  61. MessageBox.Show("Coming Soon.......");
  62. }
  64. private void btnHelp_Click(object sender, RoutedEventArgs e)
  65. {
  66. frame1.Source = new Uri("Page2.xaml", UriKind.Relative);
  67. }
  69. private void btnInventory_Click(object sender, RoutedEventArgs e)
  70. {
  72. }
  73. }
  74. }
  Hence, our final dashboard will look as shown below:
  
  
  

Conclusion

Here are the menus in WPF (simple menus). I hope this article was helpful.