Макет и изменение размера ленты

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

Обзор изменения размеров ленты

Элемент управления на ленте динамически изменяет свой размер по мере изменения ширины окна приложения. В примерах ниже показано изменение размеров ленты по мере сужения окна приложения.

Если в окне достаточно свободного места, размер каждой группы на вкладке наибольший из заданных.

Лента с крупными элементами управления

По мере сужения окна размер групп Буфер обмена и Вставка уменьшается.

Лента с элементами управления среднего размера

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

Лента со свернутыми группами

Изменение размеров по умолчанию

По умолчанию для панелей на ленте используются изменение размера Star: наибольший возможный размер элементов управления, который соответствует доступному пространству. При изменении ширины окна размер группы элементов управления циклично изменяется справа налево. Если язык и региональные параметры предусматривают письмо справа налево, размер групп элементов управления циклично изменяется слева направо.

Изменение размеров Star — это подход, при котором доступное пространство равномерно распределяется между элементами. Название (Star) основано на том, что при задании размеров в XAML используется звездочка (*).

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

Настраиваемое изменение размера

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

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

Уровень

Способ определения настраиваемого изменения размера

RibbonControl

Свойство ControlSizeDefinition служит для указания размера отображаемого элемента управления.

RibbonGroup

Свойство GroupSizeDefinitions служит для указания возможных комбинаций размеров элемента управления, используемых при изменении размера.

RibbonTab

Свойство GroupSizeReductionOrder служит для указания порядка изменения размера групп на ленте.

Изменение размера на уровне элемента управления

Правила ленты предусматривают три стандартных размера элементов управления на ленте: большой, средний и малый. У каждого элемента управления имеется свойство ControlSizeDefinition, заданное для объекта RibbonControlSizeDefinition. У объекта RibbonControlSizeDefinition имеется свойство ImageSize, определяющее необходимость показа большого или малого изображения, а также свойство IsLabelVisible, определяющее видимость метки элемента управления.

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

Размер

Описание

ImageSize

IsLabelVisible

Большой

Большое изображение, до двух строк для метки.

RibbonImageSize.Large

true

Средний

Малое изображение, до одной строки для метки.

RibbonImageSize.Small

true

Малый

Только малое изображение без метки.

RibbonImageSize.Small

false

В следующем примере показаны три объявления RibbonControlSizeDefinition, соответствующие большому, среднему и малому элементу управления.

<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />

Ff701790.collapse_all(ru-ru,VS.110).gifГруппы элементов управления

Связанные элементы управления на ленте можно группировать в объект RibbonControlGroup. При изменении размера группы элементов управления объект RibbonControlSizeDefinition применяется ко всем элементам управления в RibbonControlGroup. Объект RibbonControlGroup находится в RibbonGroup, как если бы он был одним элементом управления.

Изменение размера на уровне группы

При изменении размера ленты размер групп на вкладке изменяется с использованием встроенной логики объекта RibbonGroupItemsPanel, заданной пользователем логики изменения размера или же сочетания этих обеих логик. По умолчанию объект RibbonGroupItemsPanel изменяет размер элементов управления в группе, чтобы показать наибольший возможный размер элементов управления, который соответствует доступному пространству. Если задано, размер групп на вкладке изменяется с помощью комбинации свойств GroupSizeReductionOrder (которое задает порядок изменения размера групп) и RibbonGroup.GroupSizeDefinitions (которое задает возможные размеры группы).

В следующем примере показано свойство GroupSizeDefinitions для группы Буфер обмена, показанной в предыдущем примере.

<ribbon:RibbonGroup.GroupSizeDefinitions>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition>
    <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
    <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
  </ribbon:RibbonGroupSizeDefinition>
  <ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>

Свойство GroupSizeDefinitions содержит коллекцию объектов RibbonGroupSizeDefinition, каждый из которых определяет одну возможную конфигурацию для группы. При изменении размера ленты свойство ItemsPanel определяет конкретный объект RibbonGroupSizeDefinition, который отвечает за соответствие всех элементов управления свободному пространству. После этого оно изменяет размер элементов управления, как задано объектами RibbonControlSizeDefinition в выбранном объекте RibbonGroupSizeDefinition. Определения размера элементов управления последовательно применяются к элементам управления в группе.

В правилах ленты предусмотрено, что каждая группа должна задавать не менее двух предопределенных размеров: большой и свернутый. Если объект RibbonGroup больше не может размещать элементы управления доступного размера, группа сворачивается в разворачивающуюся кнопку. Когда группа свернута, наибольший заданный размер показывается при нажатии этой кнопки. На показанном выше третьем рисунке группа Буфер обмена свернута, а ее наибольший заданный размер показывается при нажатии раскрывающейся кнопки.

Чтобы группа сворачивалась в раскрывающуюся кнопку, необходимо задать свойство IsCollapsed как true. Поскольку свернутая группа всегда показывает свой наибольший размер при открытии, не следует определять коллекцию объектов RibbonControlSizeDefinition, если задано свойство IsCollapsed. Если задана коллекция RibbonControlSizeDefinition, свойство IsCollapsed не учитывается.

Свойства GroupSizeDefinitions в примере показаны выше.

  • На первом рисунке выше первый объект RibbonGroupSizeDefinition применяется к группе Буфер обмена. Три объекта RibbonControlSizeDefinition по очереди применяются к трем кнопкам и определяют их размер как большой, средний и средний.

  • На втором рисунке в окне меньше свободного пространства, поэтому к группе Буфер обмена применяется второй объект RibbonGroupSizeDefinition. Объекты RibbonControlSizeDefinition определяют размер кнопок как большой, малый и малый.

  • На третьем рисунке применяется последний объект RibbonGroupSizeDefinition. Вместо определения размеров элементов управления этот объект сворачивает группу.

Ff701790.collapse_all(ru-ru,VS.110).gifИзменение размера на уровне группы с помощью настраиваемого свойства ItemsPanel

Если с помощью функции изменения размеров по умолчанию или свойства GroupSizeDefinitions невозможно добиться необходимого размещения, свойство по умолчанию ItemsPanel можно заменить пользовательской панелью. Например, показанная в предыдущем примере группа Шрифт содержит несколько групп кнопок, каждая из которых сгруппирована в RibbonControlGroup. Как уже было сказано ранее, объект RibbonControlGroup находится в RibbonGroup, как если бы он был одним элементом управления. В результате размер группы Шрифт не изменяется необходимым образом при использовании панели по умолчанию. Чтобы добиться показанного размещения, объект по умолчанию RibbonGroupItemsPanel заменяется стандартным объектом WrapPanel.

В следующем примере показано, как использовать объект WrapPanel в качестве свойства ItemsPanel объекта RibbonGroup.

<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
  <ribbon:RibbonGroup.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Horizontal" MaxWidth="300" />
    </ItemsPanelTemplate>
  </ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>

Изменение размера на уровне вкладки

Чтобы определить изменение размера на уровне вкладки, свойство RibbonTab.GroupSizeReductionOrder должно задавать порядок изменения размера групп. Чтобы определить GroupSizeReductionOrder, свойству Name каждого объекта RibbonGroup должно быть присвоено уникальное значение. Порядок уменьшения задается путем добавления имен групп в список порядка уменьшения.

В следующем примере показано задание свойства GroupSizeReductionOrder для вкладки Главная, показанной на предыдущем рисунке.

<ribbon:RibbonTab Header="Home" 
    GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
    <ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
        ...  
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
        ...
    </ribbon:RibbonGroup>
    <ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
        ...
    </ribbon:RibbonGroup>
</ribbon:RibbonTab>

На первом рисунке на ленте достаточно пространства, чтобы разместить все группы, используя наибольший размер. На втором рисунке, где размер окна меньше, размер первых двух групп, определенных свойством GroupSizeReductionOrder (соответственно Буфер обмена и Вставка), меньше. На третьем рисунке размер групп Вставка, Абзац и Буфер обмена уменьшился еще сильнее.

Свойством по умолчанию ItemsPanel для объекта RibbonTab является RibbonGroupsPanel. Эта панель определяет доступный размер и размещение групп на вкладке на основе порядка уменьшения размера по умолчанию или уменьшения размера, настроенного пользователем.

Если коллекция GroupSizeReductionOrder содержит имя, которое отсутствует в одной из групп на вкладке, это имя не учитывается. Если количество повторов имени группы в коллекции больше числа вариантов размера для этой группы, ее размер становится наименьшим, а повторы в коллекции не учитываются. Если какая-либо группа не указана в списке коллекции GroupSizeReductionOrder, размер этих групп уменьшается циклично по одной справа налево после выполнения всех определенных пользователей уменьшений. Это означает, что по умолчанию, если свойство GroupSizeReductionOrder пустое, размер каждой группы уменьшается циклично по одной справа налево. Для языков с письмом справа налево изменение размера, соответственно, противоположно.