Designer generated RibbonX xml

  • Article

Kathleen has posted about the new VSTO Ribbon designer being one of her favorite features. The Ribbon designer in VSTO is way cool and makes creating Ribbon UI super easy. But, there may be times when you want to go beyond what the designer supports. The Ribbon designer will allow you create a Ribbon in the designer and then perform a one time conversion to raw RibbonX xml. Or you can just add a RibbonX item to your project which will allow you to use the raw xml. This is the same experience that you have with using the ribbonX in VSTO 2005 SE. One nice feature is that VSTO provides intellisense for RibbonX in the editor.

But a common concern from developers is always what does the generated RibbonX xml look like? How clean is it? I'll let you judge for yourself.

I have created a Ribbon and threw on every Ribbon control from the toolbox and created some nested menu items and also added some controls to the office button.

 

Now just right-click in the ribbon designer and choose Export to XML from the context menu. This creates the Ribbon XML file below. The generated XML is very clean and straight forward.

<?xml version="1.0" encoding="utf-8"?>
<customUI onLoad="Ribbon_Load" xmlns="https://schemas.microsoft.com/office/2006/01/customui">
<ribbon>
<officeMenu>
<button id="Button2" label="Button2" showImage="false" />
<menuSeparator id="Separator2" />
<menu id="Menu2" label="Menu2" showImage="false" />
</officeMenu>
<tabs>
<tab idMso="TabAddIns">
<group id="Group1" label="Group1">
<button id="Button1" label="Button1" showImage="false" />
<checkBox id="CheckBox1" label="CheckBox1" />
<dropDown id="DropDown1" label="DropDown1" showImage="false" />
</group>
<group id="Group2" label="Group2">
<editBox id="EditBox1" label="EditBox1" showImage="false" />
<gallery id="Gallery1" label="Gallery1" showImage="false" />
<labelControl id="Label1" label="Label1" />
</group>
<group id="Group3" label="Group3">
<menu id="Menu1" label="Menu1" showImage="false">
<button id="Button3" label="Button3" showImage="false" />
<checkBox id="CheckBox2" label="CheckBox2" />
<menu id="Menu3" label="Menu3" showImage="false">
<gallery id="Gallery2" label="Gallery2" showImage="false">
<item id="__id5" label="Item0" />
<item id="__id6" label="Item1" />
<item id="__id7" label="Item2" />
</gallery>
</menu>
</menu>
<toggleButton id="ToggleButton1" label="ToggleButton1" showImage="false" />
<separator id="Separator1" />
<splitButton id="SplitButton1">
<button id="__id2" label="SplitButton1" />
<menu id="__id3" />
</splitButton>
</group>
</tab>
<tab id="Tab2" />
</tabs>
</ribbon>
</customUI>