Skip to content

Группы страниц

Элементы (команды) в страницах ленты могут быть логически разделены на группы. Группы страниц ленты разделены вертикальными разделителями. Они отображают подписи внизу, когда применяется Классический командный макет . На следующей картинке показаны группы страниц File, Clipboard, Font и Styles, отображаемые на странице Home:

ribbon-page-groups

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

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

<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:RibbonPageGroup>

Вы также можете использовать свойство RibbonPage.GroupsSource для создания групп страниц из коллекции бизнес-объектов в модели представления. Соответствующий шаблон данных должен определять объект RibbonPageGroup и инициализировать его свойства из бизнес-объекта.

Заголовок группы страниц

Когда применяется Классический командный макет , группы страниц имеют заголовки внизу. В заголовке группы отображается заголовок (RibbonPageGroup.Header) и кнопка заголовка.

ribbon-page-group-header

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

  • Обработайте событие RibbonPageGroup.HeaderButtonClick или RibbonPageGroup.HeaderButtonPress. Например, ваш обработчик событий может отобразить диалоговое окно или меню, в котором отображаются дополнительные свойства, относящиеся к группе.

Событие HeaderButtonClick вызывается после нажатия и отпускания левой кнопки мыши над кнопкой заголовка. Событие HeaderButtonPress вызывается сразу после того, как пользователь нажимает любую кнопку мыши над кнопкой заголовка.

  • Назначьте команду свойству RibbonPageGroup.HeaderButtonCommand. Вы можете указать необязательный параметр команды, используя свойство RibbonPageGroup.HeaderButtonCommandParameter.

Используйте свойство RibbonPageGroup.IsHeaderButtonVisible, чтобы скрыть кнопку заголовка.

Содержимое группы страниц

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

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

 <mxr:RibbonPage Header="Home" KeyTip="H">
    <mxr:RibbonPageGroup Header="File" IsHeaderButtonVisible="True">
        <mxb:ToolbarButtonItem Header="New" KeyTip="N" Glyph="{x:Static icons:Basic.Docs_Add}"
                               mxr:RibbonControl.DisplayMode="Large"/>
        <mxb:ToolbarButtonItem Header="Open" KeyTip="O"
                               Glyph="{x:Static icons:Basic.Folder_Open}" />
        <mxb:ToolbarButtonItem Header="Exit" KeyTip="E"
                               Glyph="{x:Static icons:Basic.Remove}" />
    </mxr:RibbonPageGroup>
    <mxr:RibbonPageGroup Header="Font" IsHeaderButtonVisible="True">
        <mxb:ToolbarCheckItemGroup ShowSeparator="True">
            <mxb:ToolbarCheckItem Header="Bold" KeyTip="B" Glyph="{x:Static icons:Basic.Font_Bold}" />
            <mxb:ToolbarCheckItem Header="Italic" KeyTip="I" Glyph="{x:Static icons:Basic.Font_Italic}" />
            <mxb:ToolbarCheckItem Header="Underline" KeyTip="U" Glyph="{x:Static icons:Basic.Font_Underline}"  />
        </mxb:ToolbarCheckItemGroup>
       <!-- ... -->
    </mxr:RibbonPageGroup>
</mxr:RibbonPage>

Вы также можете использовать свойство RibbonPageGroup.ItemsSource для создания элементов из коллекции бизнес-объектов в модели представления. Соответствующие шаблоны данных должны определять элементы ленты и инициализировать их свойства из нижележащих бизнес-объектов.

Картинка группы страниц

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

page-group-collapsed

Вы можете использовать свойство RibbonPageGroup.Glyph для отображения картинки в кнопке свернутой группы:

page-group-collapsed-with-glyph

xmlns:icons="https://schemas.eremexcontrols.net/avalonia/icons"
<mxr:RibbonPageGroup Header="File" Glyph="{x:Static icons:Basic.Doc}">

Размещение элементов в группах страниц

Адаптивное размещение

Контрол ленты поддерживает функцию адаптивного размещения, которая регулирует размещение элементов в группах страниц ленты при изменении размера контрола ленты.

ribbon-adaptivelayout

Объединение элементов в группы

Вы можете сгруппировать наборы элементов ленты в неразрывные контейнеры (группы), используя ToolbarItemGroup и ToolbarCheckItemGroup . Эти контейнеры гарантируют, что элементы отображаются вместе в одной линии, сохраняя этот макет даже при применении функции адаптивного размещения. При изменении размера ленты можно свернуть только весь контейнер целиком, а не отдельные его элементы.

Например, в анимации выше элементы ribbon-command-bold, ribbon-command-italic и ribbon-command-underline объединены в неразрывный контейнер.

Картинки с элементами

Когда применяется Классический командный макет , функция адаптивного размещения также регулирует размер отображения элементов по мере изменения размера ленты — от большого к маленькому с текстом до маленьких картинок и наоборот.

ribbon-adaptive-layout-change-size-of-icons

Attached-свойство RibbonControl.DisplayMode позволяет указать поддерживаемые режимы отображения для элементов ленты в группах страниц ленты в Классическом командном размещении . Вы можете заставить элемент использовать только большие картинки, маленькие картинки, маленькие картинки с текстом или комбинацию этих режимов отображения.

<mxb:ToolbarButtonItem Header="Open" KeyTip="O" mxr:RibbonControl.DisplayMode="Large"
                          Glyph="{x:Static icons:Basic.Folder_Open}" />

Смотрите следующий раздел для получения дополнительной информации: Адаптивный размер картинки в классическом размещении команд

Связанный API

  • AllowCollapse — Указывает, может ли группа быть свернута при уменьшении ширины контрола ленты.
  • IsCollapsed — Возвращает, если текущая группа в данный момент свернута.

Настройка размещения элементов в группах страниц

Ленточный контрол поддерживает два режима размещения элементов в группах страниц:

  • Столбец (вниз, затем поперек)

    ribbon-layoutingroups-columnmode

    Элемент перемещается в новый столбец, если высоты группы недостаточно для отображения элемента ниже его предыдущего одноуровневого элемента.

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

  • Ряд (поперек, затем вниз)

    ribbon-layoutingroups-rowmode

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

    Неразрывные контейнеры (ToolbarItemGroup и ToolbarCheckItemGroup ) по умолчанию используют режим размещения строк.

Attached-свойство RibbonPageGroup.ItemLayouMode позволяет вам изменить режим размещения для неразрывных контейнеров со строки (по умолчанию) на столбец. Свойство RibbonPageGroup.ItemLayouMode в настоящее время не действует для других элементов ленты.

Значением свойства RibbonPageGroup.ItemLayouMode по умолчанию является Default, что эквивалентно Row для неразрывных контейнеров и Column для других элементов ленты.

  • Если два последовательных элемента используют разные режимы размещения (столбец и строка), второй элемент автоматически перемещается в новый столбец.
  • Чтобы разместить набор последовательных элементов с использованием режима размещения по столбцам или строкам, убедитесь, что ко всем этим элементам явно или неявно применен требуемый режим размещения.
  • Совет: Вы можете объединить два элемента ленты в отдельном неразрывном контейнере , чтобы они действовали как единое целое.

Пример - Размещение элементов в столбце

В следующем примере используется attached-свойство RibbonPageGroup.ItemLayouMode для размещения элементов в виде столбца.

ribbon-ItemLayoutDirectionInParent-example-result

Этот макет состоит из трех рядов элементов ленты:

  • В строке 1 отображается переключающий элемент.

    <mxb:ToolbarCheckItem Name="btnSort" Header="Sort Results Alphabetically" CheckBoxStyle="CheckBox"/>

  • В строке 2 отображается контейнер (ToolbarItemGroup), который сочетает в себе текстовый редактор и кнопку. Группировка элементов в контейнере необходима для позиции элементов рядом друг с другом.

    <mxb:ToolbarItemGroup Name="groupSearchBox">
    <mxb:ToolbarEditorItem Header="Search" EditorWidth="150">
        <mxb:ToolbarEditorItem.EditorProperties>
            <mxe:TextEditorProperties/>
        </mxb:ToolbarEditorItem.EditorProperties>
    </mxb:ToolbarEditorItem>
    <mxb:ToolbarButtonItem
            Header="Find"
            Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/arrow-right.svg'}"
            Command="{Binding FindCommand}"/>
</mxb:ToolbarItemGroup>

  • В строке 3 отображается контейнер (ToolbarCheckItemGroup), который объединяет три переключающих элемента:

    <mxb:ToolbarCheckItemGroup Name="groupSearchProperties"  >
    <mxb:ToolbarCheckItem
        Header="Match case"
        IsChecked="{Binding IsMatchCase}"
        Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-case.svg'}"/>
    <mxb:ToolbarCheckItem
        Header="Match whole word"
        IsChecked="{Binding IsMatchWholeWord}"
        Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-whole-word.svg'}"/>
    <mxb:ToolbarCheckItem
        Header="Use regular expressions"
        IsChecked="{Binding IsUseRegExp}"
        Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-regexp.svg'}"/>
</mxb:ToolbarCheckItemGroup>

Поместите элементы btnSort, groupSearchBox и groupSearchProperties в RibbonPageGroup:

<mxr:RibbonControl>
    <mxr:RibbonPage Header="Home">
        <mxr:RibbonPageGroup Header="Sort">
            <mxb:ToolbarCheckItem Name="btnSort" Header="Sort Results Alphabetically" CheckBoxStyle="CheckBox"/>
            <mxb:ToolbarItemGroup Name="groupSearchBox">
                <!-- ... -->
            </mxb:ToolbarItemGroup>
            <mxb:ToolbarCheckItemGroup Name="groupSearchProperties" >
                <!-- ... -->
            </mxb:ToolbarCheckItemGroup
        </mxr:RibbonPageGroup>
    </mxr:RibbonControl>
</mxr:RibbonPage

Этот код создает нежелательное размещение, при котором контейнеры groupSearchBox и groupSearchProperties перемещаются в отдельный столбец. Это происходит потому, что элемент btnSort использует режим размещения столбцов, в то время как контейнеры используют режим размещения строк по умолчанию.

ribbon-ItemLayoutDirectionInParent-example-undesired-result

Чтобы разместить контейнеры под кнопкой btnSort, установите attached-свойство RibbonPageGroup.ItemLayouMode в значение Столбец для этих контейнеров.

<mxr:RibbonControl ApplicationButtonContent="File" ApplicationButtonKeyTip="F">
    <mxr:RibbonPage Header="Home" KeyTip="M">
        <mxr:RibbonPageGroup Header="Sort">
            <mxb:ToolbarCheckItem Name="btnSort" Header="Sort Results Alphabetically" CheckBoxStyle="CheckBox"/>
            <mxb:ToolbarItemGroup Name="groupSearchBox"
                                  mxr:RibbonPageGroup.ItemLayoutMode="Column">
                <mxb:ToolbarEditorItem Header="Search" EditorWidth="150">
                    <mxb:ToolbarEditorItem.EditorProperties>
                        <mxe:TextEditorProperties/>
                    </mxb:ToolbarEditorItem.EditorProperties>
                </mxb:ToolbarEditorItem>
                <mxb:ToolbarButtonItem
                        Header="Find"
                        Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/arrow-right.svg'}"
                        Command="{Binding FindCommand}"/>
            </mxb:ToolbarItemGroup>

            <mxb:ToolbarCheckItemGroup Name="groupSearchProperties" 
                                       mxr:RibbonPageGroup.ItemLayoutMode="Column" >
                <mxb:ToolbarCheckItem
                    Header="Match case"
                    IsChecked="{Binding IsMatchCase}"
                    Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-case.svg'}"/>
                <mxb:ToolbarCheckItem
                    Header="Match whole word"
                    IsChecked="{Binding IsMatchWholeWord}"
                    Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-whole-word.svg'}"/>
                <mxb:ToolbarCheckItem
                    Header="Use regular expressions"
                    IsChecked="{Binding IsUseRegExp}"
                    Glyph="{SvgImage 'avares://Ribbon-Layout/Assets/match-regexp.svg'}"/>
            </mxb:ToolbarCheckItemGroup>
        </mxr:RibbonPageGroup>
    </mxr:RibbonPage>
</mxr:RibbonControl>

Теперь элементы btnSort, groupSearchBox и groupSearchProperties используют режим размещения по столбцам, поэтому они размещены в одном столбце, как показано на картинке ниже:

ribbon-ItemLayoutDirectionInParent-example-result

Размещение неразбивающихся контейнеров в два или три ряда

Если группа страниц достаточно широка, элементы, объединенные в неразрывные контейнеры (ToolbarItemGroup и ToolbarCheckItemGroup ), будут размещены в два ряда. Когда ширина группы страниц уменьшается, контейнеры размещены в три ряда, что создает более компактное размещение.

ribbon-group-three-and-two-rows

В особых случаях может потребоваться принудительное размещение неразбивающихся контейнеров в два или три ряда. Для этой цели установите attached-свойство RibbonPageGroup.ItemGroupLayoutMode для первого неразрывного контейнера равным Layout2Rows или Layout3Rows (значение свойства по умолчанию - AdaptiveLayout).

Пример - Принудительное размещение контейнеров в два ряда

Рассмотрим RibbonPageGroup, который содержит четыре неразрывных контейнера (группы) элементов.

ItemGroupLayoutMode-example-indicate4groups

Когда вы изменяете размер контрола ленты, функция адаптивного размещения контейнеров размещает контейнеры в два или три ряда, подгоняя их под доступное пространство.

ItemGroupLayoutMode-example-animation

Чтобы принудительно разместить контейнеры в два ряда, установите для attached-свойства RibbonPageGroup.ItemGroupLayoutMode для первого неразрывного контейнера значение Layout2Rows.

<mxr:RibbonPageGroup Header="Paragraph">
    <mxb:ToolbarItemGroup Name="gIndent"
                          mxr:RibbonPageGroup.ItemGroupLayoutMode="Layout2Rows">
        <mxb:ToolbarButtonItem Header="Increase Indent" Glyph="{x:Static icons:Basic.Level_Increase}"/>
        <mxb:ToolbarButtonItem Header="Decrease Indent" Glyph="{x:Static icons:Basic.Level_Reduce}"/>
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarItemGroup  Name="gLineSpacing">
        <mxb:ToolbarButtonItem Header="Increase Line Spacing" Glyph="{x:Static icons:Basic.List_Collapse}"/>
        <mxb:ToolbarButtonItem Header="Decrease Line Spacing" Glyph="{x:Static icons:Basic.List_Expand}"/>
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarItemGroup  Name="gParaNumbering">
        <mxb:ToolbarButtonItem Header="Bullets" Glyph="{x:Static icons:Office.Bullets}" />
        <mxb:ToolbarButtonItem Header="Numbering" Glyph="{x:Static icons:Office.Line_Numbering}" />
        <mxb:ToolbarButtonItem Header="Multilevel List" Glyph="{x:Static icons:Office.Multilevel_List}" />
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarCheckItemGroup  Name="gAlign" CheckType="Radio">
        <mxb:ToolbarCheckItem Header="Align Left" Glyph="{x:Static icons:Alignment.Align_Left}"/>
        <mxb:ToolbarCheckItem Header="Align Center" Glyph="{x:Static icons:Alignment.Align_Horizontal_Centers}"/>
        <mxb:ToolbarCheckItem Header="Align Right" Glyph="{x:Static icons:Alignment.Align_Right}"/>
    </mxb:ToolbarCheckItemGroup>
</mxr:RibbonPageGroup>

Это приводит к размещению контейнеров в два ряда. Если места недостаточно для отображения контейнеров целиком, они автоматически сворачиваются.

ItemGroupLayoutMode-example-result-animation

Если вам нужен определенный элемент для начала нового столбца, поместите объект ToolbarSeparatorItem перед этим элементом.

<mxr:RibbonPageGroup Header="Paragraph">
    <mxb:ToolbarItemGroup Name="gIndent" mxr:RibbonPageGroup.ItemGroupLayoutMode="Layout2Rows">
        <!-- ... -->
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarItemGroup  Name="gLineSpacing">
        <!-- ... -->    
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarItemGroup  Name="gParaNumbering">
        <!-- ... -->
    </mxb:ToolbarItemGroup>

    <mxb:ToolbarSeparatorItem/>

    <mxb:ToolbarCheckItemGroup  Name="gAlign" CheckType="Radio">
        <!-- ... -->        
    </mxb:ToolbarCheckItemGroup>
</mxr:RibbonPageGroup>

ItemGroupLayoutMode-example-add-separator



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