ComboBox

A ribbon ComboBox control is basically the normal ComboBox control that we all love, but with the additional feature of dividing the items into categories. A category is not an item and cannot be selected from the ComboBox. It is only used to organized the items.

ComboBox

ComboBox Properties Every ribbon control has properties that defines the way it looks and behaves. Here is a quick review of ComboBox properties, divided into logical groups:

ComboBox Value Related Properties (with internal details)

GalleryItemItemsSource - The list of ComboBox items. It is exposed as an UICollection where every element in the collection is of type: CategoriesPropertySet.
GalleryCategories - The list of categories. Also exposed as an UICollection of GalleryItemPropertySet elements.
SelectedItem – The index of the selected item in the ComboBox. If nothing is selected returns UI_Collection_InvalidIndex, which is a fancy way to say -1. Property Identifier: UI_PKEY_SelectedItem
StringValue – The current string in the ComboBox. This can be a string that isn’t one of the possible items in the ComboBox, in case the ComboBox has IsEditable set to true. Property Identifier: UI_PKEY_StringValue

ComboBox Appearance Related Properties

RepresentativeString – A string that represents the common value for the ComboBox. This is used to calculate the width of the ComboBox, so you should set here the longest string you forecast. Note that it doesn’t have to be an actual value, it can be also: “XXXXXXXX”. Property Identifier: UI_PKEY_RepresentativeString

Common Appearance & Image Properties

See these sections at Windows Ribbon for WinForms, Spinner

ComboBox Methods

void InvalidateCategories() - Invalidate GalleryCategories for the Ribbon UI
void InvalidateItemsSource() - Invalidate GalleryItemItemsSource for the Ribbon UI

Using ComboBox – Ribbon Markup As always, a command should be defined:

<Command Name="cmdComboBox2" Id="1019" />

The views section:

<Application.Views>
  <Ribbon>
    <Ribbon.Tabs>
      <Tab>
        <Group>
          <ComboBox CommandName="cmdComboBox2"
                    IsAutoCompleteEnabled="true"
                    IsEditable="true"
                    ResizeType="VerticalResize" />
        </Group>
      </Tab>
    </Ribbon.Tabs>
  </Ribbon>
</Application.Views>

ComboBox Attributes:

CommandName – Name of the command attached to this ComboBox.
IsAutoCompleteEnabled – Flag that indicated whether to complete the words as you write.
IsEditable – Flag that indicates whether to allow free writing in the ComboBox.
ResizeType – Allow resize of the ComboBox. Can be NoResize or VerticalResize.

Using ComboBox – Code Behind In a similar way to the spinner control, I’ve created a helper classes that encapsulates the interaction between the ComboBox and ribbon framework. To use the ComboBox, create a RibbonComboBox instance, passing to the constructor the RibbonStrip instance and Command Id of the ComboBox:

partial class RibbonItems
{

    public void Init()
    {

        InitComboBoxes();
    }

    private void InitComboBoxes()
    {
        ComboBox1.RepresentativeString = "Label 1";
        ComboBox2.RepresentativeString = "XXXXXXXXXXX";
        ComboBox3.RepresentativeString = "XXXXXXXXXXX";

        ComboBox1.Label = "Simple Combo";
        ComboBox2.Label = "Advanced Combo";
        ComboBox3.Label = "Another Combo";

        ComboBox1.ItemsSourceReady += new EventHandler<EventArgs>(_comboBox1_ItemsSourceReady);

        ComboBox2.CategoriesReady += new EventHandler<EventArgs>(_comboBox2_CategoriesReady);
        ComboBox2.ItemsSourceReady += new EventHandler<EventArgs>(_comboBox2_ItemsSourceReady);

        ComboBox3.ItemsSourceReady += new EventHandler<EventArgs>(_comboBox3_ItemsSourceReady);
    }
}

!Note:
We set the RepresentativeString property BEFORE the initializing the ribbon framework. This is because for some reason the framework reads this property only once, when the ribbon is initialized. This means that if you change it after initialization it will have no affect since the framework doesn’t reads this property anymore. By the way, according to the current documentation of the ribbon framework, this property is not part of the ComboBox, but as mentioned earlier, this property controls the width of the ComboBox.

In the next code snippet, you can see how to use another helper classes, named CategoriesPropertySet and GalleryItemPropertySet. This class represents a container for properties of a single element in an IUICollection.

Adding categories and items to the ComboBox is done like this:

    void _comboBox2_CategoriesReady(object sender, EventArgs e)
    {
        // set _comboBox2 categories
        UICollection<CategoriesPropertySet> categories2 = ComboBox2.GalleryCategories;
        categories2.Clear();
        categories2.Add(new CategoriesPropertySet() { Label = "Category 1", CategoryId = 1 });
        categories2.Add(new CategoriesPropertySet() { Label = "Category 2", CategoryId = 2 });
    }

    void _comboBox2_ItemsSourceReady(object sender, EventArgs e)
    {
        // set _comboBox2 items
        UICollection<GalleryItemPropertySet> itemsSource2 = ComboBox2.GalleryItemItemsSource;
        itemsSource2.Clear();
        itemsSource2.Add(new GalleryItemPropertySet() { Label = "Label 1", CategoryId = 1 });
        itemsSource2.Add(new GalleryItemPropertySet() { Label = "Label 2", CategoryId = 1 });
        itemsSource2.Add(new GalleryItemPropertySet() { Label = "Label 3", CategoryId = 2 });
    }

!Note:
Adding items and categories can be done only AFTER the Ribbon Framework has been initialized in ItemsSourceReady or CategoriesReady event or later on.

IUICollection Events Objects that implements IUICollection interface usually expose an OnChanged event that is called when the collection has changed due to: Insert item, Remove item, Replace item, Reset collection. This event is exposed using the standard COM events mechanism, namely: IConnectionPointContainer, IConnectionPoint and Advise(). To help the user to avoid these issues altogether, I’ve created the CollectionChangedEvent class, which attaches to a given IUICollection and exposes the ChangedEvent event as a normal .NET event. Following is an example of using it:

private RegisterEvent()
{
    ComboBox1.GalleryItemItemsSource.ChangedEvent += _ChangedEvent_ChangedEvent;
}
 
void _ChangedEvent_ChangedEvent(object sender, CollectionChangedEventArgs e)
{
    MessageBox.Show("Got ChangedEvent event. Action = " + e.Action.ToString());
}

!Note:
There is no ChangedEvent event for the ComboBox. Only for IUICollection, which is completely different.

The ComboBox itself has 3 events, SelectedIndexChanged, Preview and CancelPreview. The SelectedIndexChanged event can be used as a "SelectedChange" event. See this future post.

Summary You can find a working sample that demonstrates using a ComboBox control under sample “06-ComboBox”.

ComboBox - harborsiem/WinForms-Ribbon GitHub Wiki

ComboBox

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️