Урок 5. Работа со встроенными изображениями

Давайте создадим новый проект. Откроем в Ribbon XML Editor новый документ и вставим вкладку и группу, как мы уже делали на предыдущем уроке. Затем вставим в группу кнопку (button):

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
    <ribbon startFromScratch="false">
        <tabs>
            <tab id="Вкладка1" label="Моя вкладка" insertBeforeMso="TabHome">
                <group id="Группа1" label="Моя группа">
                    <button idMso="DeleteWord"/>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

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

Microsoft Office уже содержит в себе несколько тысяч изображений. Надо только узнать идентификатор наиболее подходящего, и вставить его в атрибут imageMso. Довольно нетривиальная задача, не правда ли? К счастью, Ribbon XML Editor имеет в своём распоряжении галерею всех встроенных в офис иконок, которая позволяет осуществить выбор и вставку понравившегося изображения.

Ставим курсор после последнего атрибута кнопки перед закрывающими тег символами, и нажимаем кнопку галереи:

Откроется галерея иконок, содержащая несколько вкладок. На каждой вкладке по 500 изображений. При наведении мыши на каждое изображение появляется всплывающая подсказка с его идентификатором:

Выберем понравившееся изображение, и нажмём на него. Окно закроется, а в позицию курсора вставится атрибут imageMso со значением идентификатора выбранного изображения. Проверим результат, нажав F9 для запуска документа. Я использовал идентификатор WatermarkRemove. Кнопка стала выглядеть намного лучше.

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

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

Теперь давайте изменим размер кнопки. Для этого пропишем атрибут size:

<button idMso="DeleteWord" imageMso="WatermarkRemove" size="large">

Атрибут size может принимать только два значения, которые нам и предлагает автодополнение: normal и large. По умолчанию кнопка DeleteWord имеет размер normal. После изменения на large и запуска документа на выполнение мы увидим, что увеличилась не только сама кнопка, но и изображение на ней. Теперь вместо иконки 16х16 автоматически используется иконка 32x32. При этом интерполяции не происходит — как правило, офис содержит в себе оба размера иконок.

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