SharePoint Ribbon. Создание многоуровневого меню

28 декабря, 2012

SharePoint 2010/2013 Ribbon API
SharePoint Ribbon. Использование ColorPicker'а
SharePoint Ribbon. Создание многоуровневого меню

Еще один сценарий применения QASPRibbon - создание многоуровневого меню.

В SharePoint меню на рибоне может быть использовано в следующих элементах: FlyoutAnchor, SplitButton, MRUSplitButon, DropDown и ComboBox. Каждое меню состоит из секций (MenuSection), которые могут содержать либо кнопки (Button) либо точки привязки (FlyoutAnchor) для отображения меню нижнего уровня.

Декларативно раскрывающийся список (DropDown), содержащий двухуровневое меню будет выглядеть примерно вот так (без указания атрибутов):

<DropDown>
  <Menu>
    <Controls>
      <MenuSection>
        <Controls>
          <Button><!-- Кнопка - пункт меню --></Button>
          <FlyoutAnchor> <!-- Точка привязки меню -->
            <Menu>
              <Controls>
                <MenuSection>
                  <Controls>
                    <Button><!-- Кнопка - пункт меню --><Button>
                  </Controls>
                </MenuSection>
              </Controls>
            </Menu>
          </FlyoutAnchor>
        </Controls>
      </MenuSection>
    </Controls>
  </Menu>
</DropDown>

В результате мы получим двухуровневое меню. Первый уровень будет содержать одну кнопку и ссылку на нижестоящий уровень с одной кнопкой.

Чтобы достичь того же результата, используя QASPRibbon, понадобится вот такой код:

var dropDown = new RibbonDropDown("DropDownId", "DropDownTitle")
{
    Sections = new[]
    {
        new RibbonMenuSection("SectionId", "SectionTitle")
        {
            Controls = new RibbonControl[]
            {
                new RibbonButton("ButtonId", "ButtonTitle"),
                new RibbonFlyoutAnchor("FlyoutAnchorId", "FlyoutAnchorTitle")
                {
                    Sections = new[]
                    {
                        new RibbonMenuSection("SectionId", "SectionTitle")
                        {
                            Controls = new RibbonControl[]
                            {
                                new RibbonButton("ButtonId", "ButtonTitle")
                            }
                        }
                    }
                }
            }
        }
    }
};

Код на первый взгляд не менее "кудрявый". Но есть следующие неоспоримые плюсы:

Генерация меню динамически на основе каких-либо данных (тот же список в SharePoint) крайне проста. Использование метода .Select(x=> new RibbonButton(x.Id.ToString(), x.Title){...}) почти всегда достаточно. Можно написать 2-3 метода, которые будут генерировать правильный XML-код, но читабельность такого подхода будет ниже некуда. Инкапсуляция здесь очень облегчает задачу как разработки так и сопровождения решения;
Использование обработчиков на стороне сервера. Опять инкапсуляция, позволяющая избежать изобретения велосипеда;
Модификация созданного ribbon-элемента управления. В случае применения нативного API приходится парсить XML (одно только тестирование такого решения обойдется очень дорого). В случае использования классов задача становится крайне простой;

Создание меню

Для удобства создадим демо-метод, который будет возвращать секцию меню, описанную выше:

private RibbonMenuSection[] GetFakeMenuSections()
{
    return new[]
    {
        new RibbonMenuSection("SectionId", "SectionTitle")
        {
            //Картинка 32x32 + текст
            DisplayMode = RibbonMenuDisplayMode.Menu32,
            Controls = new RibbonControl[]
            {
                new RibbonButton("ButtonId", "ButtonTitle")
                {
                    Image = RibbonImageDefinition.Standard(7, 7)
                },
                new RibbonFlyoutAnchor("FlyoutAnchorId", "FlyoutAnchorTitle")
                {
                    Image = RibbonImageDefinition.Standard(7, 7),
                    Sections = new[]
                    {
                        new RibbonMenuSection("SectionId", "SectionTitle")
                        {
                            Controls = new RibbonControl[]
                            {
                                new RibbonButton("ButtonId", "ButtonTitle")
                                {
                                    Image = RibbonImageDefinition.Standard(7, 7)
                                }
                            }
                        }
                    }
                }
            }
        }
    };
}

Это позволит уменьшить кол-во кода в дальнейшем.

Теперь перейдем непосредственного к созданию меню. Вот код, описывающий простую вкладку, дочернюю группу и элементы с выпадающими меню:

// Новая закладка
var menuTab = new RibbonTab("MenuTab", "Menu demo tab")
{
    // Порядковый номер должен быть не кратен 100
    Sequence = 550,
    // Указыаем порядковый номер элемента
    Groups = new[]
    {
        // Новая группа
        new RibbonGroup("MenuGroup", "Menu demo group")
        {
            // Располагаем элементы по центру
            Alignment = RibbonGroupAlignment.Middle,
            // Отображаем картинку и текст
            DisplayMode = RibbonDisplayMode.Image16AndCaption,
            // Разметка в две строки
            Template = RibbonGroupTemplate.TwoRows,
            Controls = new RibbonControl[]
            {
                new RibbonDropDown("DropDownId", "DropDownTitle")
                {
                    Sections = GetFakeMenuSections()
                },
                new RibbonComboBox("ComboBoxId", "ComboBoxTitle")
                {
                    Sections = GetFakeMenuSections()
                },
                new RibbonFlyoutAnchor("FlyoutAnchorId", "FlyoutAnchorTitle")
                {
                    Image = RibbonImageDefinition.Standard(7, 8),
                    Sections = GetFakeMenuSections()
                },
                new RibbonSplitButton("SplitButtonId", "SplitButtonTitle")
                {
                    Image = RibbonImageDefinition.Standard(7, 8),
                    Sections = GetFakeMenuSections()
                }
            }
        }
    }
};

Очень простой и читабельный код. Я указал изображение для SplitButton, так как по мимо выпадающего меню это ещё и кнопка. Аналогично можно использовать и MRUSplitButton, но для него нужна разметка группы в одну строку.

В качестве разметки группы я использовал две строки (TwoRows). Какие ещё бывают разметки и как они выглядят можно посмотреть на странице проекта. Порядковый номер группы не должен быть кратен 100, т.к. такие номера используются стандартными вкладками SharePoint.

Теперь добавим вкладку на страницу:

RibbonManager.Current.AddTabToPage(menuTab, Page);

И результат в браузере:

При выборе какого-либо пункта меню в DropDown или ComboBox соответствующий им контейнер заполняется текстом из выбранного пункта, т.е. пользователи смогут увидеть то, что они выбрали:

При использовании стандартных средств SharePoint для использования Ribbon, пришлось бы использовать вот такой XML-код:

<?xml version="1.0" encoding="utf-8"?>
<Tab Id="Ribbon.MenuTab" Title="Menu demo tab" CssClass="" Sequence="550">
 <Scaling Id="Ribbon.MenuTab.Scaling">
  <MaxSize Id="Ribbon.MenuTab.MenuGroup.MaxSize" GroupId="Ribbon.MenuTab.MenuGroup" Size="Ribbon.MenuTab.MenuGroupLayout" Sequence="10" />
 </Scaling>
 <Groups Id="Ribbon.MenuTab.Groups">
  <Group Id="Ribbon.MenuTab.MenuGroup" Title="Menu demo group" Description="" Sequence="1" Template="Ribbon.MenuTab.MenuGroupTemplate">
   <Controls Id="Ribbon.MenuTab.MenuGroup.Controls">
    <DropDown Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId" Sequence="1" Width="100px" TemplateAlias="Ribbon.MenuTab.MenuGroupLayout1MediumRowI" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false" QueryCommand="Ribbon.MenuTab.MenuGroup.Controls.DropDownIdQueryCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.DropDownIdCommand" CommandMenuOpen="Ribbon.MenuTab.MenuGroup.Controls.DropDownIdCommandMenuOpen" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.DropDownIdCommandMenuClose">
     <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu">
      <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu16" Scrollable="true">
       <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls">
        <Button Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.ButtonIdCommand" />
        <FlyoutAnchor Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId" Sequence="2" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="FlyoutAnchorTitle" TemplateAlias="" PopulateQueryCommand="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorIdPopulateQueryCommand" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorIdCommandMenuClose" Command="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorIdCommandQuery" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false">
         <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu">
          <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu32" Scrollable="true">
           <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls">
            <Button Id="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.DropDownId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" />
           </Controls>
          </MenuSection>
         </Menu>
        </FlyoutAnchor>
       </Controls>
      </MenuSection>
     </Menu>
    </DropDown>
    <ComboBox Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId" Sequence="2" Width="100px" AutoComplete="true" AutoCompleteDelay="100" AllowFreeForm="false" TemplateAlias="Ribbon.MenuTab.MenuGroupLayout1MediumRowII" CacheMenuVersions="false" PopulateDynamically="false" PopulateOnlyOnce="false" QueryCommand="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxIdQueryCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxIdCommand" CommandMenuOpen="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxIdCommandMenuOpen" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxIdCommandMenuClose" InitialItem="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.ButtonId">
     <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu">
      <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu16" Scrollable="true">
       <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls">
        <Button Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.ButtonIdCommand" />
        <FlyoutAnchor Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId" Sequence="2" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="FlyoutAnchorTitle" TemplateAlias="" PopulateQueryCommand="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorIdPopulateQueryCommand" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorIdCommandMenuClose" Command="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorIdCommandQuery" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false">
         <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu">
          <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu32" Scrollable="true">
           <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls">
            <Button Id="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.ComboBoxId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" />
           </Controls>
          </MenuSection>
         </Menu>
        </FlyoutAnchor>
       </Controls>
      </MenuSection>
     </Menu>
    </ComboBox>
    <FlyoutAnchor Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId" Sequence="3" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-128" Image32by32Top="-256" LabelText="FlyoutAnchorTitle" TemplateAlias="Ribbon.MenuTab.MenuGroupLayout2MediumRowI" PopulateQueryCommand="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorIdPopulateQueryCommand" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorIdCommandMenuClose" Command="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorIdCommandQuery" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false">
     <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu">
      <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu16" Scrollable="true">
       <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls">
        <Button Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" />
        <FlyoutAnchor Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId" Sequence="2" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="FlyoutAnchorTitle" TemplateAlias="" PopulateQueryCommand="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorIdPopulateQueryCommand" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorIdCommandMenuClose" Command="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorIdCommandQuery" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false">
         <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu">
          <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu32" Scrollable="true">
           <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls">
            <Button Id="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.FlyoutAnchorId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" />
           </Controls>
          </MenuSection>
         </Menu>
        </FlyoutAnchor>
       </Controls>
      </MenuSection>
     </Menu>
    </FlyoutAnchor>
    <SplitButton Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId" Sequence="4" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-128" Image32by32Top="-256" LabelText="SplitButtonTitle" TemplateAlias="Ribbon.MenuTab.MenuGroupLayout2MediumRowII" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonIdCommandQuery">
     <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu">
      <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu16" Scrollable="true">
       <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls">
        <Button Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.ButtonIdCommand" />
        <FlyoutAnchor Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId" Sequence="2" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="FlyoutAnchorTitle" TemplateAlias="" PopulateQueryCommand="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorIdPopulateQueryCommand" CommandMenuClose="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorIdCommandMenuClose" Command="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorIdCommand" CommandQuery="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorIdCommandQuery" CacheMenuVersions="true" PopulateDynamically="false" PopulateOnlyOnce="false">
         <Menu Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu">
          <MenuSection Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId" Sequence="1" Title="SectionTitle" DisplayMode="Menu32" Scrollable="true">
           <Controls Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls">
            <Button Id="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" Sequence="1" Image16by16="/_layouts/1033/images/formatmap16x16.png" Image32by32="/_layouts/1033/images/formatmap32x32.png" Image16by16Left="-112" Image32by32Left="-224" Image16by16Top="-112" Image32by32Top="-224" LabelText="ButtonTitle" MenuItemId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonId" CommandValueId="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" Command="Ribbon.MenuTab.MenuGroup.Controls.SplitButtonId.Menu.SectionId.Controls.FlyoutAnchorId.Menu.SectionId.Controls.ButtonIdCommand" />
           </Controls>
          </MenuSection>
         </Menu>
        </FlyoutAnchor>
       </Controls>
      </MenuSection>
     </Menu>
    </SplitButton>
   </Controls>
  </Group>
 </Groups>
</Tab>

Напоследок про ComboBox. Он поддерживает автодополнение, но работает оно только для первого уровня меню. Все остальные пункты меню в результатах выводится не будут. Это не мешает выбирать их вручную.