Explorer ui ribbon что это

Обновлено: 03.07.2024

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

В конце предыдущей статьи я указал список необходимого ПО, которое понадобится при разработке приложений WinForms с поддержкой Windows Ribbon. Здесь и далее я буду считать, что всё это ПО у нас уже имеется и готово к использованию.

История
Перед тем, как мы начнём программировать, давайте немного поговорим непосредственно о предмете.

Определение

В Office 2007 компания Майкрософт представила новый способ организации пользовательского интерфейса в приложении. Проблемой старого UI было то, что он был недостаточно гибким для представления всех возможностей Office. (На самом деле, люди просили добавить функции, которые уже имелись, но были "упрятаны" далеко в меню. )

Лента Microsoft Word 2007

Когда оказалось, что лента Office 2007 стала успешной, многие компании, занимающиеся разработкой UI, реализовали свои варианты лент для использования в приложениях. Ну а когда в Майкрософт осознали, что у них получилось нечто хорошее, они решили вывести ленту "в широкие массы".

Они выпустили 3 (!) версии ленты:

Ну, а что насчёт разработчиков управляемых WinForms-приложений? Они должны использовать третью, основанную на COM, версию. Поэтому цель этих статей — предоставить вам работающие примеры использования Windows Ribbon в приложениях WinForms.

Зачем использовать Windows Ribbon?
Заметьте: вопрос, на который я собираюсь ответить, звучит как "Зачем использовать ЭТОТ элемент управления Ribbon?", а не "Зачем ВООБЩЕ использовать элемент управления Ribbon?" Почему бы не использовать другие ленты? Существуют дюжины сторонних контролов; некоторые из них бесплатны.

Основная причина использования Windows Ribbon Framework - он разработан Майкрософт. Это означает:

Поскольку он оригинальный, он обладает ВСЕМИ возможностями ленты, в отличие от других бесплатных или коммерческих Ribbon-контролов, в которых всегда найдутся "не реализованные" моменты.
Он обладает ПОЛНОЙ поддержкой и интеграцией с интерфейсом Windows 7 и специальными возможностями. Просто представьте поддержку сенсорных экранов или совместимость с более высокими разрешениями (DPI) экрана.

К ленте относятся следующие файлы: UIRibbon.idl, UIRibbonKeydef.h и UIRibbonPropertyHelpers.h. Заметьте, что файл UIRibbon.h не интересен, поскольку он автоматически генерируется из UIRibbon.idl компилятором MIDL (англ. Microsoft Interface Definition Language — "язык описания интерфейсов Майкрософт" — прим. переводчика). Все эти файлы устанавливаются вместе с Windows 7 SDK.

Согласно условностям Windows API Code Pack, файл UIRibbon.idl был конвертирован в 4 различных файла:

Эти файлы — преобразованные мной [Ариком] COM-интерфейсы и типы, используемые Windows Ribbon Framework. Эти файлы могут изменяться в процессе развития проекта, поскольку я наверняка допустил какие-то ошибки в преобразованиях и узнаю об этом, когда попытаюсь использовать какую-либо функцию.

(на момент написания этих статей библиотека Windows Ribbon for WinForms уже довольно длительное время находится в стадии релиза, поэтому если Ариком и будут исправляться какие-либо ошибки, то лишь незначительные. — прим. переводчика).

Как работает Windows Ribbon Framework?
Более подробно об этом написано на MSDN , я рекомендую это прочитать. Здесь я дам лишь краткое описание, чтобы мы просто друг друга понимали.

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

1. Спроектировать оформление ленты, используя разметку вида XAML.
2. Скомпилировать эту XAML-разметку с помощью Microsoft Ribbon Markup Compiler (компилятора разметки ленты), входящего в состав Windows 7 SDK.
3. Сделать бинарный вывод компилятора разметки (неуправляемым) ресурсом вашего приложения.
4. Во время загрузки приложения выполнить CoCreateInstance для класса UIRibbonFramework, который реализует интерфейс IUIFramework .
5. Вызвать framework.Initialize и передать ему ссылку на реализацию интерфейса IUIApplication вместе с HWND (англ. window handle — "описатель окна" — прим. переводчика) окна вашего приложения. Интерфейс IUIApplication отправляет обратный вызов фреймворку ленты, когда ему нужен описатель команды для её обработки (команды представлены кнопками, комбо-боксами и другими стандартными элементами управления).
6. Вызвать framework.LoadUI , который загружает предварительно скомпилированный ресурс и показывает ленту.

На данный момент IRibbonForm описан примерно так:

/ </summary>
/// <param name="newHeight">новая высота</param>
void RibbonHeightUpdated(int newHeight);
>[/code]
Свойство WindowHandle используется для передачи описателя родительского окна фреймворку ленты.

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

Класс Ribbon на данный момент имеет 2 метода:

InitFramework — получает вашу реализацию интерфейса IRibbonForm и имя ресурса, который будет использован для загрузки конфигурации ленты.
DestroyFramework — код очистки, освобождает ресурсы Windows Ribbon Framework.

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

Первое WinForms-приложение с лентой
Итак, давайте посмотрим, как использовать класс Ribbon для добавления поддержки в пустое WinForms-приложение. Результатом будет приложение-образец "01-AddingRibbonSupport".

Также добавьте к главной форме (form1.cs) следующие строки:

[code]using RibbonLib;
using RibbonLib.Interop;

Шаг 3 — Указать компилятору UI скомпилировать разметку в процессе построения
Войдите в: Свойства проекта -> События построения -> Командная строка события перед построением. Добавьте следующие 3 строки:

Пояснение: первая строка компилирует файл разметки ленты в сжатый бинарный формат, сопровождаемый маленьким RC-файлом, описывающим его.
Вторая строка создаёт нативный файл ресурса win32, который будет присоединён к нативным ресурсам проекта. Третья строка создаёт DLL-библиотеку с ресурсами из нативного файла ресурса win32.

Теперь скомпилируйте проект, чтобы ввести события перед построением.

Шаг 4 — Реализовать IRibbonForm
Чтобы ваша главная форма реализовывала интерфейс IRibbonForm, описанный в Ribbon.dll, выполните следующие инструкции:

• Фреймворку ленты необходим описатель окна главной формы для инициализации, отсюда:

Замечание: Если вы запускаете своё приложение и не видите ленту, попробуйте увеличить размер окна. Windows Ribbon обладает свойством не показываться, если размер окна слишком мал. К сожалению, стандартный размер окна в Visual Studio слишком мал.

Заключение
На этом пока всё. Теперь я хотел бы сделать несколько авторских замечаний.

3. В шаге, когда необходимо ссылаться на проект Ribbon.csproj, в оригинале было предложено ссылаться на саму библиотеку Ribbon.dll. Дело в том, что на данный момент Windows Ribbon for WinForms "поставляется" в виде не скомпилированного исходного кода, то есть библиотеку нужно также отдельно компилировать. Для упрощения можно просто добавить в решение проект библиотеки.

4. В третьем шаге у меня при компиляции возникли ошибки. Произошло это, возможно, потому, что в пути проекта были русские символы. Поэтому если у вас возникают ошибки при работе компиляторов UICC.exe или RC.exe, попробуйте убрать из пути проекта кириллицу.

Также в следующей статье будет некоторое замечание касаемо метода DestroyFramework. Сама же статья будет посвящена созданию меню приложения (Application Menu) с различными элементами управления.

После прочтения поста Announcing: Microsoft Ribbon for WPF, я подумал, почему бы мне не попробовать этот клёвый элемент управления на деле. Итак, в этой заметке я исследую элемент управления, который недавно представила Microsoft и создам приложение на его основе. Настало время сделать обзор этого элемента, чтобы вам было легче начать с ним работать.

Панель Ribbon была представлена в Office 2007 и затем стала очень популярной для создания интерфейсов приложений. Microsoft заменила старые приложения, базирующиеся на системе меню, более новыми, с интерфейсом Ribbon, что сделало их более гибкими и облегчило их изучение. Настало время для использования его другими разработчиками в своих приложениях.

В этой статье я собираюсь представить вам элемент управления Ribbon в WPF. Если вы плохо знаете WPF, советую прочитать WPF Article Series.

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

Для создания вашего первого Ribbon приложения вам необходимо:

Visual Studio 2010. Вы можете установить trial версию отсюда. Или Visual Studio 2010 Express отсюда.
После установки Visual Studio 2010, вам необходимо установить Microsoft Ribbon for WPF по этой ссылке. Его можно установить и под VS 2008. В этом случае, вам потребуется явно добавить ссылки на dll.
После установки запустите Visual Studio 2010 и выберите WPF Ribbon Application из Visual Studio Project Templates.
После выбора шаблона, будет создано ваше приложение. Оно автоматически создаст элемент Ribbon с несколькими простыми кнопками, как показано ниже: Ссылка на библиотеку RibbonControlsLibrary.dll уже добавлена и создано окно, унаследованное от RibbonWindow.

Давайте проведём обзор особенностей Ribbon UI для того, чтобы вы могли использовать их в своих приложениях.

Меню приложения.

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

Левая часть содержит элементы меню. Каждый из них может также содержать подменю. Правая часть содержит недавние элементы, представленные ApplicationMenu.RecentItems.

Панель быстрого доступа.

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

Расширенные подсказки.

WPF Ribbon применяет расширенные всплывающие подсказки для пояснения назначения ваших команд. Мы называем их супер подсказками.

KeyTips.

KeyTips – уникальная функция Ribbon, позволяющая вызывать элементы меню используя клавиатурные сокращения. Вы можете назначить KeyTip для каждой вкладки, кнопки и так далее, которые будут активироваться после нажатия клавиши Alt и указанной буквы или цифры.

Автоматическое изменение размеров элементов.

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

Группировка вкладок.

Ribbon может содержать несколько вкладок. Также, вы можете группировать команды внутри каждой вкладки в отдельные группы.

Контекстные вкладки.

Вы можете создавать контекстные вкладки – специальные вкладки, которые появляются динамически в зависимости от действий пользователя.

Галереи.

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

Теперь попробуем реализовать все эти функции.

RibbonWindow – это класс, унаследованный от Window в WPF. Класс RibbonWindow может отображать панель быстрого доступа и контекстные вкладки в заголовке. Если вы хотите использовать эти возможности, вам придётся использовать RibbonWindow вместо обычного Window. Для того, чтобы добавить новое RibbonWindow, просто воспользуйтесь шаблоном элемента:

После того, как вы выберите RibbonWindow, шаблон сгенерирует стандартное окно:

Мы собираемся использовать это окно для создания нашего элемента управления Ribbon.

Давайте создадим наше приложения со всеми рассмотренными элементами, добавляя их один за другим.

RibbonApplicationMenu.

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

RibbonApplicationMenu – это элемент управления, который создаёт меню приложения для RibbonWindow. Каждое окно может иметь только одно меню. Оно может содержать RibbonApplicationMenuItem, RibbonApplicationSplitMenuItem, RibbonSeparator и так далее. Вы можете вкладывать RibbonApplicationMenuItem друг в друга для получения подменю.

Давайте посмотрим, как можно сделать такое меню:

В коде выше, я объявил несколько RibbonApplicationMenuItem для элементов Desktop, MyPicture, My Video и прочих. Мы устанавливаем пусть к изображению, используя свойства ImageSource элемента меню.

RibbonApplicationMenuItem.

Для получения подменю, вы можете создать столько RibbonApplicationMenuItem внутри каждого элемента меню, сколько захотите. Как показано в коде выше, у меня есть вложенные Primary Floppy и Seconday Floppy элементы внутри элемента Floppy меню. KeyTip определяют горячие клавиши, к которым вы можете получить доступ после нажатия клавиши Alt на клавиатуре.

RibbonApplicationSplitMenuItem.

RibbonApplicationSplitMenuItem немного отличается от обычного RibbonApplicationMenuItem. Как вы можете видеть, второе подменю в приложении – это фактически элемент меню с кнопкой и выпадающим подменю.

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

RibbonSeparator.

RibbonSeparator позволяет вам вставлять разделитель между двумя наборами элементов. Вы можете использовать его как между MenuItems, так и между RibbonGroups.

RibbonApplicationMenu.AuxiliaryPaneContent.

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

RibbonApplicationMenu.FotterPaneContent.

Эта панель позволяет получать доступ к нижнему колонтитулу меню. Я добавил на неё немного RibbonButtons.

RibbonTab.

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

Данный код определяет несколько вкладок, названных View, Insert, Format и Selected. Вы должны заметить, что первая вкладка содержит группу элементов. Данная группа содержит кнопку Help.

ContextualTab.

Вы также должны заметить, что если вы определите RibbonContextualTabGroup, то это приведёт к появлению контекстной вкладки в заголовке окна. Контекстная вкладка обычно невидима, она появляется в ответ на действия пользователя.

RibbonGroup.

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

Здесь мы использовали LargeImageSource для первой кнопки и SmallImageSource для остальных. Вы можете видеть, что вместо контента кнопки, для показа текста используется свойство Label.

Super ToolTip.

В RibbonButton имеется три свойства для задания всплывающей подсказки. Каждая подсказка имеет титул, который вы можете задать, используя свойство ToolTipTitle. ToolTipDescription используется для описывающего текста и ToolTipImageSource – для картинки, располагающейся слева от описания.

При наведении курсора на Settings Folder, под вкладкой появляется подсказка.

RibbonSplitButton.

Точно так же, как у RibbonSplitMenuItem, у RibbonSplitButton есть кнопка и меню, связанное с ней. Каждая RibbonSplitButton – это нормальная RibbonButton и меню, сгруппированные вместе. Вы можете индивидуально получить доступ к кнопке, или вы можете использовать её, чтобы выбрать элемент из меню.

RibbonSplitButton имеет RibbonMenu в качестве контента. Элементы меню появляются при нажатии кнопки.

Другие элементы управления.

В Ribbon имеется множество других элементов пользовательского интерфейса. RibbonTextBox, RibbonToggleButton, RibbonCheckBox, к примеру. Вы можете их использовать так же, как и обычные элементы управления.

Свойство Label используется для установки текста, а SmallImageSource/LargeImageSource – ассоциированного изображения. RibbonTwoLineText используется для отображения текста.

RibbonGallery.

RibbonGallery может быть связана с ComboBox. Это специальный компонент, имеющий очень богатый визуальный интерфейс.

RibbonComboBox содержит RibbonGallery с тремя RibbonGalleryItems.

Это наиболее простой пример использования RibbonGalleryItems.

RibbonQuickAccessToolBar.

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

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

RibbonContextMenu.

Как и обычное контекстное меню, RibbonContextMenu может быть использовано для создания собственного контекстного меню.

Сворачивание RibbonBar.

У RibbonBar изначально есть некоторые свойства. Одно из них – сворачивание. Когда вы сворачиваете RibbonBar он становится похожим на меню, которое позволяет вам расширить рабочее пространство.

Для сворачивания панели необходимо щёлкнуть правой кнопкой мыши на любой вкладке и выбрать пункт Minimize. Такой же эффект произойдёт при двойном щелчке на заголовке вкладки.

Ribbon поддерживает ICommand интерфейс, поэтому вы можете использовать привязку команд.

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

Просто странно, ни DevExpress, ни TMS, ни другие Ribbon-ны для Delphi не накладывают такие ограничения (работают на любом Win, ну наверно начиная с 95)

Георгий, может потому что ни DevExpress, ни TMS не используют UIRibbon.dll?

Спасибо за находку!
А такую ленту как у офиса 2010 через этот фреймворк сделать можно? (имеется в виду прозрачные заголовки неактивных табов и т.п.)

Как быть, если Ribbon нужно построить в runtime? Например, в какой-нибудь модульной системе, где каждый модуль, это вкладка, а формы модуля, это команды на вкладке. Тогда стоит задача загрузить bpl из папки, построить нужное количество вкладок с нужными названиями. Создать нужные команды на каждой вкладке. Есть ли какое-то решение используя Framework?

В TMS тоже есть Ribbon. На вид как Office 2010, не такой прожорливый как DevExpress. На счет глючности сказать ничего не могу :)

:) Так не пойдет. Это мы прячем то, что есть. А нужно наоборот, добавлять, причем не известно еще что :)

Ну вот, можно сказать в первых строках на сайте автора библиотеки:
There is no way to create ribbon controls at run-time, which also means that there is no way to design a ribbon visually in Delphi.

У меня такая проблема: подключаю в delphi xe2 ribbons, на форме спокойно размещаются компоненты:Ribbon, ScreenTipsManager1, ScreenTipsPopup1. при вставке остального вылетает ошибка, которая показана на скрине. Подскажите пожалуйста в чём проблема? ОС Windows XP, но при использовании Delphi 2010 подобной ошибки не было.

Мистеру Ривьере удалось извлечь из недр системных библиотек одной из последних сборок Windows 8 ресурсы, которые отключены в данной сборке, однако представляют большой интерес для общественности. В частности, удалось извлечь изображение нового экрана приветствия Windows 8, выполненного в стиле интерфейса Metro UI. Кроме того, второй большой находкой стал кардинально переработанный интерфейс проводника Windows – теперь в нём появилось ленточное меню, как на всех современных приложениях софтверного гиганта.

Экран приветствия (Welcome screen) в Windows 8

Если поближе рассмотреть новый "welcome screen" Windows 8, то становится очевидным явное сходство с экраном блокировки смартфонов Windows Phone 7. Согласно имеющейся информации, каким-либо образом настраивать данный экран пользователь не сможет. Ему будет доступна лишь возможность смены фонового рисунка, и, возможно, кое-какие дополнительные действия касающиеся планшетных компьютеров. В заблокированном режиме на экране приветствия будут отображаться текущие время и дата. Возможно, со временем в Редмонде добавят на этот экран дополнительный функционал, и он станет больше походить на экран блокировки смартфонов Windows Phone 7.

Общий вид проводника Windows 8 (Windows Explorer) с интерфейсом Ribbon UI

Что же касается проводника Windows (Windows Explorer, если угодно), то ленточное меню Ribbon UI добралось и до него. Впервые это нововведение софтверный гигант представил в пакете Microsoft Office 2007. С тех пор Ribbon UI "поселился" во многих продуктах Microsoft, включая семейство продуктов Windows Live Essentials, WordPad, Paint, ну и Office 2010, конечно.

Различные варианты вкладок ленточного меню в Windows Explorer

Из утёкших изображений видно, что в Редмонде всё ещё раздумывают о полезности такого нововведения, и, очевидно, в дальнейшем этот интерфейс могут ожидать серьёзные изменения. Вероятней всего пользователь Windows 8 сможет скрыть ленточное меню Ribbon UI, если оно ему не понравится; также есть вероятность, что Ribbon UI в проводнике будет доступен лишь на некоторых типах компьютеров (да, речь снова о планшетах). Очевидно одно – новый Ribbon UI соберёт в себе все самые удачные наработки, которые существуют у Редмонда на данный момент. К примеру – меню Файл. Возможно, оно станет аналогичным тому, что мы сейчас можем увидеть в Office 2010: расширенный набор функций, но вид в стиле Metro UI.

Новое меню Файл в Windows Explorer

На скриншоте, на котором изображено меню Файл, можно заметить одно нововведение, сильно бросающееся в глаза – пункт меню Sync, который, по всей видимости, будет служить для синхронизации файлов между разными компьютерами пользователя (аналог существующего приложения Live Mesh). Также на одном из скриншотов можно заметить команду Share – вероятно она будет привязана к облачному сервису Live SkyDrive, который позволяет получать доступ к содержимому облачного хранилища из любой точки планеты.

Скрытый интерфейс Ribbon UI в проводнике Windows 8

Среди нововведений также заметна кнопка "вверх", которую убрали из Windows Explorer с появлением ОС Windows Vista.

Как видите, изменений довольно много даже не смотря на то, что процесс разработки новой ОС находится далеко от завершения. Ещё рано делать какие либо выводы, однако уже сейчас намечается тенденция к более тесной интеграции LIVE сервисов с новой Windows 8.

Вид вкладок Ribbon UI из библиотеки Изображения в Windows Explorer

Читайте также: