Intersoft ClientUI Documentation
Walkthrough: Add Menu Item and Separator to Menu Bar in Designer
Intersoft ClientUI 8 > ClientUI Application Development > Working with ClientUI Controls in Visual Studio 2010 Designer > Walkthrough: Add Menu Item and Separator to Menu Bar in Designer

This walkthrough shows you to add menu item and separator to menu bar using Visual Studio designer.

Prerequisites

You need the following components to complete this walkthrough:

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 The Application Interface

This section show how to add UXMenuItem and UXSeparator to UXMenuBar using designer.

To add UXMenuItem and UXSeparator using designer.

  1. Open the Toolbox window if it is not already open.
  2. From the Toolbox, Double-click the UXWindow control.
  3. Right-click the UXWindow, click Reset Layout, and then click Alignments and Margin.
  4. Select the UXWindow.
  5. Locate the IsClientVisible property in the Properties window or you can filter the properties in the search box.
  6. Set the IsClientVisible property to True.
  7. Still on UXWindow, set the Width and Height properties to 500 and 300.
  8. Double-click a DockPanel within the UXWindow element.
  9. Double-click the UXMenuBar control just under the DockPanel control, but within the UXWindow.
  10. Set the dock position to Dock to Top by clicking the top square of the icon indicator.
  11. Right-click the UXMenuBar, click Reset Layout, and then click All.
  12. Select the first UXMenuItem within the UXMenuBar.
  13. Set the Header property of UXMenuItem to File.
  14. Add another UXMenuItem control within the File UXMenuItem by right-click on the File UXMenuItem, click Add Item.
  15. Set the Header property of the new created UXMenuItem to Open.
  16. Add two additional UXMenuItem and set the Header property of UXMenuItem to Save and Save As.
  17. Add a UXSeparator by right-click on the File UXMenuItem, click Add Separator.
  18. Add three additional UXMenuItem and one additional UXSeparator and set the Header of each three UXMenuItem to Page Setup, Print and Exit.
  19. Arrange them as the following sequence Page Setup, Print, Separator and Exit.
  20. Add one additional menu name it Edit and five additional sub-menu name them Undo, Cut, Copy, Paste and Select All as you have created in the previous steps.
  21. Arrange them as the following sequence Undo, Separator, Cut, Copy, Paste, Separator and Select All.
  22. Add one additional menu name it Format and two additional sub-menu name them Bold and Italic as you have created in the previous steps.
  23. Arrange them as the following sequence Bold and Italic.
  24. Double-click the RichTextBox control just under the DockPanel control, but within the UXWindow.
  25. Set the dock position to Stretch to Fill by clicking the middle square of the icon indicator.
  26. Run the project.

Conclusion

In this walkthrough, you have learned how to create ClientUI Application project using Intersoft ClientUI Application project template, create the UXMenuBar, UXMenuItem and UXSeparator using Visual Studio designer.

Complete Code Listing

MainPage.xaml


MainPage
Copy Code 
<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="AddtoMenuBar.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow Header="UXWindow Title" Height="300" Name="uXWindow1" Width="500" IsClientVisible="True">
            <Grid>
                <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom">
                    <Intersoft:UXMenuBar Name="uXMenuBar1" Intersoft:DockPanel.Dock="Top">
                        <Intersoft:UXMenuItem Header="File">
                            <Intersoft:UXMenuItem Header="Open" />
                            <Intersoft:UXMenuItem Header="Save" />
                            <Intersoft:UXMenuItem Header="Save As" />
                            <Intersoft:UXSeparator HorizontalAlignment="Left" Name="uXSeparator1" VerticalAlignment="Top" />
                            <Intersoft:UXMenuItem Header="Page Setup" />
                            <Intersoft:UXMenuItem Header="Print" />
                            <Intersoft:UXSeparator HorizontalAlignment="Left" Name="uXSeparator2" VerticalAlignment="Top" />
                            <Intersoft:UXMenuItem Header="Exit" />
                        </Intersoft:UXMenuItem>
                        <Intersoft:UXMenuItem Header="Edit">
                            <Intersoft:UXMenuItem Header="Undo" />
                            <Intersoft:UXSeparator HorizontalAlignment="Left" Name="uXSeparator3" VerticalAlignment="Top" />
                            <Intersoft:UXMenuItem Header="Cut" />
                            <Intersoft:UXMenuItem Header="Copy" />
                            <Intersoft:UXMenuItem Header="Paste" />
                            <Intersoft:UXSeparator HorizontalAlignment="Left" Name="uXSeparator4" VerticalAlignment="Top" />
                            <Intersoft:UXMenuItem Header="Select All" />
                        </Intersoft:UXMenuItem>
                        <Intersoft:UXMenuItem Header="Format">
                            <Intersoft:UXMenuItem Header="Bold" />
                            <Intersoft:UXMenuItem Header="Italic" />
                        </Intersoft:UXMenuItem>
                    </Intersoft:UXMenuBar>
                    <RichTextBox Name="richTextBox1" Intersoft:DockPanel.IsFillElement="True" />
                </Intersoft:DockPanel>
            </Grid>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>
See Also
UXMenuBar Class
UXMenuItem Class
UXSeparator Class

Concepts

Development Environment Overview
Working with ClientUI Controls in Visual Studio 2010 Designer

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics