Home » Programming » WPF » WPF Ribbon » WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls

WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls

Continuing with the previous part of the tutorial, I will show you how to add ribbon controls on the ribbon groups. For now, I will present the controls as they are and in the next tutorials we will begin to create our own custom controls and manipulate the already existing ones.

Entire Tutorial:

Summary

  • Step 1: Adding a RibbonButton
    • RibbonButton’s Properties
  • Step 2: Setting the GroupSizeDefinitions
  • Step 3: Adding a RibbonToggleButton
    • RibbonToggleButton’s Properties
  • Step 4: Adding a RibbonDropDownButton
    • RibbonDropDownButton’s Properties
  • Step 5: Adding a RibbonSplitButton
  • Step 6: Adding a RibbonCheckBox
    • RibbonCheckbox Properties
  • Step 7: Adding a RibbonTextBox, a RibbonLabel and a RibbonComboBox
    • The RibbonControlGroup
    • RibbonLabel Properties
    • RibbonComboBox Properties
    • Issues with the RibbonTextBox

Step 1: Adding a RibbonButton

First of all, we have to declare the RibbonCommands in the ResourceDictionary, for another RibbonGroup and a RibbonButton

<ribbon:RibbonCommand x:Key="ButtonsGroupCommand" x:Name="ButtonsGroupCommand"
LabelTitle="Button Group"
 />

 <ribbon:RibbonCommand x:Key="OkButtonCommand" x:Name="OkButtonCommand"
Executed="OkButtonCommand_Executed"
LabelTitle="OK"
SmallImageSource="images/Ok-icon16.png"
LargeImageSource="images/Ok-icon32.png"
 />

And then add the RibbonButton inside the RibbonGroup, which is inside the RibbonTab.

<ribbon:RibbonGroup HasDialogLauncher="False" Command="{StaticResource ButtonsGroupCommand}">
    <ribbon:RibbonButton Command="{StaticResource OkButtonCommand}"></ribbon:RibbonButton>
</ribbon:RibbonGroup>

Also, in the code-behind we would have the associated event handler

private void OkButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
   MessageBox.Show("OK Button Clicked!");
}

RibbonButton’s Properties

  • Command – through the RibbonCommand, we can specify the label, the small and large icons and also the Executed event handler. If we don’t specify the Executed event handler, the button will be disabled.
  • IsHitTestVisible – specifies if the button can receive or not mouse clicks; the button will not look disabled, but it will have the same behaviour.
  • IsEnabled – specifies if the button is enabled or not

Step 2: Setting the GroupSizeDefinitions

Let’s suppose now that we have 4 buttons inside a group, with the following resources:

<ribbon:RibbonCommand x:Key="ButtonsGroupCommand" x:Name="ButtonsGroupCommand"
 LabelTitle="Button Group"
 />

 <ribbon:RibbonCommand x:Key="OkButtonCommand" x:Name="OkButtonCommand"
 Executed="OkButtonCommand_Executed"
 LabelTitle="OK"
 SmallImageSource="images/Ok-icon16.png"
 LargeImageSource="images/Ok-icon32.png"
 />

 <ribbon:RibbonCommand x:Key="AddButtonCommand" x:Name="AddButtonCommand"
 Executed="AddButtonCommand_Executed"
 LabelTitle="Add"
 SmallImageSource="images/Add-icon16.png"
 LargeImageSource="images/Add-icon32.png"
 />

 <ribbon:RibbonCommand x:Key="CloseButtonCommand" x:Name="CloseButtonCommand"
 Executed="CloseButtonCommand_Executed"
 LabelTitle="Close"
 SmallImageSource="images/Close-icon16.png"
 LargeImageSource="images/Close-icon32.png"
 />

 <ribbon:RibbonCommand x:Key="DeleteButtonCommand" x:Name="DeleteButtonCommand"
 Executed="DeleteButtonCommand_Executed"
 LabelTitle="Delete"
 SmallImageSource="images/Delete-icon16.png"
 LargeImageSource="images/Delete-icon32.png"
 />

And the following declaration:

<ribbon:RibbonGroup HasDialogLauncher="False" Command="{StaticResource ButtonsGroupCommand}">
   <ribbon:RibbonGroup.GroupSizeDefinitions>
       <ribbon:RibbonGroupSizeDefinitionCollection>
          <ribbon:RibbonGroupSizeDefinition>
              <!-- size definition for Ok Button -->
              <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="True"/>
              <!-- size definition for Add Button -->
              <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="True"/>
              <!-- size definition for Close Button -->
              <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="True"/>
              <!-- size definition for Delete Button -->
              <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="True"/>
          </ribbon:RibbonGroupSizeDefinition>
       </ribbon:RibbonGroupSizeDefinitionCollection>
    </ribbon:RibbonGroup.GroupSizeDefinitions>

   <ribbon:RibbonButton Command="{StaticResource OkButtonCommand}"></ribbon:RibbonButton>
   <ribbon:RibbonButton Command="{StaticResource AddButtonCommand}"></ribbon:RibbonButton>
   <ribbon:RibbonButton Command="{StaticResource CloseButtonCommand}"></ribbon:RibbonButton>
   <ribbon:RibbonButton Command="{StaticResource DeleteButtonCommand}"></ribbon:RibbonButton>
 </ribbon:RibbonGroup>

And the associated event handlers in code behind:

private void OkButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
 {
    MessageBox.Show("OK Button Clicked!");
 }

 private void DeleteButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
 {
     MessageBox.Show("Delete Button Clicked!");
 }

 private void CloseButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
 {
     MessageBox.Show("Close Button Clicked!");
 }

 private void AddButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
 {
     MessageBox.Show("Add Button Clicked!");
 }

At this point, the tab would look like this:

As you could see, the RibbonGroup has a GroupSizeDefinition property, which in turn can contain a collection of RibbonGroupSizeDefinitions.

Each RibbonGroupSizeDefinition describes how the controls inside the group should be displayed: for each control, a RibbonControlSizeDefinition is declared, through which you can specify:

  • ImageSize – can be either Small or Large
  • IsLabelVisible – can display or hide the label
  • IsImageVisible – can display or hide the image

So, for the 4 buttons that we declared we are able to display them in different manners, like this:

Notes:

  • Large Controls in Ribbon must contain text labels. So, we cannot set ImageSize=”Large” and IsLabelVisible=”False”
  • Buttons display an image, so setting the IsImageVisible=”False” makes no difference than if set to “True”
  • If you forget to declare the labelTitle or the Small/Large images you might get such buttons:

Step 3: Adding a RibbonToggleButton

The RibbonToggleButton can be added as simply as the RibbonButton, by specifying the RibbonCommand

<ribbon:RibbonCommand x:Key="ToggleButtonsGroupCommand" x:Name="ToggleButtonsGroupCommand"
 LabelTitle="Toggle Buttons"
 />

 <ribbon:RibbonCommand x:Key="ToggleButtonCommand" x:Name="ToggleButtonCommand"
 Executed="ToggleButtonCommand_Executed"
 LabelTitle="Toggle Btn"
 SmallImageSource="images/webcam-icon16.png"
 LargeImageSource="images/webcam-icon32.png"
 />

And also declaring a RibbonGroup with 5 RibbonToggle Buttons:

  1. Large and Checked
  2. Large and Unchecked
  3. Small and Checked
  4. Small and Unchecked
  5. Small and null

<ribbon:RibbonGroup Command="{StaticResource ToggleButtonsGroupCommand}">
   <ribbon:RibbonGroup.GroupSizeDefinitions>
      <ribbon:RibbonGroupSizeDefinitionCollection>
         <ribbon:RibbonGroupSizeDefinition>
            <ribbon:RibbonControlSizeDefinition ImageSize="Large"  IsLabelVisible="True" IsImageVisible="False"/>
            <ribbon:RibbonControlSizeDefinition ImageSize="Large"  IsLabelVisible="True" IsImageVisible="True"/>
            <ribbon:RibbonControlSizeDefinition ImageSize="Small"  IsLabelVisible="True" IsImageVisible="True"/>
            <ribbon:RibbonControlSizeDefinition ImageSize="Small"  IsLabelVisible="True" IsImageVisible="True"/>
            <ribbon:RibbonControlSizeDefinition ImageSize="Small"  IsLabelVisible="True" IsImageVisible="True"/>
         </ribbon:RibbonGroupSizeDefinition>
      </ribbon:RibbonGroupSizeDefinitionCollection>
    </ribbon:RibbonGroup.GroupSizeDefinitions>
    <ribbon:RibbonToggleButton IsChecked="True" Command="{StaticResource ToggleButtonCommand}" ></ribbon:RibbonToggleButton>
    <ribbon:RibbonToggleButton IsChecked="False" Command="{StaticResource ToggleButtonCommand}" ></ribbon:RibbonToggleButton>
    <ribbon:RibbonToggleButton IsChecked="True" Command="{StaticResource ToggleButtonCommand}" ></ribbon:RibbonToggleButton>
    <ribbon:RibbonToggleButton IsChecked="False" Command="{StaticResource ToggleButtonCommand}" ></ribbon:RibbonToggleButton>
    <ribbon:RibbonToggleButton IsChecked="{x:Null}" Command="{StaticResource ToggleButtonCommand}" ></ribbon:RibbonToggleButton>
</ribbon:RibbonGroup>

RibbonToggleButton’s Properties

Besides the properties shared with the RibbonButton, this control has some additional properties:

  • IsChecked – returns the check state
  • IsThreeState – determines if the button supports two states (True/False) or three states (True/False/null)

Step 4: Adding a RibbonDropDownButton

The RibbonDropDownnButton has an arrow in its lower right part, indicating that if you click the button, an additional menu will appear. And indeed, you can create such a button.

First of all, we need to add some resources

<ribbon:RibbonCommand x:Key="DropDownButtonsGroupCommand" x:Name="DropDownButtonsGroupCommand"
 LabelTitle="DropDown Buttons"
 />

 <ribbon:RibbonCommand x:Key="DropDownButtonCommand" x:Name="DropDownButtonCommand"
 Executed="DropDownButtonCommand_Executed"
 LabelTitle="Drop Down Button"
 SmallImageSource="images/binoculars-icon16.png"
 LargeImageSource="images/binoculars-icon32.png"
 />

The menu that appears when the user clicks on this type of button can have anything inside it, RibbonMenuItems, MenuItems, Grids, Panels and even Labels, Checkboxes or Textboxes, but you should take into consideration how the menu looks with certain controls inside. For my demonstration, I will use 2 DropDownButtons (a large one and a small one) with almost identical Items, the only difference being that the large button contains only RibbonMenuItems and the small button contains MenuItems.

Keep in mind that if you do not specify any items for a RibbonDropDownButton, it will be disabled.

<ribbon:RibbonGroup Command="{StaticResource DropDownButtonsGroupCommand}">
   <ribbon:RibbonGroup.GroupSizeDefinitions>
      <ribbon:RibbonGroupSizeDefinitionCollection>
         <ribbon:RibbonGroupSizeDefinition>
             <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="False"/>
             <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" IsImageVisible="True"/>
         </ribbon:RibbonGroupSizeDefinition>
      </ribbon:RibbonGroupSizeDefinitionCollection>
    </ribbon:RibbonGroup.GroupSizeDefinitions>
    <ribbon:RibbonDropDownButton Command="{StaticResource DropDownButtonCommand}" >
       <ribbon:RibbonDropDownButton.Items>
          <ribbon:RibbonMenuItem Header="Header" Background="LightBlue" Foreground="Blue" IsHitTestVisible="False"></ribbon:RibbonMenuItem>
          <ribbon:RibbonMenuItem Header="Option 1 - stays open on click" StaysOpenOnClick="True"></ribbon:RibbonMenuItem>
          <ribbon:RibbonMenuItem IsCheckable="True" IsChecked="True"  Header="Option 2 - checkable"></ribbon:RibbonMenuItem>
          <ribbon:RibbonSeparator></ribbon:RibbonSeparator>
          <ribbon:RibbonMenuItem Header="Option 3 - icon">
               <ribbon:RibbonMenuItem.Icon>
                    <Image Width="16" Height="16" Source="images/positive-icon16.png"></Image>
               </ribbon:RibbonMenuItem.Icon>
          </ribbon:RibbonMenuItem>
          <ribbon:RibbonMenuItem IsSubmenuOpen="True" Header="Option 4 - submenu">
               <ribbon:RibbonMenuItem Header="Option 4.1"></ribbon:RibbonMenuItem>
               <ribbon:RibbonMenuItem Header="Option 4.2"></ribbon:RibbonMenuItem>
           </ribbon:RibbonMenuItem>
         </ribbon:RibbonDropDownButton.Items>
      </ribbon:RibbonDropDownButton>
    <ribbon:RibbonDropDownButton Command="{StaticResource DropDownButtonCommand}" >
       <ribbon:RibbonDropDownButton.Items>
          <MenuItem Header="Header" Background="LightBlue" Foreground="Blue" IsHitTestVisible="False"></MenuItem>
          <MenuItem Header="Option 1 - stays open on click" StaysOpenOnClick="True"></MenuItem>
          <MenuItem IsCheckable="True" IsChecked="True"  Header="Option 2 - checkable"></MenuItem>
          <ribbon:RibbonSeparator></ribbon:RibbonSeparator>
          <MenuItem Header="Option 3 - icon">
              <MenuItem.Icon>
                 <Image Width="16" Height="16" Source="images/positive-icon16.png"></Image>
              </MenuItem.Icon>
          </MenuItem>
          <MenuItem IsSubmenuOpen="True" Header="Option 4 - submenu">
              <MenuItem Header="Option 4.1"></MenuItem>
             <MenuItem Header="Option 4.2"></MenuItem>
          </MenuItem>
       </ribbon:RibbonDropDownButton.Items>
    </ribbon:RibbonDropDownButton>
 </ribbon:RibbonGroup>

So, the RibbonDropDownButton with RibbonMenuItems looks like this:


And the RibbonDropDownButton with MenuItems looks like this:

Which are the differences?

  1. The RibbonMenuItems have the left part colored differently (where the icon and checkbox are placed), and the MenuItems do not have this feature.
  2. The submenu for the RibbonMenuItems is displayed just under the parent menu option, and has no arrow to indicate that a submenu is available. On the other hand, the MenuItems are aligned more intuitively and there is an arrow to indicate that additional submenus are available.
  3. There is a known issue with MenuItems inside the RibbonDropDownButton (presented in Part 4 of the tutorial): when the groups resize and collapse, the dropdown’s menu will change its appearance, like this:

In my example I added 5 types of menu items. Surely, there are even more, these are just some examples:

  1. The header – has a different Background and Foreground, and has IsHitTestVisible=”False”, preventing it from capturing mouse clicks, and thus being something like a static header
  2. Option that keeps the RibbonDropDownMenu opened on click
  3. Option that can be checked
  4. Separator
  5. Option with an image as icon
  6. Option with submenu

RibbonDropDownButton’s Properties

  • Header – the displayed text for the option
  • Icon – represents an object that is displayed in the left-most part of the option; can be any object – in my example I used an Image
  • IsCheckable – makes the option the posibility to be checked; in the left-most part of the option, a checkbox appears when the option is checked.
  • IsChecked – gets or sets a value indicating that an option that IsCheckable is actually checked or not; in the left-most part of the option, a checkbox appears when the option is checked.
  • IsHitTestVisible – gets or sets a value indicating that the option can or cannot capture mouse clicks; gives the impression of a static control
  • IsSubmenuOpen – gets or sets a value indicating that it the option has a submenu, it should/shouldn’t be opened when the RibbonDropDownButton is pressed
  • StaysOpenOnClick – gets or sets a value indicating that the RibbonDropDownButton remains opened if the option is clicked.

Step 5: Adding a RibbonSplitButton

The RibbonSplitButton looks very much the same as the RibbonDropDownButton, but the main difference is that unlike the RibbonDropDownButton, which just opens a menu, the RibbonSplitButton can also trigger an event if clicked. This is possible because the button is split into 2 parts: the upper part, which has the behaviour of a normal RibbonButton and the lower part, which has the behaviour of the RibbonDropDownButton. So, the menu can be set the same as in the RibbonSplitButton case, and the on-click event is set through the RibbonCommand.

So, let’s define the resurces

<ribbon:RibbonCommand x:Key="SplitButtonsGroupCommand" x:Name="SplitButtonsGroupCommand"
 LabelTitle="Split Buttons"
 />

 <ribbon:RibbonCommand x:Key="SplitButtonCommand" x:Name="SplitButtonCommand"
 Executed="SplitButtonCommand_Executed"
 LabelTitle="Split Button"
 SmallImageSource="images/monitor-icon16.png"
 LargeImageSource="images/monitor-icon32.png"

Then, we have to declare the RibbonGroup for the RibbonSplitButtons. We will have 2 buttons: one small and one large, and I will try to give other elements that the menu can contain as well, besides the RibbonMenuItems and MenuItems, such as a Grid with Labels and Textboxes and an Rectangle as Icon.

The large RibbonSplitButton looks like this:

The small RibbonSplitButton looks like this:

<ribbon:RibbonGroup Command="{StaticResource SplitButtonsGroupCommand}">
   <ribbon:RibbonGroup.GroupSizeDefinitions>
      <ribbon:RibbonGroupSizeDefinitionCollection>
          <ribbon:RibbonGroupSizeDefinition>
              <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" IsImageVisible="False"/>
              <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" IsImageVisible="True"/>
          </ribbon:RibbonGroupSizeDefinition>
       </ribbon:RibbonGroupSizeDefinitionCollection>
    </ribbon:RibbonGroup.GroupSizeDefinitions>
    <ribbon:RibbonSplitButton Command="{StaticResource SplitButtonCommand}" >
        <ribbon:RibbonSplitButton.Items>
           <ribbon:RibbonMenuItem Header="Personal Data" IsHitTestVisible="False" Background="LightBlue" Foreground="Blue"></ribbon:RibbonMenuItem>
           <Grid>
                <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="100"></ColumnDefinition>
                     <ColumnDefinition Width="50"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                     <RowDefinition Height="*"></RowDefinition>
                     <RowDefinition Height="*"></RowDefinition>
                 </Grid.RowDefinitions>
                 <Label Content="First Name:" Grid.Row="0" Grid.Column="0"></Label>
                 <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
                 <Label Content="Last Name:" Grid.Row="1" Grid.Column="0"></Label>
                 <TextBox Grid.Row="1" Grid.Column="1"></TextBox>
            </Grid>
        </ribbon:RibbonSplitButton.Items>
     </ribbon:RibbonSplitButton>
     <ribbon:RibbonSplitButton Command="{StaticResource SplitButtonCommand}" >
        <ribbon:RibbonSplitButton.Items>
           <ribbon:RibbonMenuItem Header="Header" IsHitTestVisible="False" Background="LightBlue" Foreground="Blue"></ribbon:RibbonMenuItem>
           <ribbon:RibbonMenuItem StaysOpenOnClick="True" IsCheckable="True" IsChecked="True" Header="Item 1 - checkable"></ribbon:RibbonMenuItem>
           <ribbon:RibbonMenuItem Header="Item 2 - with rectangle">
               <ribbon:RibbonMenuItem.Icon>
                    <Rectangle Fill="Red" RadiusX="1" RadiusY="1" Width="14" Height="14"></Rectangle>
               </ribbon:RibbonMenuItem.Icon>
            </ribbon:RibbonMenuItem>
        </ribbon:RibbonSplitButton.Items>
     </ribbon:RibbonSplitButton>
 </ribbon:RibbonGroup>

Also, in code behind we will have the onclick event handler

private void SplitButtonCommand_Executed(object sender, ExecutedRoutedEventArgs e)
{
   MessageBox.Show("Split Button Clicked!");
}

Step 6: Adding a RibbonCheckBox

The checkbox consists of a check and a label. In order to set the label, you have to attach a command to the checkbox, so we have to declare another resource and the apropriate event handler in code-behind.

The RibbonCheckbox is always small, so declaring GroupSizeDefinitions for this group is no longer necessairy. Also, setting up images is worthless, as there is no image next to the checkbox.

<ribbon:RibbonCommand x:Key="CheckboxGroupCommand" x:Name="CheckboxGroupCommand"
 LabelTitle="Checkboxes"
 />

 <ribbon:RibbonCommand x:Key="CheckBox1Command" x:Name="CheckBox1Command"
 Executed="CheckBox1Command_Executed"
 LabelTitle="Checked"
 />

 <ribbon:RibbonCommand x:Key="CheckBox2Command" x:Name="CheckBox2Command"
 Executed="CheckBox2Command_Executed"
 LabelTitle="Unchecked"
 />

 <ribbon:RibbonCommand x:Key="CheckBox3Command" x:Name="CheckBox3Command"
 Executed="CheckBox3Command_Executed"
 LabelTitle="Disabled"
 />

So, let’s declare resources for 3 checkboxes: a checked one, an unchecked one and a disable one.

<ribbon:RibbonGroup Command="{StaticResource CheckboxGroupCommand}">
   <ribbon:RibbonCheckBox IsChecked="True" IsThreeState="False" Command="{StaticResource CheckBox1Command}"></ribbon:RibbonCheckBox>
   <ribbon:RibbonCheckBox IsChecked="False" IsThreeState="False" Command="{StaticResource CheckBox2Command}"></ribbon:RibbonCheckBox>
   <ribbon:RibbonCheckBox IsEnabled="False" Command="{StaticResource CheckBox3Command}"></ribbon:RibbonCheckBox>
 </ribbon:RibbonGroup>

RibbonCheckbox Properties

  • IsChecked – returns the check state
  • IsThreeState – determines if the button supports two states (True/False) or three states (True/False/null)

Step 7: Adding a RibbonTextBox, a RibbonLabel and a RibbonComboBox

First of all, it’s important to mention that all there three controls come only in small size, so we don’t need to declare any GroupControlDefinitions for the containing group.

The RibbonTextBox isn’t actually a simple textbox, but a control made out of an image + a label + a textblock. So, for the RibbonTextBox we have to define a command.

The RibbonLabel and the RibbonComboBox don’t have any additional images or labels, so for them we don’t need any command.

<ribbon:RibbonCommand x:Key="TextGroupCommand" x:Name="TextGroupCommand"
 LabelTitle="Text Controls"
 />

 <ribbon:RibbonCommand x:Key="TextBoxCommand" x:Name="TextBoxCommand"
 LabelTitle="Text"
 SmallImageSource="images/ok-icon16.png"
 />
<pre>

The RibbonControlGroup

Before declaring the RibbonGroup and the three controls, let me introduce a new ribbon control: the RibbonControlGroup, which allows grouping the controls on the same line.
You should be careful when using this control, as all the inner ribbon controls will become small and you might encounter issues with displaying them correctly.

<ribbon:RibbonGroup Width="120" Command="{StaticResource TextGroupCommand}">
   <ribbon:RibbonControlGroup>
      <ribbon:RibbonTextBox Command="{StaticResource TextBoxCommand}"></ribbon:RibbonTextBox>
   </ribbon:RibbonControlGroup>
   <ribbon:RibbonControlGroup>
       <ribbon:RibbonLabel Content="Font Size:"></ribbon:RibbonLabel>
       <ribbon:RibbonComboBox SelectedIndex="0" IsDropDownOpen="False" IsEditable="True">
           <ribbon:RibbonComboBox.Items>
               <ribbon:RibbonComboBoxItem Content="10"></ribbon:RibbonComboBoxItem>
               <ribbon:RibbonComboBoxItem Content="11"></ribbon:RibbonComboBoxItem>
               <ribbon:RibbonComboBoxItem Content="12"></ribbon:RibbonComboBoxItem>
               <ribbon:RibbonComboBoxItem Content="13"></ribbon:RibbonComboBoxItem>
            </ribbon:RibbonComboBox.Items>
       </ribbon:RibbonComboBox>
     </ribbon:RibbonControlGroup>
 </ribbon:RibbonGroup>

Now, the control will look like this:

RibbonLabel Properties

  • Content – the text displayed inside the label; does not need a RibbonCommand

RibbonComboBox Properties

  • IsDropDownOpen – gets or sets a value indicating if the RibbonComboBox items are opened or closed when the control is first rendered
  • IsEditable – gets or sets a value indicating that the user can/cannot input text in the RibbonComboBox; this option is useful when you want to limit the user to a set of predefined values, but if you don’t want to do this and you let him enter text, you should pay extra attention to the SelectedIndex and SelectedValue
  • Items – the available items in the drop-down
  • SelectedIndex – the selected index
  • SelectedValue – the selected value
  • Text – the visible text in the editable part of the RibbonComboBox

Issues with the RibbonTextBox

    1. If you don’t specify any width for the RibbonGroup, while you enter text in the RibbonTextBox, the RibbonGroup will enlarge, like this:

  1. If you specify the width for the RibbonGroup, it will no longer enlarge when extra characters are typed in, but the textbox caret will continue to move to the right and dissapear from the visible text area, like this:

In Part 5 of this tutorial, I have an alternative approach to overcome this issue and create a custom ribbon textbox that has the normal expected behaviour of a textbox.

Source Code

You can download the source code for parts 2,3 and 4 of the tutorial from here.

Posted in WPF Ribbon and tagged as , , , , , , , , , , , , ,

2 comments on “WPF Ribbon (CTP) – Part 3 – Adding Ribbon Controls

  • Brilliant effort. I’ve downloaded the code and looked at the example and it covers every angle that I had doubts about. Well done.

  • I noticed a few problems:

    1. The Ribbon Window Title is slightly offset to the left.
    2. When I maximise the window then the title bar goes black and the window minimize, maximize and close buttons disappear.
    3. Sometimes, when clicking on the ApplicationMenuCommand button the old windows control menu appears (Move, close etc)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.