# Creating Menus

## Content

### 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.

```xml
<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.

```xml
<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:

```xml
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:

```xml
<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:

```xml
<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:

```xml
<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.