RadControls for Silverlight
Contents

Telerik RadRibbonView provides a simple and consistent way for building interfaces similar to the RibbonView used in Microsoft Office. The RadRibbonView consists of various elements, one of which is the Application Menu. This topic discusses concepts fundamental to the Application Menu at first and then goes into the usage of the ApplicationMenu class and its features.

Tip
Before proceeding with this tutorial, it is recommended to get familiar with the Visual Structure of the RadRibbonView control.

Application Menu - Fundamentals

The Application Menu is equivalent to the File menu of the traditional menu UIs. By default it is represented by the circular button (named Application Button) on the upper-left corner of the RadRibbonView control.

The Application Menu appears when a user clicks the Application Button. This menu displays controls used to perform actions on the entire document, like Save, Print and Send. The Application Menu also provides a list of recent documents, access to application options for changing user settings and preferences, and application exit.

Note

The class that represents the application menu is Telerik.Windows.Controls.ApplicationMenu.

The ApplicationMenu is an ItemsControl (it derives from ItemsControl), which consists of three parts:

  • Menu Items - they are populated by using the ApplicationMenu's Items property. For items it is handy to use the RadRibbonButton, RadRibbonSplitButton and RadRibbonDropDownButton controls. They will be styled automatically to fit into the ApplicationMenu styles.
  • Content - this is the right pane of the application menu. To populate it you should use the ApplicationMenu's Content property and set the content you like.
  • Footer Content - this is the bottom pane of the application menu. Here are usually placed application options and exit buttons. In order to populate this area you need to use the ApplicationMenu's FooterContent property and set the content you like.

Check out the rest of this topic, which is entirely dedicated to the ApplicationMenu.

Adding Application Menu to a RadRibbonView Control

In order to add an application menu to your RadRibbonView control you need to set the RadRibbonView's ApplicationMenu property. The next several code-snippets show you how to do that in XAML, as well as in the code-behind.

CopyXAML
<telerik:RadRibbonView x:Name="radRibbonView">
    <telerik:RadRibbonView.ApplicationMenu>
        <telerik:ApplicationMenu>
        </telerik:ApplicationMenu>
    </telerik:RadRibbonView.ApplicationMenu>
</telerik:RadRibbonView>
CopyC#
this.radRibbonView.ApplicationMenu = new ApplicationMenu();
CopyVB.NET
Me.radRibbonView.ApplicationMenu = New ApplicationMenu()

Setting an Application Button Image

The default look of the application button is an empty circular button similar to the next snapshot.

Adding Menu Items

When you want to add menu items to your RadRibbonView's application menu, you need to populate the ApplicationMenu's Items collection. It is handy to use the RadRibbonButton, RadRibbonSplitButton, RadRibbonDropDownButton and Separator controls.

Tip
For more information about the different types of RadRibbonButtons and their properties, take a look at the RibbonButtonstopic.

The next example demonstrates how to add several buttons as menu items to your application menu.

