How to create a RibbonDropDownMenu like the Office Symbol menu

Apr 15, 2009 at 7:35 PM

I am trying to create a ribbon drop down menu that looks like the office symbol menu - a drop down that has images of symbols arranged in a rectangular fashion. My images are different of course.

I can get close with this

LabelTitle=" " x:Key="Command0"

<UniformGrid Width="150" Height="100" Rows="3" Columns="4"/>
<ribbon:RibbonMenuItem Command="{StaticResource Command0}"/>
<ribbon:RibbonMenuItem Command="{StaticResource Command1}"/>

 But the ribbon menu items do not look right - they have small icons on a blue background with a white space to the right of them.

Any suggestions on how to get a grid of image only menu items in a ribbon drop down menu?

Apr 17, 2009 at 12:09 AM

Here is what I did to get a similar Look and Feel:

Add the following style to your ResourceDictionary.

<Style x:Key="CatHeader" TargetType="{x:Type Label}">
 <!--Set to true to not get any properties from the themes.-->
 <Setter Property="OverridesDefaultStyle" Value="True"/>
 <Setter Property="Label.Foreground" Value="#FF001585" />
 <Setter Property="Label.FontWeight" Value="Bold" />
 <Setter Property="Label.Background" Value="#FFDDE7EE" />
 <Setter Property="Template">
  <ControlTemplate TargetType="{x:Type Label}">
      <Grid Background="#FFDDE7EE" Height="22">
       <RowDefinition Height="20"/>
       <RowDefinition Height="2"/>
   <ContentPresenter Margin="10,0,0,0" Cursor="None" HorizontalAlignment="Left" VerticalAlignment="Center" />
   <Rectangle Fill="#FFFFFFFF" Stroke="#FFC5C5C5" VerticalAlignment="Stretch" Grid.Row="1"/>

Next, under your RibbonDropDownButton, use the following structure:

<r:RibbonDropDownButton >
    <Label Content="Column Header1" Style="{StaticResource CatHeader}" />
    <UniformGrid Columns="2">
         <r:RibbonApplicationMenuItem Header="Item1" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item2" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item3" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item4" Width="55"/>
    <Label Content="Column Header2" Style="{StaticResource CatHeader}" />
    <UniformGrid Columns="2">
         <r:RibbonApplicationMenuItem Header="Item1" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item2" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item3" Width="55"/>
         <r:RibbonApplicationMenuItem Header="Item4" Width="55"/>

All you have left to do is setup and bind the appropriate commands to each RibbonApplicationMenuItem you need for your implementation.

Hope this helps.

Apr 17, 2009 at 7:01 PM

This results in a menu that has menu items that use the small image source from the associated command. Since these items are RibbonApplicationMenuIems I would have expected the large image source. No matter how I size the RibbonApplicationMenuItems the image remains the same size. I tried changing the header text but it is not seen and adding an Icon to the meni item does nothing. I would really like to control the image size. An example of this in Office is the insert->cover page drop down that has large images of the cover pages to select from.


Perhaps I need to change the control tempate for the RibbonApplicationMenuItems - is the original template available somewhere so I can start from it?

Apr 20, 2009 at 5:09 PM
Hi adove1,

In V1, you'll be able to use a Gallery control to build the sort of menu that you're looking for.

You can view the default templates for all of the Ribbon components (including RibbonApplicationMenuItem) using Reflector with the BamlViewer add-on:
- Reflector can be installed here:
- The BamlViewer add-on can be found here:

You'll want to look at themes/generic.baml. 


Aug 17, 2009 at 2:48 PM

Hi adove1

I think I achieved what you tried to do. Here is my code sample :

    WindowStartupLocation="CenterScreen" MinWidth="1024">


        <Style TargetType="r:RibbonDropDownButton">
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
        <Style TargetType="r:RibbonLabel">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="LightGray"/>
        <Style TargetType="UniformGrid">
            <Setter Property="Margin" Value="0 0 0 5"/>



<r:RibbonGroup Command="{StaticResource cmdInputs}">
  <r:RibbonDropDownButton Command="{StaticResource cmdGroupedInputs}">
                            <r:RibbonLabel Content="{x:Static local:Labels.Title1}"/>
                            <UniformGrid Columns="3">
                                <r:RibbonButton Command="{StaticResource cmd11}" HorizontalAlignment="Center"/>
                                <r:RibbonButton Command="{StaticResource cmd12}" HorizontalAlignment="Center"/>
                                <r:RibbonButton Command="{StaticResource cmd13}" HorizontalAlignment="Center"/>

                            <r:RibbonLabel Content="{x:Static local:Labels.Title2}"/>
                            <UniformGrid Columns="3">
                                <r:RibbonButton Command="{StaticResource cmd21}" HorizontalAlignment="Center"/>
                                <r:RibbonButton Command="{StaticResource cmd22}" HorizontalAlignment="Center"/>
                                <r:RibbonButton Command="{StaticResource cmd23}" HorizontalAlignment="Center"/>



All my commands are defined in a separate file. The LabelTitle and LargeImageSource properties set on theses commands will be automatically used to render the list items.

The first style defined in the window resources prevents the blue background to appear when the combo has the focus.

Hope it will help.