Поделиться через

Пошаговое руководство. Обновление приложения MFC Scribble (часть 1)

  • Статья

В этом пошаговом руководстве показано, как изменить существующее приложение MFC для использования пользовательского интерфейса ленты. Visual Studio поддерживает ленту Office 2007 и живописную ленту Windows 7. Дополнительные сведения об пользовательском интерфейсе ленты см. в разделе "Лента".

Это пошаговое руководство изменяет классический пример Scribble 1.0 MFC, который позволяет использовать мышь для создания рисунков линий. В этой части пошагового руководства показано, как изменить пример Scribble, чтобы отобразить панель ленты. Часть 2 добавляет дополнительные кнопки на панель ленты.

Необходимые компоненты

Пример Scribble 1.0 MFC. Сведения о преобразовании в Visual Studio 2017 или более поздней версии см. в руководстве по переносу: Scribble MFC.

Разделы

В этой части пошагового руководства приведены следующие разделы:

Замена базовых классов

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

Замена базовых классов в приложении Scribble

  1. В scribble.cpp убедитесь, что CScribbleApp::InitInstance включен вызов AfxOleInit.

  2. Добавьте следующий код в файл pch.h (stdafx.h в Visual Studio 2017 и более ранних версиях):

    #include <afxcontrolbars.h>

  3. В scribble.h измените определение класса CScribbleApp таким образом, чтобы он был производным от класса CWinAppEx.

    class CScribbleApp: public CWinAppEx

  4. Scribble 1.0 был написан, когда приложения Windows использовали файл инициализации (INI) для сохранения данных предпочтения пользователя. Вместо файла инициализации измените Scribble, чтобы сохранить настройки пользователей в реестре. Чтобы задать раздел реестра и базу, введите следующий код после CScribbleApp::InitInstance инструкции LoadStdProfileSettings() .

    SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));

  5. Основной кадр для нескольких приложений интерфейса документов (MDI) больше не является производным от CMDIFrameWnd класса. Вместо этого он является производным от класса CMDIFrameWndEx .

    В файлах mainfrm.h и mainfrm.cpp замените все ссылки CMDIFrameWnd на CMDIFrameWndEx.

  6. В файлах childfrm.h и childfrm.cpp замените CMDIChildWnd CMDIChildWndExна .

    В дочернем фреме. H-файл, замените CSplitterWnd CSplitterWndExна .

  7. Измените панели инструментов и панели состояния, чтобы использовать новые классы MFC.

    В файле mainfrm.h:

    1. Замените CToolBar на CMFCToolBar.

    2. Замените CStatusBar на CMFCStatusBar.

  8. В файле mainfrm.cpp:

    1. Замените m_wndToolBar.SetBarStyle на m_wndToolBar.SetPaneStyle.

    2. Замените m_wndToolBar.GetBarStyle на m_wndToolBar.GetPaneStyle.

    3. Замените DockControlBar(&m_wndToolBar) на DockPane(&m_wndToolBar).

  9. В файле ipframe.cpp закомментируйте следующие три строки кода.

    m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

  10. Сохраните изменения, а затем создайте и запустите приложение.

Добавление растровых карт в проект

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

  • Используйте редакторы ресурсов для создания собственных растровых карт. Или используйте редакторы ресурсов для сборки растровых изображений из переносимых изображений граф сети (PNG), включенных в Visual Studio, и их можно скачать из библиотеки образов Visual Studio.

    Однако пользовательский интерфейс ленты требует, чтобы некоторые растровые изображения поддерживали прозрачные изображения. Прозрачные растровые изображения используют 32-разрядные пиксели, где 24 бита указывают красные, зеленые и синие компоненты цвета, а 8 бит определяют альфа-канал , указывающий прозрачность цвета. Текущие редакторы ресурсов могут просматривать, но не изменять растровые изображения с 32-разрядными пикселями. Следовательно, используйте внешний редактор изображений вместо редакторов ресурсов для управления прозрачными растровыми изображениями.

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

В этом пошаговом руководстве файлы ресурсов копируются из примера, созданного в пошаговом руководстве. Создание приложения ленты с помощью MFC.

Добавление растровых изображений в проект

  1. Используйте проводник для копирования следующих BMP-файлов из каталога ресурсов (res) примера ленты в каталог ресурсов (res) проекта Scribble:

    1. Скопируйте main.bmp в проект Scribble.

    2. Скопируйте filesmall.bmp и filelarge.bmp в проект Scribble.

    3. Создание новых копий файлов filelarge.bmp и filesmall.bmp, но сохранение копий в примере ленты. Переименуйте копии homemall.bmp и homelarge.bmp, а затем переместите копии в проект Scribble.

    4. Создайте копию файла toolbar.bmp, но сохраните копию в примере ленты. Переименуйте файл copy panelicons.bmp и переместите копию в проект Scribble.

  2. Импортируйте растровое изображение для приложения MFC. В представлении ресурсов дважды щелкните узел scribble.rc , дважды щелкните узел bitmap и нажмите кнопку "Добавить ресурс". В появившемся диалоговом окне нажмите кнопку "Импорт". Перейдите к каталогу res , выберите файл main.bmp и нажмите кнопку "Открыть".

    Растровое изображение main.bmp содержит изображение 26x26. Измените идентификатор растрового изображения IDB_RIBBON_MAINна .

  3. Импортируйте растровые изображения для меню файла, подключенного к кнопке "Приложение ".

    1. Импортируйте файл filesmall.bmp, содержащий одиннадцать образов 16x16 (16x176). Измените идентификатор растрового изображения IDB_RIBBON_FILESMALLна .

    Примечание.

    Так как нам нужны только первые восемь 16x16 изображений (16x128), то при необходимости можно обрезать правую ширину этого растрового изображения от 176 до 128.

    1. Импортируйте файлlarge.bmp, содержащий девять изображений 32x32 (32x288). Измените идентификатор растрового изображения IDB_RIBBON_FILELARGEна .

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

    1. Импортируйте растровое изображение homesmall.bmp, содержащее одиннадцать 16x16 изображений для небольших растровых изображений кнопок. Измените идентификатор растрового изображения IDB_RIBBON_HOMESMALLна .

    2. Импортируйте растровое изображение homelarge.bmp, содержащее девять 32x32 изображений для больших растровых карт кнопок. Измените идентификатор растрового изображения IDB_RIBBON_HOMELARGEна .

  5. Импортируйте растровые изображения для измененных панелей ленты. Эти растровые изображения или значки панели используются после операции изменения размера, если лента слишком мала, чтобы отобразить всю панель.

    1. Импортируйте растровое изображение panelicons.bmp, содержащее восемь 16x16 изображений. В окне "Свойства" редактора растровых карт настройте ширину растрового изображения на 64 (16x64). Измените идентификатор растрового изображения IDB_PANEL_ICONSна .

    Примечание.

    Так как нам нужны только первые четыре изображения 16x16 (16x64), то при необходимости можно обрезать правую ширину этого растрового изображения от 128 до 64.

Добавление ресурса ленты в проект

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

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

Добавление ресурса ленты в проект

  1. С помощью проекта Scribble, выбранного в Обозреватель решений, в меню "Проект" нажмите кнопку "Добавить ресурс".

  2. В диалоговом окне "Добавить ресурс" выберите "Лента" и нажмите кнопку "Создать".

    Visual Studio создает ресурс ленты и открывает его в представлении конструктора. Идентификатор IDR_RIBBON1ресурса ленты, который отображается в представлении ресурсов. Лента содержит одну категорию и одну панель.

  3. Вы можете настроить кнопку "Приложение", изменив его свойства. Идентификаторы сообщений, используемые в этом коде, уже определены в меню Scribble 1.0.

  4. В представлении конструктора нажмите кнопку "Приложение" , чтобы отобразить его свойства. Измените значения свойств следующим образом: image IDB_RIBBON_MAINto , Prompt to , Key tofFile, Large Images to IDB_RIBBON_FILELARGE, and Small Images to IDB_RIBBON_FILESMALL.

  5. Следующие изменения создают меню, которое отображается, когда пользователь нажимает кнопку "Приложение ". Щелкните многоточие (...) рядом с основными элементами , чтобы открыть редактор элементов.

    1. При выборе кнопки "Тип элемента" нажмите кнопку "Добавить", чтобы добавить кнопку. Измените &New заголовок на , id ID_FILE_NEW to , image to 0, Image Large to .0

    2. Нажмите кнопку "Добавить ", чтобы добавить кнопку. Измените заголовок &Save на , id ID_FILE_SAVE to , image to 2, and Image Large 2 to .

    3. Нажмите кнопку "Добавить ", чтобы добавить кнопку. Измените заголовок Save &As на , id ID_FILE_SAVE_AS to , image to 3, and Image Large 3 to .

    4. Нажмите кнопку "Добавить ", чтобы добавить кнопку. Измените заголовок &Print на , id ID_FILE_PRINT to , image to 4, and Image Large 4 to .

    5. Измените тип элемента на разделитель и нажмите кнопку "Добавить".

    6. Измените тип элемента на Button. Нажмите кнопку "Добавить", чтобы добавить пятую кнопку. Измените заголовок &Close на , id ID_FILE_CLOSE to , image to 5, and Image Large 5 to .

  6. Следующие изменения создают подменю подменю подменю на кнопке "Печать ", созданной на предыдущем шаге.

    1. Нажмите кнопку "Печать", измените тип элемента на "Метка" и нажмите кнопку "Вставить". Измените Preview and print the documentподпись на .

    2. Нажмите кнопку "Печать", измените тип элемента на "Кнопка" и нажмите кнопку "Вставить". Измените заголовок &Print на , id ID_FILE_PRINT to , image to 4, and Image Large 4 to .

    3. Нажмите кнопку "Печать" и нажмите кнопку "Вставить", чтобы добавить кнопку. Измените заголовок &Quick Print на , id ID_FILE_PRINT_DIRECT to , image to 7, and Image Large 7 to .

    4. Нажмите кнопку "Печать" и нажмите кнопку "Вставить", чтобы добавить другую кнопку. Измените заголовок Print Pre&view на , id ID_FILE_PRINT_PREVIEW to , image to 6, and Image Large 6 to .

    5. Теперь вы изменили основные элементы. Нажмите кнопку "Закрыть", чтобы выйти из редактора элементов.

  7. В следующем изменении создается кнопка выхода, которая отображается в нижней части меню кнопки "Приложение ".

    1. Перейдите на вкладку "Представление ресурсов" в Обозреватель решений.

    2. В окне "Свойства" щелкните многоточие (...) рядом с кнопкой, чтобы открыть редактор элементов.

    3. При выборе кнопки "Тип элемента" нажмите кнопку "Добавить", чтобы добавить кнопку. Измените заголовок E&xit на , id to ID_APP_EXIT, image to 8.

    4. Вы изменили кнопки. Нажмите кнопку "Закрыть", чтобы выйти из редактора элементов.

Создание экземпляра панели ленты

Ниже показано, как создать экземпляр панели ленты при запуске приложения. Чтобы добавить панель ленты в приложение, объявите панель ленты в файле mainfrm.h. Затем в файле mainfrm.cpp напишите код для загрузки ресурса ленты.

Создание экземпляра панели ленты

  1. В файле mainfrm.h добавьте элемент данных в защищенный раздел CMainFrame, определение класса для основного кадра. Этот элемент предназначен для панели ленты.

    // Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;

  2. В файле mainfrm.cpp добавьте следующий код перед окончательным return оператором в конце CMainFrame::OnCreate функции. Он создает экземпляр панели ленты.

    // Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);

Настройка ресурса ленты

Теперь, когда вы создали кнопку "Приложение" , вы можете добавить элементы на ленту.

Примечание.

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

Добавление домашней категории и панели "Изменить"

  1. Для программы Scribble требуется только одна категория. В представлении конструктора дважды щелкните категорию, чтобы добавить ее и отобразить ее свойства. Измените значения свойств следующим образом: заголовок &Homeна , крупные изображения на IDB_RIBBON_HOMELARGE, на небольшие изображенияIDB_RIBBON_HOMESMALL.

  2. Каждая категория ленты организована на именованные панели. Каждая панель содержит набор элементов управления, которые выполняют связанные операции. Эта категория имеет одну панель. Щелкните панель и измените заголовок на Edit.

  3. На панели "Изменить" добавьте кнопку, отвечающую за очистку содержимого документа. Идентификатор сообщения для этой кнопки уже определен в ресурсе IDR_SCRIBBTYPE меню. Укажите Clear All текст кнопки и индекс растрового рисунка, который украшает кнопку. Откройте панель элементов и перетащите кнопку на панель "Изменить". Нажмите кнопку, а затем измените заголовок на , id ID_EDIT_CLEAR_ALLto , Image Index to 0, Large Image Index to 0. Clear All

  4. Сохраните изменения, а затем создайте и запустите приложение. Приложение Scribble должно отображаться, и оно должно иметь панель ленты в верхней части окна вместо строки меню. Панель ленты должна иметь одну категорию, дома и дома должна иметь одну панель, изменить. Добавленные кнопки ленты должны быть связаны с существующими обработчиками событий, а кнопки "Открыть", "Закрыть", "Сохранить", "Печать" и "Очистить все" должны работать должным образом.

Настройка внешнего вида приложения

Визуальный менеджер — это глобальный объект, который управляет всеми рисунками для приложения. Так как исходное приложение Scribble использует стиль пользовательского интерфейса Office 2000, приложение может выглядеть старомодным. Вы можете сбросить приложение для использования визуального диспетчера Office 2007, чтобы оно напоминало приложение Office 2007.

Настройка внешнего вида приложения

  1. CMainFrame::OnCreate В функции введите следующий код перед return 0; инструкцией, чтобы изменить визуальный диспетчер по умолчанию и стиль.

    // Set the default manager to Office 2007
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

  2. Сохраните изменения, а затем создайте и запустите приложение. Пользовательский интерфейс приложения должен напоминать пользовательский интерфейс Office 2007.

Дальнейшие действия

Вы изменили классический пример Scribble 1.0 MFC, чтобы использовать конструктор ленты. Теперь перейдите к части 2.

См. также

Пошаговые руководства
Пошаговое руководство. Обновление приложения MFC Scribble (часть 2)