Creating a Gallery

The more choices you have to offer, the less attractive becomes the drop-down list control because the list just gets too long to navigate efficiently. A better solution for a large number of options is a gallery control, which displays multiple items in the number of rows and columns you specify. To create a gallery in RibbonX, begin with the <gallery> element:

<gallery id="value"
label="value"
imageMso="value"
size="normal|large"
InsertAfterMso="value"
InsertBeforeMso="value"
onAction="value"
enabled="true|false"
visible="true|false"
screentip="value"
supertip="value"
keytip="value"
showItemImage="true|false"
showItemLabel="true|false"
showImage="true|false"
showLabel="true|false">
rows="value"
columns="value">

Here's an example:

<gallery id="galInsertHyperlinksFor"columns="3"size="large"label="Insert Hyperlinks For"imageMso="HyperlinkInsert"onAction="Module1.galInsertHyperlinksFor_OnAction"></gallery>

The <gallery> element creates an empty drop-down list. To populate the list, you create multiple <item> elements, followed by one or more <button> elements, if needed. The basic idea is that the <item> elements provide the user with several predefined choices, whereas the <button> elements run code that enable the user to make other choices, change the configuration, and so on. You use the <gallery> element's rows and columns attributes to specify the configuration of the items within the gallery.

You insert the <item> and <button> elements between the <gallery> and </gallery> elements, with the <item> elements first, as shown in this example:

<gallery id="gallery1"columns="3"size="large"label="Insert Hyperlinks For"imageMso="HyperlinkInsert"onAction="Module1.galInsertHyperlinksFor_OnAction"><item id="galleryheading1" imageMso="_1" label="Heading 1" /><item id="galleryheading2" imageMso="_2" label="Heading 2" /><item id="galleryheading3" imageMso="_3" label="Heading 3" /><item id="galleryheading4" imageMso="_4" label="Heading 4" /><item id="galleryheading5" imageMso="_5" label="Heading 5" /><item id="galleryheading6" imageMso="_6" label="Heading 6" /><item id="galleryheading7" imageMso="_7" label="Heading 7" /><item id="galleryheading8" imageMso="_8" label="Heading 8" /><item id="galleryheading9" imageMso="_9" label="Heading 9" /><button id="btnChooseAnotherStyle"label="Choose Another Style..."imageMso="StylesPane"onAction="Module1.btnChooseAnotherStyle_OnAction" /></gallery>

Here are the lstInsertHyperlinksFor_OnAction and btnChooseAnotherStyle_OnAction macros:

Sub galInsertHyperlinksFor_OnAction(control As IRibbonControl, id As String, index As Integer)Select Case idCase "galleryheading1"InsertHyperlinks "Heading 1"Case "galleryheading2"InsertHyperlinks "Heading 2"Case "galleryheading3"InsertHyperlinks "Heading 3"Case "galleryheading4"InsertHyperlinks "Heading 4"Case "galleryheading5"InsertHyperlinks "Heading 5"Case "galleryheading6"InsertHyperlinks "Heading 6"Case "galleryheading7"InsertHyperlinks "Heading 7"Case "galleryheading8"InsertHyperlinks "Heading 8"Case "galleryheading9"InsertHyperlinks "Heading 9"End SelectEnd SubSub btnChooseAnotherStyle_OnAction(ByVal control As IRibbonControl)Dim strStyle As StringstrStyle = InputBox("Type the style you want to use:")If strStyle <> "" Then InsertHyperlinks (strStyle)End Sub

As with the <dropDown> element, the Sub statement for a <gallery> element includes a String variable named id and an Integer variable named index. The id variable returns the value of the id attribute of the <item> object that was clicked in the gallery; the index variable returns the index of the clicked <item> object within the gallery, where the first item in the gallery has index 0, the second item has index 1, and so on.