This walkthrough shows you how to create simple application menu bar.

In this walkthrough, you perform the following tasks:

• Create a new ClientUI Application project using using Intersoft ClientUI Application project template.
• Create the View page that represents the user interface of the application.
• Create a menu bar and define the menu items.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

Creating Simple Application Menu Bar

This section shows you how to create a simple application menu bar.

1. First add UXWindow to the Grid and set the following properties to the control.
   

   Header	Notes
   VerticalAlignment	Center
   HorizontalAlignment	Center
   IsActive	True
   IsClientVisible	True
   CanMaximize	False
   CanMinimize	False
   CanClose	False
   HeaderDisplayMode	Content

2. Add Grid to the UXWindow control.
3. Add DockPanel to the Grid and set FillChildMode property to Custom.
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <Intersoft:UXWindow Header="Notes" VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" IsClientVisible="True" CanMaximize="False" CanMinimize="False" CanClose="False" HeaderDisplayMode="Content" > <Grid> <Intersoft:DockPanel FillChildMode="Custom"> </Intersoft:DockPanel> </Grid> </Intersoft:UXWindow></Grid>

4. Add UXMenuBar control to the DockPanel and set the Intersoft:DockPanel.Dock property to Top and AccessModifiers property to Shift.
   

   XAML	Copy Code
   <Intersoft:DockPanel... > <Intersoft:UXMenuBar Intersoft:DockPanel.Dock="Top" AccessModifiers="Shift"> </Intersoft:UXMenuBar> </Intersoft:DockPanel>

5. Add UXMenuItem to the UXMenuBar and set Header property to _File.
   

   XAML	Copy Code
   <Intersoft:UXMenuBar... > <Intersoft:UXMenuItem Header="_File"> </Intersoft:UXMenuItem> </Intersoft:UXMenuBar>

   
   
6. Add UXMenuItem control to the UXMenuItem and set Header property to _New and InputGestureText property to Ctrl + N.
   

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

7. Add more UXMenuItem to the UXMenuItem repeat step 5 and 6.
   

   XAML

   Copy Code

   <Intersoft:UXMenuBar... > <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="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="Select _All" InputGestureText="Ctrl + A" /> </Intersoft:UXMenuItem> </Intersoft:UXMenuBar>

   
   
8. Add RichTextBox control after UXMenuBar control and set Intersoft:DockPanel.IsFillElement property to True.
   

   XAML	Copy Code
   <Intersoft:DockPanel... > <Intersoft:UXMenuBar... > ... </Intersoft:UXMenuBar> <RichTextBox Intersoft:DockPanel.IsFillElement="True"> </RichTextBox> </Intersoft:DockPanel>

9. Finally, save and run the project.

After the application is running in the browser, you can try to click on the menu item and it will show you menu item child, such as shown in the following figure.

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to create the menu bar, define the menu item and set its properties.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

<Intersoft:UXPage 
        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="CreateSimpleApplicationMenuBar.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow Header="Notes" VerticalAlignment="Center" HorizontalAlignment="Center" IsActive="True" IsClientVisible="True" CanMaximize="False" CanMinimize="False" CanClose="False" HeaderDisplayMode="Content" >
            <Grid>
                <Intersoft:DockPanel FillChildMode="Custom">
                    <Intersoft:UXMenuBar 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="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="Select _All" InputGestureText="Ctrl + A" />
                        </Intersoft:UXMenuItem>
                    </Intersoft:UXMenuBar>
                    <RichTextBox Intersoft:DockPanel.IsFillElement="True">
                    </RichTextBox>
                </Intersoft:DockPanel>
            </Grid>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>