UXMenuBar is a full-featured menu bar with access key, command and customizable style.

This walkthrough guides you to add various menu item types that can be used in UXMenuBar along with its access key and open sub menu behavior. Many of the designer tasks can be easily done by using supported development environments such as Expression Blend.

In this walkthrough, you perform the following tasks:

• Add a new MenuBar to the designer.

• Add MenuItem, and Separator to the MenuBar using Blend designer.

• Set the access key of the MenuBar.

• Set the open sub menu behavior.

• Set the input gesture text and other UXMenuItem properties.

Prerequisites

You need the following components to complete this walkthrough:

• Microsoft Expression Blend 4

Creating New Silverlight Application and Website Project

The first step is to create a new Silverlight Application and Website project in Microsoft Expression Blend 4.

To create a new Silverlight application and Website project

1. Launch Microsoft Expression Blend 4.

2. Create a new Silverlight project using the Silverlight Application + Website project template. Named the project as AddMenuItemAndSeparatorToMenuBarInBlendDesigner.

Add and Configure MenuBar

This section describes how to add and configure MenuBar and all its MenuItem using Blend designer. This walkthrough guides you to create a window that modeled upon Notepad user interface.

To add and configure MenuBar

1. Add a UXWindow into the MainPage.xaml page.

2. In the Properties window, set the following properties of UXWindow.

   Property	Value
   Name	MyNotesUXWindow
   Header	My Notes
   Width	400
   Height	400
   VerticalAlignment	Center
   HorizontalAlignment	Center
   IsActive	True
   IsClientVisible	True
   HeaderMargin	4,4,4,4
   HeaderDisplayMode	Content
   CanResize	False
   ContentBorderBrush	#FFCDCDCD

   The following markup is added to XAML view.

   XAML	Copy Code
   <Intersoft:UXWindow x:Name="MyNotesUXWindow" Header="My Notes" Width="400" Height="400" VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" IsClientVisible="True" HeaderMargin="4,4,4,4" HeaderDisplayMode="Content" CanResize="False" ContentBorderBrush="#FFCDCDCD"> </Intersoft:UXWindow>

   

3. Add Grid into the MyNotesUXWindow.

   The following markup is added to XAML view.

   XAML	Copy Code
   <Intersoft:UXWindow x:Name="MyNotesUXWindow" Header="My Notes" Width="400" Height="400" VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" IsClientVisible="True" HeaderMargin="4,4,4,4" HeaderDisplayMode="Content" CanResize="False" ContentBorderBrush="#FFCDCDCD"> <Grid/> </Intersoft:UXWindow>

4. Add Intersoft:DockPanel into the Grid control and set the FillChildMode property to Custom.

   The following markup is added to XAML view.

   XAML	Copy Code
   <Grid> <Intersoft:DockPanel FillChildMode="Custom" /> </Grid>

5. Add UXMenuBar into the Intersoft:DockPanel control. Set the Name property to MenuBar1 and AccessModifiers property to Shift. Set the Dock of the MenuBar1 control to Top.

   The following markup is added to XAML view.

   XAML	Copy Code
   <Intersoft:DockPanel FillChildMode="Custom"> <Intersoft:UXMenuBar x:Name="MenuBar1" Intersoft:DockPanel.Dock="Top" AccessModifiers="Shift"> </Intersoft:UXMenuBar> </Intersoft:DockPanel>

   

   We now have a menu bar that has Shift key as its access key.

6. Select the first UXMenuItem and set the Header property to _File. The underline character before the "F" letter on the Header property means that the "F" letter will be used as the access key. User can use the combination of Shift + F to access the File menu.

   The following markup is added to XAML view.

   XAML	Copy Code
   <Intersoft:UXMenuBar x:Name="MenuBar1" Intersoft:DockPanel.Dock="Top" AccessModifiers="Shift"> <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="UXMenuItem"/> </Intersoft:UXMenuItem> <Intersoft:UXMenuItem Header="UXMenuItem"/> </Intersoft:UXMenuBar>

   

7. Select the UXMenuItem under the File menu item and set the Header property to _New and the InputGestureText property to Ctrl + N. The InputGestureText is the text that displays the shortcut key to access the menu item. In this New menu item the shortcut key is the Ctrl + N.

   The following markup is added to XAML view.

   XAML	Copy Code
   ... <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="_New" InputGestureText="Ctrl + N"/> ...

   

8. Right-click on the File menu item and select "Add Item" from the context menu to add another UXMenuItem under the File menu item. Set the Header property of the new menu item to Open... and set the InputGestureText to Ctrl + O.

   The following markup is added to XAML view.

   XAML	Copy Code
   ... <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="_New" InputGestureText="Ctrl + N"/> <Intersoft:UXMenuItem Header="_Open..." InputGestureText="Ctrl + O"/> ...

   

9. Modeled from the File menu in Notepad, repeat step #8 to add Save and Save As menu item.

   The following markup is added to XAML view.

   XAML	Copy Code
   ... <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="_New" InputGestureText="Ctrl + N"/> <Intersoft:UXMenuItem Header="_Open..." InputGestureText="Ctrl + O"/> <Intersoft:UXMenuItem Header="_Save" InputGestureText="Ctrl + S"/> <Intersoft:UXMenuItem Header="Save _As"/> ...

   

10. Select and right-click on the File menu item and select "Add Separator" from the context menu to add a separator under the File menu item.

    The following markup is added to XAML view.

    XAML	Copy Code
    ... <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="_New" InputGestureText="Ctrl + N"/> <Intersoft:UXMenuItem Header="_Open..." InputGestureText="Ctrl + O"/> <Intersoft:UXMenuItem Header="_Save" InputGestureText="Ctrl + S"/> <Intersoft:UXMenuItem Header="Save _As"/> <Intersoft:UXSeparator/> ...

    

11. Modeled from the File menu in Notepad, repeat step #8 to add more menu item and step #10 to add more separator. Add Page Setup, Print, Separator, and Exit in the File menu item.

    The following markup is added to XAML view.

    XAML

    Copy Code

    <Intersoft:UXMenuItem Header="_File"> <Intersoft:UXMenuItem Header="_New" InputGestureText="Ctrl + N"/> <Intersoft:UXMenuItem Header="_Open..." InputGestureText="Ctrl + O"/> <Intersoft:UXMenuItem Header="_Save" InputGestureText="Ctrl + S"/> <Intersoft:UXMenuItem Header="Save _As..." /> <Intersoft:UXSeparator/> <Intersoft:UXMenuItem Header="Page Set_up..." /> <Intersoft:UXMenuItem Header="_Print..." /> <Intersoft:UXSeparator/> <Intersoft:UXMenuItem Header="E_xit" /> </Intersoft:UXMenuItem>

    

12. Select the UXMenuItem next to File menu item and set the Header property to _Edit.

    The following markup is added to XAML view.

    XAML	Copy Code
    <Intersoft:UXMenuBar x:Name="SampleControl1" Intersoft:DockPanel.Dock="Top" AccessModifiers="Shift"> <Intersoft:UXMenuItem Header="_File"> ... </Intersoft:UXMenuItem> <Intersoft:UXMenuItem Header="_Edit">

    

13. Repeat step #8 to add menu item under the Edit menu item. Set the Header property to Undo, InputGestureText to Ctrl + Z, and IsEnabled to False. The IsEnabled property indicates whether the user can interact with the control or not.

    The following markup is added to XAML view.

    XAML	Copy Code
    <Intersoft:UXMenuItem Header="_Edit"> <Intersoft:UXMenuItem Header="_Undo" InputGestureText="Ctrl + Z" IsEnabled="False"/>

    

14. Modeled from the Edit menu in Notepad, continue to add more menu item and separator under the Edit menu item.

    The following markup is added to XAML view.

    XAML	Copy Code
    <Intersoft:UXMenuItem Header="F_ormat">

15. Repeat step #8 to add a menu item under the Format menu item. Set the Header property to Word Wrap, IsCheckable to True, IsChecked to True, and StaysOpenOnClick to True.

    In this step, a check-able menu item is added. IsCheckable property determines whether the item is checkable. By design, the Word Wrap menu item is checked. The IsChecked property determines whether the item is checked. The Word Wrap menu item is set to stay open when the menu item is clicked. The StaysOpenOnClick property determines whether menu stays open when the item is clicked.

    The following markup is added to XAML view.

    XAML	Copy Code
    <Intersoft:UXMenuItem Header="F_ormat"> <Intersoft:UXMenuItem Header="Word Wrap" IsCheckable="True" IsChecked="True" st StaysOpenOnClick="True"/>

    

16. Continue to add another menu items modeled from the Notepad menu bar.

17. On the File menu, click Save All.

18. Run the application.

    

19. Click on the File menu item and you will find how the Separator is added and the InputGestureText is displayed.

    

20. Try to click on the Edit menu item and you will find that some of the menu item disabled.

    

21. Try to click on the Format menu item and try to check or uncheck the Word Wrap menu item.

MainPage.xaml

<UserControl 
    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"
    mc:Ignorable="d"
    xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    x:Class="AddMenuItemAndSeparatorToMenuBarInBlendDesigner.MainPage"
    Title="Default Page"
    d:DesignWidth="1280" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">

        <Intersoft:DockPanel FillChildMode="Custom">
            <Intersoft:UXMenuBar x:Name="MenuBar1" Intersoft:DockPanel.Dock="Top" AccessModifiers="Shift">
                <Intersoft:UXMenuItem Header="_File">
                    <Intersoft:UXMenuItem Header="_New"  InputGestureText="Ctrl + N"/>
                    <Intersoft:UXMenuItem Header="_Open..."  InputGestureText="Ctrl + O"/>
                    <Intersoft:UXMenuItem Header="_Save"  InputGestureText="Ctrl + S"/>
                    <Intersoft:UXMenuItem Header="Save _As..." />
                    <Intersoft:UXSeparator/>
                    <Intersoft:UXMenuItem Header="Page Set_up..." />
                    <Intersoft:UXMenuItem Header="_Print..." />
                    <Intersoft:UXSeparator/>
                    <Intersoft:UXMenuItem Header="E_xit" />
                </Intersoft:UXMenuItem>
                <Intersoft:UXMenuItem Header="_Edit">
                    <Intersoft:UXMenuItem Header="_Undo" InputGestureText="Ctrl + Z" IsEnabled="False"/>
                    <Intersoft:UXSeparator/>
                    <Intersoft:UXMenuItem Header="Cu_T" InputGestureText="Ctrl + X"  IsEnabled="False"/>
                    <Intersoft:UXMenuItem Header="_Copy" InputGestureText="Ctrl + C"  IsEnabled="False"/>
                    <Intersoft:UXMenuItem Header="_Paste" InputGestureText="Ctrl + V"  IsEnabled="False"/>
                    <Intersoft:UXMenuItem Header="De_lete" InputGestureText="Del"  IsEnabled="False"/>
                    <Intersoft:UXSeparator/>
                    <Intersoft:UXMenuItem Header="_Find..." InputGestureText="Ctrl + F" />
                    <Intersoft:UXMenuItem Header="Find _Next" InputGestureText="F3" />
                    <Intersoft:UXMenuItem Header="_Replace..." InputGestureText="Ctrl + H" />
                    <Intersoft:UXMenuItem Header="_Go To" InputGestureText="Ctrl + G" />
                    <Intersoft:UXSeparator/>
                    <Intersoft:UXMenuItem Header="Select _All" InputGestureText="Ctrl + A" />
                    <Intersoft:UXMenuItem Header="Time / _Date" InputGestureText="F5" />
                </Intersoft:UXMenuItem>
                <Intersoft:UXMenuItem Header="F_ormat">
                    <Intersoft:UXMenuItem Header="Word Wrap" IsCheckable="True" IsChecked="True" StaysOpenOnClick="True"/>
                    <Intersoft:UXMenuItem Header="Font..." StaysOpenOnClick="True"/>
                </Intersoft:UXMenuItem>
                <Intersoft:UXMenuItem Header="_View">
                    <Intersoft:UXMenuItem Header="_Status Bar" IsEnabled="False"/>
                </Intersoft:UXMenuItem>
            </Intersoft:UXMenuBar>
            <RichTextBox Intersoft:DockPanel.IsFillElement="True">
            </RichTextBox>
        </Intersoft:DockPanel>
    </Grid>
</UserControl>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AddMenuItemAndSeparatorToMenuBarInBlendDesigner
{
    public partial class MainPage
    {
        public Default()
        {
            InitializeComponent();            
        }

        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}