Windows Ribbon Framework. Масштабирование

Перевод. Оригинал Sizing & Scaling

Закончить разговор о Ribbon Designer мы хотели бы описанием правил масштабирования, которые можно указать "ленте". Определение расположения элементов управления и правил масштабирования - это самая сложная часть проектирования "ленты", но результат того стоит!

Правила масштабирования определяют, как будет вести себя "лента" при изменении ее ширины. Правила указываются на уровне групп (напомним, что группы - это наборы элементов управления "ленты"); каждая группа может иметь четыре типовых "размера":

Large	Medium	Small	Popup

Правила масштабирования

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

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

Группы Clipboard (Буфер обмена) и Editing (Правка) имеют предпочтительный размер Medium, в то время как другие группы имеют размер Large. Чтобы указать предпочтительные размеры с помощью Ribbon Designer, используйте узел "Scaling Policy | Ideal Sizes":

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

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

На первом этапе все группы имеют указанные предпочтительные размеры. Далее, группа Clipboard (Буфер обмена) изменит свой размер на Small, в то время как группа Insert (Вставить) уменьшится до размера Popup. Затем остальные группы также будут изменять свой размер на Popup, пока, наконец, размер группы Font (Шрифт) сначала не уменьшится до Medium, а затем до Popup. Если пользователь и дальше продолжит уменьшать ширину окна, "лента" перестанет отображаться.

Чтобы задать такое поведение групп, необходимо добавить к узлу Scaling Policy дочерние элементы:

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

Определение расположения элементов управления в группах

Мы теперь знаем, каким образом фреймворк масштабирует группы. Но что на самом деле значат эти типовые размеры: Large, Medium, Small, Popup? А определяются они расположением элементов управления в группе, которое для каждого размера будет свое. Указать это расположение вы можете, указав значение свойства Size Definition для выбранной группы:

В Windows Ribbon Framework уже определены некоторые значений этого свойства. Если вы снова посмотрите на вкладку Home (Главная) в нашем примере, то увидите, что свойство Size Definition для каждой группы имеет значение:

• Clipboard (Буфер обмена): "3 Buttons, 1 Big and 2 Small" ("3 кнопки, 1 большая и 2 маленьких"). Такое расположение требует наличия трех кнопок в группе (в нашем примере это кнопки Paste (Вставить), Cut (Вырезать) и Copy (Копировать)). Если группа имеет размер Large, то все кнопки отображаются большого размера. При размере Medium группы первая кнопка (Paste (Вставить)) сохраняет свой большой размер, а остальные кнопки имеют небольшой размер и сопровождаются заголовками. И при размере Small группы первая кнопка все еще остается большой, а остальные кнопки отображаются уже без заголовков.
• Font (Шрифт): "1 Font Control". Используется для элемента управления шрифтом. Поддерживается в группах с размерами Large и Medium.
• Paragraph (Абзац): "Custom". Указанное вами расположение элементов управления в группе. Как указать собственное расположение элементов управления в группе, читайте ниже.
• Insert (Вставка): "4 Buttons" ("4 кнопки"). Необходимо, чтобы группа содержала четыре кнопки. При размере Large группы все кнопки имеют большой размер. Если группа имеет размер Medium, то первая кнопка остается большой, а остальные кнопки имеют маленький размер и заголовки. При размере Small расположение кнопок аналогично предыдущему, но три маленьких кнопки отображаются без заголовков.
• Editing (Правка): "3 Buttons" ("3 кнопки"). Группу должны составлять три кнопки. Такое расположение поддерживается только при размерах Large и Medium группы. При размере Large все кнопки имеют большой размер. Если группа имеет размер Medium, то все кнопки имеют маленький размер и отображаются с заголовками.

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

Произвольное расположение элементов управления в группах

Если предопределенное расположение элементов управления вас не устраивает, или группа содержит больше элементов управления, чем позволяют предопределенные константы, то вы можете задать собственное расположение элементов в группе. В шаблоне WordPad в группе Paragraph (Абзац) как раз задано такое расположение элементов:

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

1. Первая строка:
   
   
   • Группа из двух кнопок "Уменьшить отступ" и "Увеличить отступ".
   • Группа, состоящая из одной split-кнопки "Список". Пусть вас не смущает, что группа состоит всего из одного элемента. В этом случае кнопка будет отделена от других элементов управления небольшим пустым пространством. Если бы мы этого не сделали, кнопка отображалась бы вплотную к остальным элементам управления.
   • Группа из одной разворачивающейся кнопки "Межстрочный интервал".
   
   
2. Вторая строка:
   
   
   • Группа из четырех кнопок выравнивания текста.
   • Группа из одной кнопки вызова диалога параметров абзаца.

Есть два способа задать собственное расположение элементов управления. Первый способ: указать расположение на уровне "ленты" (узел "Ribbon | Size Definitions" в списке элементов управления "ленты"). Используя этот способ, вы можете указать собственное расположение элементов и применять его сразу к нескольким группам. Второй способ: задать расположение элементов на уровне группы. При этом такое расположение будет применяться только для указанной группы.

Определение расположения элементов на уровне "ленты"

В нашем примере мы для группы Paragraph (Абзац) задали расположение элементов на уровне "ленты" (несмотря на то, что такое расположение будет применяться только для этой группы). Узлы в списке элементов управления "ленты" для размера Large будут выглядеть следующим образом:

Указывая расположение элементов вы должны указать его наименование (в нашем примере - ParagraphLayout), а также указать список имен (произвольных) элементов управления. Если у нас в группе имеются восемь элементов управления, то вы также должны указать восемь имен элементов (в примере указаны имена ButtonOutdent, ButtonIndent и т.д., но вы можете указать собственные имена). Эти имена будут использоваться только для определения расположения элементов и ни на что больше влиять не будут.

Далее нам нужно добавить от 1 до 3 опредений расположения элементов. Каждое такое определение должно соответствовать одному из размеров группы (Large, Medium и Small). В определение добавляем строки (Row), сгруппированные элементы управления (Group), элементы управления (Control) и разделители между столбцами элементов управления (Column Break). На рисунке выше можно увидеть, что такое определение повторяет расположение элементов в группе Paragraph (Абзац).

Когда наше определение создано, можно добавить на вкладку группу Paragraph (Абзац). Когда мы присвоим свойству Size Definition группы значение Custom, мы сможем назначить в качестве значения свойства Custom Size Definition наименование нашего определения (ParagraphLayout). После этого все элементы управления в группе будут расположены так, как нам надо.

Определение расположения элементов управления на уровне группы

Укажем, как должны распологаться элементы в группе Show or hide (Показать или скрыть) на вкладке View (Вид):

Эта группа состоит всего из двух элементов управления. Зададим расположение элементов непосредственно для этой группы. В списке элементов управления "ленты" выберите группу Show or hide (Показать или скрыть) и свойству Size Definition присвойте значение Advanced. К узлу группы в списке при этом добавится дочерний узел Size Definition:

Не нужно указывать имя для этого определения, так как мы не можем использовать его для других групп. Само определение очень простое: оно содержит только два элемента управления (никаких строк и сгруппированных элементов).

Далее

Этим постом мы завершаем описание работы с Ribbon Designer. Теперь вы можете проектировать "ленты" любой сложности. Под конец дадим несколько советов:

• Разбивайте процесс проектирования на небольшие этапы, на каждом шаге создавая сначала команды и определения для группы и, затем, группу. После каждого этапа собирайте проект (Ctrl+F9) и просматривайте результаты (F9), устраняя возникающие ошибки. Проектируя "ленту" таким образом, вам проще будет избегать ошибок во время компиляции. 
• Не забывайте при просмотре результатов изменять размеры окна предварительного просмотра, чтобы убедиться, что правила масштабирования работают как нужно.

Теперь мы готовы добавить "ленту" в наш Delphi-проект и приступить к программированию!

Далее: Интеграция с Delphi