Creating Menus

Creating a Top-Level Menu

Complete the following steps:

1. Add a C1Menu or C1ContextMenu to your application.

2. Place the following XAML between the <c1:C1Menu> and </c1:C1Menu> tags or the <c1:C1ContextMenu> and </c1:C1ContextMenu> tags.

<c1:C1MenuItem Header="MenuItem1" Height="Auto" Width="Auto"/>
<c1:C1MenuItem Header="MenuItem2" Height="Auto" Width="Auto"/>
<c1:C1MenuItem Header="MenuItem3" Height="Auto" Width="Auto"/>

3. Add Height="Auto" and Width="Auto" to the <c1:C1Menu> or <c1:C1ContextMenu> tag.

4. Run the program and complete one of the following:

• If you are using a C1Menu control, observe that a menu bar with three items appears.

OR

• If you are using a C1ContextMenu control, right-click the element the context menu is attached to. Observe that a menu with three items appears.

Creating a Submenu

In this topic, you will create a submenu that's attached to one of a menu's items. This topic assumes that you have created a top-level menu (see Creating a Top-Level Menu) with at least one menu item.

Complete the following steps:

1. Place the following XAML between the <c1:C1Menu> and </c1:C1Menu> tags or the <c1:C1ContextMenu> and </c1:C1ContextMenu> tags.

<c1:C1MenuItem Header="Click here" Height="Auto" Width="Auto">
     <c1:C1MenuItem Header="Submenu Item" Height="Auto" Width="Auto"/>
     <c1:C1MenuItem Header="Submenu Item" Height="Auto" Width="Auto"/>
     <c1:C1MenuItem Header="Submenu Item" Height="Auto" Width="Auto"/>
</c1:C1MenuItem>

2. Add Height="Auto" and Width="Auto" to the <c1:C1Menu> or <c1:C1ContextMenu> tag.

3. Run the program and complete one of the following:

• If you are using a C1Menu control, click Click here. Observe that a submenu with three items appears.

OR

• If you are using a C1ContextMenu control, right-click the element you attached it to in order to open the context menu. Click Click Here and observe that a submenu with three items appears.

Creating a Context Menu

In this topic, you will use the C1ContextMenuService class to attach a context menu to a TextBox control.

Complete the following steps:

1. Add a reference to the C1.Silverlight assembly to your Silverlight project.

2. Open Source view (XAML view if you're using Blend).

3. Add the following markup to the <UserControl> tag to import the namespace of the assembly:

xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"

4. Replace the <Grid> tag with the following markup to add a TextBox control to the project:

<Grid x:Name="LayoutRoot" Background="White">
    <TextBox Text="Right-click for context menu"  Width="170" Height="25" Background="#FFC4D8D4">
    </TextBox>
</Grid>

5. Add C1ContextMenuService to the TextBox by placing the following markup between the <TextBox> and </TextBox> tags:

<c1:C1ContextMenuService.ContextMenu>
</c1:C1ContextMenuService.ContextMenu>

The C1ContextMenuService class exposes context menus as extender properties that can be attached to any FrameworkElement objects on the page.

6. Place the following XAML between the <c1:C1ContextMenuService.ContextMenu> and </c1:C1ContextMenuService.ContextMenu> tags to create a context menu and a few context menu items:

<c1:C1ContextMenu Width="Auto" Height="Auto">
     <c1:C1MenuItem Header="MenuItem1"></c1:C1MenuItem>
     <c1:C1MenuItem Header="MenuItem2"></c1:C1MenuItem>
     <c1:C1MenuItem Header="MenuItem3"></c1:C1MenuItem>
</c1:C1ContextMenu>

7. Run the project and right-click the TextBox control. Observe that a context menu with three items appears.