Skip to content

Обзор ленты

Используйте RibbonControl для создания ленточного меню, подобного тому, которое можно найти в приложениях Microsoft Office. RibbonControl - это панель инструментов, которая организует команды и другие элементы в ряд страниц (вкладок). Страницы состоят из групп, которые, в свою очередь, отображают элементы ленты (команды, встроенные редакторы, метки, галереи и так далее).

ribbon-structure

Визуальные элементы ленты

RibbonControl включает в себя следующие элементы:

  • Страницы — Страницы ленты позволяют создавать вкладки. Вы можете добавить столько страниц, сколько вам нужно. Должна быть создана, по крайней мере, одна страница.

    На каждой странице отображается одна или несколько групп элементов.

  • Группы страниц — Группы ленты предоставляют логичный способ объединения наборов элементов внутри страниц. Группы разделены вертикальными линиями.

  • Кнопка приложения — Эта кнопка вызывает всплывающее окно меню приложения, которое обычно содержит команды, используемые для работы с файлами.

ribbon-applicationbutton-menu

Кнопка приложения, если она включена, отображается перед заголовками страниц.
  • Панель быстрого доступа — Эта панель инструментов обеспечивает доступ к часто используемым командам. Пользователи могут добавить команду на эту панель инструментов с помощью контекстного меню.

ribbon-item-contextmenu-addtoQAT

Панель быстрого доступа может отображаться над страницами ленты или под ними.

  • Элементы заголовка страницы — Вы можете отображать элементы ленты на правом краю ленты, в линии с заголовками страниц. Коллекция, в которой хранятся эти элементы, называется Элементами заголовка страницы.

  • Кнопка выбора размещения команд на ленте — Эта кнопка отображает меню, которое позволяет пользователю переключаться между классическим и упрощенным размещением команд на ленте.

ribbon-view-selection-button-command

Команда Classic "Размещение" размещает элементы ленты в три ряда:

ribbon-classic-command-layout

В размещении Simplified используется один ряд элементов:

ribbon-simplified-command-layout

Обратитесь к разделу Размещение команд на ленте для получения дополнительной информации.

Демо

Смотрите демонстрационное приложение Eremex для контролов для примеров, демонстрирующих функции RibbonControl в действии.

Создание пользовательского интерфейса на ленте

Вкратце, создание ленточного пользовательского интерфейса состоит из следующих этапов:

  1. Создайте файл RibbonControl.
  2. Добавьте страницы ленты (вкладки) на ленту.
  3. Добавьте к страницам группы страниц на ленте.
  4. Добавьте элементы ленты (команды, галереи и т.д.) в группы страниц.

Вы также можете добавить элементы ленты в Область заголовка страницы , Панель быстрого доступа , всплывающие меню и подменю.

Определите RibbonControl

RibbonControl - это многофункциональная панель инструментов. Как традиционные панели инструментов, RibbonControl управляется компонентом ToolbarManager.

Совет

The ToolbarManager component can manage not only RibbonControl. You can use this component to create traditional toolbars (for instance, a status bar) and context menus for controls.

Чтобы создать RibbonControl, определите его внутри компонента ToolbarManager.

<mxb:ToolbarManager IsWindowManager="True">
    <mxr:RibbonControl Name="ribbon1">
      <!-- ... -->
    </mxr:RibbonControl>
</mxb:ToolbarManager>

Определение страниц ленты и доступ к ним

"Страницы" ленты (вкладки) инкапсулированы классом RibbonPage.

Чтобы добавить страницы ленты в XAML, определите объекты <RibbonPage> в качестве содержимого тега <RibbonControl>. Чтобы добавлять страницы ленты в коде и получать к ним доступ, используйте коллекцию RibbonControl.Pages. 

<mxb:ToolbarManager IsWindowManager="True">
    <mxr:RibbonControl>
      <mxr:RibbonPage Header="Home" KeyTip="H"> 
        <!-- ... -->
      </mxr:RibbonPage>
      <mxr:RibbonPage Header="View" KeyTip="V">
        <!-- ... -->
      </mxr:RibbonPage>
      <mxr:RibbonPage Header="Design" KeyTip="S">
        <!-- ... -->
      </mxr:RibbonPage>
    </mxr:RibbonControl>
</mxb:ToolbarManager>

Определение групп страниц ленты и доступ к ним

"Группы страниц" ленты инкапсулируются классом RibbonPageGroup. Они являются дочерними элементами страниц ленты.

Чтобы создать группы страниц в XAML, определите объекты <RibbonPageGroup> как содержимое элементов <RibbonPage>. Чтобы добавлять группы страниц в коде и получать к ним доступ, используйте коллекцию RibbonPage.Groups. 

<mxr:RibbonPage Header="Home" KeyTip="H" Name="pageHome">
  <mxr:RibbonPageGroup Header="File" IsHeaderButtonVisible="True">
    <!-- ... -->
  </mxr:RibbonPageGroup>
  <mxr:RibbonPageGroup Header="Clipboard" IsHeaderButtonVisible="True">
    <!-- ... -->
  </mxr:RibbonPageGroup>
  <mxr:RibbonPageGroup Header="Font" IsHeaderButtonVisible="True">
    <!-- ... -->
  </mxr:RibbonPageGroup>
</mxr:RibbonPage>

Определите элементы ленты (команды, подменю, галереи и так далее).

Элементы ленты - это базовые элементы, которые вы можете добавить в пользовательский интерфейс ленты (группы страниц ленты, панель быстрого доступа и коллекция элементов заголовка страницы). Они включают в себя:

  • Кнопки (ToolbarButtonItem) — кнопка обычного или всплывающего окна.

Обычная кнопка выполняет команду (ToolbarButtonItem.Command) и события (Click и Press) при нажатии.

ribbon-items-button

Вы также можете привязать к кнопке контрол всплывающего окна. Этот контрол будет отображаться, когда пользователь нажимает кнопку или встроенную стрелку вниз.

ribbon-items-dropdownbutton

Контрол ленты позволяет вам указать размер отображения для кнопок. Вы можете использовать attached-свойство RibbonControl.DisplayMode, чтобы выбрать между большим размером, маленьким размером с текстом и маленьким размером без текста.

ribboncontrol-displaymode-large ribboncontrol-displaymode-small ribboncontrol-displaymode-smallglyph

  • "Кнопки—переключатели" (ToolbarCheckItem) - кнопка, поддерживающая два состояния - нормальное и нажатое. Состояние кнопки определяется свойством ToolbarCheckItem.IsChecked. Событие ToolbarCheckItem.CheckedChanged срабатывает, когда изменяется состояние нажатия кнопки "Проверить".

toolbarcheckitem

  • Подменю (ToolbarMenuItem) — Отображает подменю по щелчку мыши.

ribbon-toolbarMenuItem

  • Встроенный редактор (ToolbarEditorItem) — Отображает встроенный редактор, указанный свойством ToolbarEditorItem.EditorProperties. Например, вы можете встроить SpinEditor или TextEditor в пользовательский интерфейс ленты.

ribbon-toolbarEditorItem

  • Текстовая метка (ToolbarTextItem) — Отображает статический текст, указанный свойством ToolbarTextItem.Header.

ribbon-ToolbarTextItem

  • Группа элементов (ToolbarItemGroup) — неразрывная группа элементов.

ribbon-ToolbarItemGroup

Функция адаптивного размещения на ленте автоматически сворачивает и восстанавливает элементы при изменении размера контрола. Группы функционируют как единое целое. При изменении размера ленты можно свернуть только всю группу, а не отдельные ее элементы.

  • Группа переключающих кнопок (ToolbarCheckItemGroup) — Неразрывная группа переключающих кнопок (объекты ToolbarCheckItem). Класс ToolbarCheckItemGroup позволяет создавать группу взаимоисключающих элементов (radio group) и группу, которая позволяет нажимать на несколько элементов одновременно.

bars-ToolbarCheckItemGroup

  • Разделитель (ToolbarSeparatorItem) — Отображает разделитель между элементами ленты.

bars-toolbarseparatoritem

  • Галерея (RibbonGalleryItem) — Галерея элементов. Используйте свойство RibbonGalleryItem.ItemsSource, чтобы указать список объектов, которые будут отображаться как элементы галереи.

ribbon-RibbonGalleryItem

В галерее на ленте есть кнопка "всплывающее окно", которая активирует просмотр галереи в всплывающем окне. Галерея всплывающего окна может отображать дополнительные команды внизу, указанные свойством RibbonGalleryItem.DropDownItems.

ribbon-RibbonGalleryItem-dropdown

Все элементы ленты, перечисленные выше, являются потомками класса ToolbarItem. Они также могут быть добавлены к традиционным панелям инструментов и контекстным меню.

Чтобы добавить элементы в группы страниц ленты, определите соответствующие элементы ленты между начальным и конечным тегами <RibbonPageGroup>. Чтобы добавлять элементы ленты в коде и получать к ним доступ, используйте коллекцию RibbonPageGroup.Items.

Следующий фрагмент кода добавляет четыре обычные кнопки (объекты ToolbarButtonItem) в группу Clipboard. Вы можете найти полный код в демо-версии WordPad Example.

ribbon-pagegroup-additems-example

<mxr:RibbonPageGroup Header="Clipboard" IsHeaderButtonVisible="True">
    <mxb:ToolbarButtonItem Header="Paste" KeyTip="PA" Glyph="{x:Static icons:Basic.Paste}"
                           mxr:RibbonControl.DisplayMode="Large"
                           DropDownArrowVisibility="ShowSplitArrow">
        <mxb:ToolbarButtonItem.DropDownControl>
            <mxb:PopupMenu>
                <mxb:ToolbarButtonItem Header="Paste Special" KeyTip="PS" 
                  Glyph="{x:Static icons:Basic.Paste}" 
                  Command="{Binding PasteSpecialCommand}"/>
                <mxb:ToolbarButtonItem Header="Set Default Paste..." KeyTip="SP" 
                  Command="{Binding SetDefaultPasteCommand}"
                />
            </mxb:PopupMenu>
        </mxb:ToolbarButtonItem.DropDownControl>
    </mxb:ToolbarButtonItem>
    <mxb:ToolbarButtonItem Header="Cut" KeyTip="CT"
                           Glyph="{x:Static icons:Basic.Cut}" Command="{Binding CutCommand}"/>
    <mxb:ToolbarButtonItem Header="Copy" KeyTip="CP"
                           Glyph="{x:Static icons:Basic.Copy}" Command="{Binding CopyCommand}"/>
    <mxb:ToolbarButtonItem Header="Paste" KeyTip="P"
                           Glyph="{x:Static icons:Basic.Paste}" Command="{Binding PasteCommand}"/>
</mxr:RibbonPageGroup>

Дополнительные сведения см. в следующих разделах:

Поддержка шаблонов проектирования MVVM

Ленточный контрол поддерживает шаблон проектирования MVVM, позволяющий создавать страницы, группы страниц и элементы (в группах страниц, панели быстрого доступа и области заголовка страницы) из коллекций бизнес-объектов, определенных в модели представления. Следующие свойства поддерживают шаблон проектирования MVVM:

  • RibbonControl.PagesSource — Коллекция бизнес-объектов, используемых для заполнения страниц ленточного контрола. Соответствующие шаблоны данных должны определять объекты RibbonPage.
  • RibbonPage.GroupsSource — Коллекция бизнес-объектов, используемых для заполнения групп на страницах ленты. Соответствующие шаблоны данных должны определять объекты RibbonPageGroup.
  • RibbonPageGroup.ItemsSource — Коллекция бизнес-объектов, используемых для создания элементов ленты в группах страниц. Соответствующие шаблоны данных должны определять элементы ленты .
  • RibbonControl.QuickAccessToolbarItemsSource — Коллекция бизнес-объектов, используемых для создания элементов ленты на Панели быстрого доступа . Соответствующие шаблоны данных должны определять элементы ленты .
  • RibbonControl.PageHeaderItemsSource — Коллекция бизнес-объектов, используемых для создания Элементов заголовка страницы . Соответствующие шаблоны данных должны определять элементы ленты .
  • ToolbarMenuItem.ItemsSource — Коллекция бизнес-объектов, используемых для заполнения подменю элементами. Соответствующие шаблоны данных должны определять элементы ленты.



* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.