CopyXAML
<telerik:RadRibbonView.ApplicationMenu>
    <telerik:ApplicationMenu telerik:KeyTipService.AccessText="F">
        <telerik:RadRibbonButton Text="New" LargeImage="Images/IconPaint/menu/new.png"
                                    Hover="RibbonApplicationMenuItem_Hover"
                                    HoverDelay="0:0:0.3" />
        <telerik:RadRibbonButton Text="Open" LargeImage="Images/IconPaint/menu/open.png"
                                    Hover="RibbonApplicationMenuItem_Hover"
                                    HoverDelay="0:0:0.3"/>
        <telerik:RadRibbonButton Text="Save" LargeImage="Images/IconPaint/menu/save.png"
                                    Hover="RibbonApplicationMenuItem_Hover"
                                    HoverDelay="0:0:0.3"/>
        <telerik:RadRibbonSplitButton Text="Save As" LargeImage="Images/IconPaint/menu/save_as.png">
            <telerik:RadRibbonSplitButton.DropDownContent>
                <StackPanel HorizontalAlignment="Stretch">
                    <telerik:RadGroupHeader Content="Save as" />
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/ApplicationMenu/worddoc.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Word Document "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Save the file as a Word Document." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None"
                                    Source="Images/IconMSOffice/ApplicationMenu/wordtemplate.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Word Template "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Save the document as a template that can be used to format future documents." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/ApplicationMenu/word2003.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Word 97-2003 Document "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Save a copy of the document thatis fully compatible with Word 97-2003." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/ApplicationMenu/wordpdf.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="PDF or XPS "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Publish a copy of the document as a PDF or XPS file." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconPaint/menu/save_as.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Other Format "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Open the Save As dialog box to select from all possible file types." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                </StackPanel>
            </telerik:RadRibbonSplitButton.DropDownContent>
        </telerik:RadRibbonSplitButton>
        <telerik:Separator />
        <telerik:RadRibbonDropDownButton Text="Prepare"
                LargeImage="Images/IconMSOffice/ApplicationMenu/Prepare32.png">
            <telerik:RadRibbonDropDownButton.DropDownContent>
                <StackPanel HorizontalAlignment="Stretch">
                    <telerik:RadGroupHeader Content="Prepare" />
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconPaint/menu/print.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Properties "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="View and edit document properties." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconPaint/menu/pagesetup.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Inspect Document "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Check the document for hidden metadata or personal information." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/32/encryptdocument.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Encrypt document "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Increase the security of the document by adding encryption." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/32/restrictpermisions.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Restrict Permission "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Grant  people access while restricting their ability to edit, copy and print." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/32/digitalsignature.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Add a Digital Signature "
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Ensure the integrity of the documentby adding an invisible digital signature." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                    <telerik:RadRibbonButton Margin="1 0 2 0"
                                                Width="292">
                        <StackPanel Orientation="Horizontal"
                                    Margin="3 0  5 0">
                            <Image Stretch="None" Source="Images/IconMSOffice/32/markasfinal.png" />
                            <StackPanel Margin="5 5 0 0">
                                <TextBlock Text="Mark as Final"
                                            FontWeight="Bold" />
                                <TextBlock TextWrapping="Wrap"
                                            Width="220"
                                            Text="Let  readers know the document is final and make it read-only." />
                            </StackPanel>
                        </StackPanel>
                    </telerik:RadRibbonButton>
                </StackPanel>
            </telerik:RadRibbonDropDownButton.DropDownContent>
        </telerik:RadRibbonDropDownButton>
    </telerik:ApplicationMenu>
</telerik:RadRibbonView.ApplicationMenu>

Three ordinary RadRibbonButtons, one RadRibbonSplitButton and one RadRibbonDropDownButton are added. Also note the way for adding a separator element - <telerik:Separator />. The result can be seen on the snapshot below.

Adding Content

The second element you may want to initialize when building an application menu is the Content. This is the right pane of the application menu. To populate it you should use the ApplicationMenu's Content property and set the content you like.

The next example shows you how to set the ApplicationMenu's Content property. Note that in this example the initialization of the menu items is skipped.

CopyXAML
<telerik:RadRibbonView.ApplicationMenu>
    <telerik:ApplicationMenu telerik:KeyTipService.AccessText="F">
        <telerik:ApplicationMenu.Content>
            <StackPanel Width="300">
                <telerik:RadGroupHeader Content="Recent Documents" />
                <telerik:RadRibbonButton Content="1 RIAServices.docx"
                                            HorizontalAlignment="Stretch" />
                <telerik:RadRibbonButton Content="2 SL4 Survey.docx"
                                            HorizontalAlignment="Stretch" />
                <telerik:RadRibbonButton Content="3 RadTileView Features.docx"
                                            HorizontalAlignment="Stretch" />
                <telerik:RadRibbonButton Content="4 RadTreeView TOC.docx"
                                            HorizontalAlignment="Stretch" />
                <telerik:RadRibbonButton Content="5 RadRibbonView API.docx"
                                            HorizontalAlignment="Stretch" />
                <telerik:RadRibbonButton Content="6 Profile.docx"
                                            HorizontalAlignment="Stretch" />
            </StackPanel>
        </telerik:ApplicationMenu.Content>
    </telerik:ApplicationMenu>
</telerik:RadRibbonView.ApplicationMenu>

Adding Footer Content

The last element of the application menu is the Footer Content. This is the bottom pane of the application menu. Here are usually placed application options and exit buttons. In order to initialize it you need to set the ApplicationMenu's FooterContent property like in the example below.

