WPF Creating a Menu

Having only recently started learning WPF, I find that I often forget how to do things after a few weeks. Todays post is a simple How-To for creating menus.

Lets start by defining a grid with two rows, the first one will contain our menu, the second has everything else:

<Grid x:Name="grid1">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="22" />
    <RowDefinition />
  </Grid.RowDefinitions>

  <!-- Our menu will go here -->
  <!-- The rest of our controls go here -->
</Grid>

Next, we create the File menu with 5 menu items:

<Menu Grid.Column="0" Grid.Row="0" VerticalAlignment="Top">
  <MenuItem Header="_File">
    <MenuItem x:Name="NewMenu" Header="_New" ToolTip="Creates a new file" InputGestureText="CTRL+N" Click="MenuHandler_Click"/>
    <MenuItem x:Name="OpenMenu" Header="_Open..." ToolTip="Opens a new file" InputGestureText="CTRL+O" Click="MenuHandler_Click"/>
    <MenuItem x:Name="SaveMenu" Header="_Save" ToolTip="Saves the current file" InputGestureText="CTRL+S" Click="MenuHandler_Click"/>
    <MenuItem x:Name="SaveAsMenu" Header="Save _As" ToolTip="Saves the current file" Click="MenuHandler_Click"/>
    <Separator/>
    <MenuItem x:Name="ExitMenu" Header="E_xit" ToolTip="Exits the program" Click="MenuHandler_Click"/>
  </MenuItem>
</Menu>

Most menus have icons. Lets modify the NewMenu and OpenMenu menu items:

<MenuItem x:Name="NewMenu" Header="_New" ToolTip="Creates a new file" InputGestureText="CTRL+N" Click="MenuHandler_Click">
  <MenuItem.Icon>
    <Image Source="{StaticResource FileIcon}" Width="16" Height="16" />
  </MenuItem.Icon>
</MenuItem>
<MenuItem x:Name="OpenMenu" Header="_Open..." ToolTip="Opens a new file" InputGestureText="CTRL+O" Click="MenuHandler_Click">
  <MenuItem.Icon>
    <Image Source="{StaticResource OpenIcon}" Width="16" Height="16" />
  </MenuItem.Icon>
</MenuItem>

Our resource dictionary is next, this should appear at the top of the file before the Grid:

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Resources/FileIcon.xaml" />
      <ResourceDictionary Source="Resources/OpenIcon.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

The last step is to create the menu handler in the code behind file:

private void MenuHandler_Click(object sender, RoutedEventArgs e)
{
  MenuItem item = (MenuItem)sender;
  switch (item.Name)
  {
    case "NewMenu":
      // New code...
      break;

    case "OpenMenu":
      // Open code...
      break;
      
      // etc...
  }
}
Advertisements
This entry was posted in Tips and Tricks and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s