CopyXAML
<telerik:RadRibbonView.ApplicationMenu>
    <telerik:ApplicationMenu telerik:KeyTipService.AccessText="F">

        <telerik:ApplicationMenu.FooterContent>
            <StackPanel Height="25"
                        Orientation="Horizontal">
                <telerik:RadButton Width="106"
                                    Height="22"
                                    Margin="3 0"
                                    Hover="RibbonApplicationMenuItem_Hover"
                                    HoverDelay="0:0:0.3">
                    <telerik:RadButton.Content>
                        <StackPanel Orientation="Horizontal"
                                    VerticalAlignment="Center"
                                    Margin="3 0  5 0">
                            <Image Width="16"
                                    Height="16" Source="Images/IconPaint/16/options.png" />
                            <TextBlock Margin="4 0 0 0"
                                        VerticalAlignment="Center"
                                        Text="Word Options" />
                        </StackPanel>
                    </telerik:RadButton.Content>
                </telerik:RadButton>
                <telerik:RadButton Width="86"
                                    Height="22"
                                    Margin="3 0 2 0"
                                    Hover="RibbonApplicationMenuItem_Hover"
                                    HoverDelay="0:0:0.3">
                    <telerik:RadButton.Content>
                        <StackPanel Orientation="Horizontal"
                                    VerticalAlignment="Center"
                                    Margin="3 0  5 0">
                            <Image Width="16"
                                    Height="16" Source="Images/IconPaint/16/exit.png" />
                            <TextBlock Margin="4 0 0 0"
                                        VerticalAlignment="Center"
                                        Text="Exit Word" />
                        </StackPanel>
                    </telerik:RadButton.Content>
                </telerik:RadButton>
            </StackPanel>
        </telerik:ApplicationMenu.FooterContent>

    </telerik:ApplicationMenu>
</telerik:RadRibbonView.ApplicationMenu>

In this example, it is assumed that you are familiar with initializing the menu items and content of the application menu. If not, check out the previous two sections where the process of adding menu items and content is described. The result of the last example is shown on the snapshot below.

Hiding the Application Menu

Whenever you want to prevent the end-user from using the application menu, you should set the RadRibbonView's ApplicationButtonVisibility property to Visibility.Collapsed. On the contrary, if you want run-time to enable (show) again the application menu, then set the ApplicationButtonVisibility property to Visibility.Visible.

Tip
The default value of the RadRibbonView's ApplicationButtonVisibility property is Visibility.Visible.
CopyXAML
<telerik:RadRibbonView x:Name="ribbonView" ApplicationButtonVisibility="Collapsed">
 ...
</telerik:RadRibbonView>
CopyC#
ribbonView.ApplicationButtonVisibility = Visibility.Collapsed;
CopyVB.NET
ribbonView.ApplicationButtonVisibility = Visibility.Collapsed

Events

The RadRibbonView class exposes the ApplicationButtonDoubleClick event, which is fired when the RibbonView's ApplicationButton is double-clicked.

CopyXAML
<telerik:RadRibbonView ApplicationButtonDoubleClick="RadRibbonView_ApplicationButtonDoubleClick">
 ...
</telerik:RadRibbonView>

The ApplicationButtonDoubleClick event handler receives two arguments:

  • The sender argument contains the RadRibbonView. This argument is of type object, but can be cast to the RadRibbonView type.
  • The second argument is a RadRoutedEventArgs object.
CopyC#
private void RadRibbonView_ApplicationButtonDoubleClick(object sender, RadRoutedEventArgs e)
{
 RadRibbonView ribbonView = sender as RadRibbonView;
 // Do some custom logic here.
}
CopyVB.NET
Private Sub RadRibbonView_ApplicationButtonDoubleClick(sender As Object, e As RadRoutedEventArgs)
    Dim ribbonView As RadRibbonView = TryCast(sender, RadRibbonView)
    ' Do some custom logic here.
End Sub

One common scenario is to close the application when the user makes a double-click on the application button.

For a full list of the exposed by the RadRibbonView events, take a look at the Events - Overview topic.

The RadRibbonView is a complex control and the application menu is only a small part of it. The RadRibbonView consists of various elements such as:

Additional features that you may find interesting are: