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

Статья
10/12/2023

Часть 1 этого пошагового руководства показала, как добавить ленту Office Fluent в классическое приложение Scribble. В этой части показано, как добавлять панели ленты и элементы управления, которые пользователи могут использовать вместо меню и команд.

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

Примеры кода на Visual C++

Разделы

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

Добавление новых панелей на ленту
Добавление панели справки на ленту
Добавление панели пера на ленту
Добавление кнопки цвета на ленту
Добавление элемента цвета в класс документа
Инициализация перьев и сохранение параметров

Добавление новых панелей на ленту

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

Добавление панели представления и панели окна на панель ленты

Создайте панель с именем View, которая содержит два поля проверка, которые переключают строку состояния и панель инструментов.
1. Из панели элементов перетащите панель в категорию "Главная". Затем перетащите два флажка на панель.
2. Щелкните панель, чтобы изменить его свойства. Измените Viewподпись на .
3. Щелкните первое поле проверка, чтобы изменить его свойства. Измените идентификатор на и заголовок Toolbar на .ID_VIEW_TOOLBAR
4. Щелкните второе поле проверка, чтобы изменить его свойства. Измените идентификатор на и заголовок Status Bar на .ID_VIEW_STATUS_BAR
Создайте панель с именем Window , которая имеет кнопку разделения. Когда пользователь нажимает кнопку разделения, контекстное меню отображает три команды, которые уже определены в приложении Scribble.
1. Из панели элементов перетащите панель в категорию "Главная". Затем перетащите кнопку на панель.
2. Щелкните панель, чтобы изменить его свойства. Измените Windowподпись на .
3. Нажмите кнопку . Измените Windowsзаголовок на , ключи на w, крупный индекс изображения на 1и режим разделения Falseна . Затем щелкните многоточие (...) рядом с элементами меню, чтобы открыть диалоговое окно "Редактор элементов".
4. Нажмите кнопку "Добавить три раза", чтобы добавить три кнопки.
5. Нажмите первую кнопку, а затем измените заголовок на , а затем на идентификаторID_WINDOW_NEW. New Window
6. Нажмите вторую кнопку, а затем измените заголовок на , а затем на идентификаторID_WINDOW_CASCADE. Cascade
7. Нажмите третью кнопку, а затем измените заголовок на , а затем на идентификаторID_WINDOW_TILE_HORZ. Tile
Сохраните изменения, а затем создайте и запустите приложение. Должны отображаться панели представления и окна . Нажмите кнопки, чтобы убедиться, что они работают правильно.

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

Теперь вы можете назначить два пункта меню, которые определены в приложении Scribble на кнопки ленты, которые называются разделами справки и О Scribble. Кнопки добавляются на новую панель с именем справки.

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

Из панели элементов перетащите панель в категорию "Главная". Затем перетащите две кнопки на панель.
Щелкните панель, чтобы изменить его свойства. Измените Helpподпись на .
Нажмите первую кнопку. Измените заголовок на Help Topics, а идентификатор ID_HELP_FINDER — на .
Нажмите вторую кнопку. Измените заголовок на About Scribble..., а идентификатор ID_APP_ABOUT — на .
Сохраните изменения, а затем создайте и запустите приложение. Должна отображаться панель справки, содержащая две кнопки ленты.

Важно!

При нажатии кнопки "Разделы справки" приложение Scribble открывает сжатый ФАЙЛ справки HTML (CHM) с именем your_project_name.chm. Следовательно, если проект не называется Scribble, необходимо переименовать файл справки в имя проекта.

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

Теперь добавьте панель для отображения кнопок, которые управляют толщиной и цветом пера. Эта панель содержит проверка коробку, которая переключается между толстыми и тонкими перами. Ее функциональность напоминает элемент меню "Толстая линия " в приложении Scribble.

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

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

Из панели элементов перетащите панель в категорию "Главная". Затем перетащите флажок и два поля со списком на панель.
Щелкните панель, чтобы изменить его свойства. Измените Penподпись на .
Установите флажок. Измените заголовок на Use Thick, а идентификатор ID_PEN_THICK_OR_THIN — на .
Щелкните первое поле со списком. Измените Thin Pen заголовок на , id ID_PEN_THIN_WIDTH to , Type to Drop List, Data to 1;2;3;4;5;6;7;8;9;, and Text 2 to .
Щелкните второе поле со списком. Измените Thick Pen заголовок на , id ID_PEN_THICK_WIDTH to , Type to Drop List, Data to 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;, and Text 5 to .
Новые поля со списком не соответствуют существующим элементам меню, поэтому необходимо создать элемент меню для каждого параметра пера.
1. В окне представления ресурсов откройте ресурс меню IDR_SCRIBBTYPE.
2. Щелкните перо , чтобы открыть меню пера. Затем нажмите кнопку "Тип здесь " и введите Thi&n Pen.
3. Щелкните правой кнопкой мыши текст, введенный для открытия окна свойств , а затем измените свойство ID_PEN_THIN_WIDTHидентификатора на .
4. Создайте обработчик событий для каждого элемента меню пера. Щелкните правой кнопкой мыши созданный пункт меню "Ть&n" , а затем нажмите кнопку "Добавить обработчик событий". Отображается мастер обработчика событий.
5. В списке классов в мастере выберите CScribbleDoc и нажмите кнопку "Добавить и изменить". Команда создает обработчик событий с именем CScribbleDoc::OnPenThinWidth.
6. Добавьте в раздел CScribbleDoc::OnPenThinWidth следующий код.
```
// Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

// Get a pointer to the Thin Width combo box
CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THIN_WIDTH));

//Get the selected value
int nCurSel = pThinComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThinWidth = atoi(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();
```
Затем создайте элемент меню и обработчики событий для толстых перьев.
1. В окне представления ресурсов откройте ресурс меню IDR_SCRIBBTYPE.
2. Щелкните перо , чтобы открыть меню пера. Затем нажмите кнопку "Тип здесь " и введите Thic&k Pen.
3. Щелкните правой кнопкой мыши текст, введенный для отображения окна "Свойства ". Измените свойство ID_PEN_THICK_WIDTHидентификатора на .
4. Щелкните правой кнопкой мыши созданный элемент меню "Толстая ручка" , а затем нажмите кнопку "Добавить обработчик событий". Отображается мастер обработчика событий.
5. В списке классов мастера выберите CScribbleDoc и нажмите кнопку "Добавить и изменить". Команда создает обработчик событий с именем CScribbleDoc::OnPenThickWidth.
6. Добавьте в раздел CScribbleDoc::OnPenThickWidth следующий код.
```
// Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx *) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THICK_WIDTH));
// Get the selected value
int nCurSel = pThickComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThickWidth = atoi(CStringA(pThickComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();
```
Сохраните изменения, а затем создайте и запустите приложение. Должны отображаться новые кнопки и поля со списком. Попробуйте использовать разные ширины пера для скрибки.

Добавление кнопки цвета на панель пера

Затем добавьте объект CMFCRibbonColorButton , который позволяет пользователю скрестить цветом.

Добавление кнопки цвета на панель пера

Перед добавлением кнопки цвета создайте для него элемент меню. В окне представления ресурсов откройте ресурс меню IDR_SCRIBBTYPE. Щелкните пункт меню "Перо", чтобы открыть меню пера. Затем нажмите кнопку "Тип здесь " и введите &Color. Щелкните правой кнопкой мыши текст, введенный для отображения окна "Свойства ". Измените идентификатор на ID_PEN_COLOR.
Теперь добавьте кнопку цвета. На панели элементов перетащите кнопку "Цвет" на панель пера.
Нажмите кнопку цвета. Измените заголовок Color на , id ID_PEN_COLOR to , Simple Look to True, Large Image Index to 1, and Split Mode to False.
Сохраните изменения, а затем создайте и запустите приложение. На панели "Перо" должна отображаться новая кнопка цвета. Однако его нельзя использовать, так как он еще не имеет обработчика событий. В следующих шагах показано, как добавить обработчик событий для кнопки цвета.

Добавление элемента цвета в класс документа

Так как исходное приложение Scribble не имеет цветовых перьев, необходимо написать для них реализацию. Чтобы сохранить цвет пера документа, добавьте новый член в класс CscribbleDocдокумента.

Добавление элемента цвета в класс документа

В файле scribdoc.h в CScribbleDoc классе найдите // Attributes раздел. Добавьте следующие строки кода после определения m_nThickWidth элемента данных.
```
// Current pen color
COLORREF m_penColor;
```
Каждый документ содержит список стоков, которые пользователь уже нарисовал. Каждый штрих определяется CStroke объектом. Класс CStroke не содержит сведения о цвете пера, поэтому необходимо изменить класс. В scribdoc.h в CStroke классе добавьте следующие строки кода после определения m_nPenWidth элемента данных.
```
// Pen color for the stroke
COLORREF m_penColor;
```
В scribdoc.h добавьте новый CStroke конструктор, параметры которого указывают ширину и цвет. Добавьте следующую строку кода после инструкции CStroke(UINT nPenWidth); .
```
CStroke(UINT nPenWidth, COLORREF penColor);
```
В scribdoc.cpp добавьте реализацию нового CStroke конструктора. Добавьте следующий код после реализации конструктора CStroke::CStroke(UINT nPenWidth) .
```
// Constructor that uses the document's current width and color
CStroke::CStroke(UINT nPenWidth, COLORREF penColor)
{
    m_nPenWidth = nPenWidth;
    m_penColor = penColor;
    m_rectBounding.SetRectEmpty();
}
```
Измените вторую строку CStroke::DrawStroke метода следующим образом.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Задайте цвет пера по умолчанию для класса документа. В scribdoc.cpp добавьте следующие строки CScribbleDoc::InitDocumentпосле инструкции m_nThickWidth = 5; .
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
В scribdoc.cpp измените первую строку CScribbleDoc::NewStroke метода на следующую.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Измените последнюю строку CScribbleDoc::ReplacePen метода на следующую.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Вы добавили m_penColor элемент на предыдущем шаге. Теперь создайте обработчик событий для кнопки цвета, которая задает элемент.
1. В окне представления ресурсов откройте ресурс меню IDR_SCRIBBTYPE.
2. Щелкните правой кнопкой мыши пункт меню "Цвет" и щелкните " Добавить обработчик событий". Откроется мастер обработчика событий.
3. В списке классов в мастере выберите CScribbleDoc и нажмите кнопку "Добавить и изменить". Команда создает CScribbleDoc::OnPenColor заглушку обработчика событий.

Замените заглушку для обработчика CScribbleDoc::OnPenColor событий следующим кодом.

void CScribbleDoc::OnPenColor()
{
    // Change pen color to reflect color button's current selection
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
        CMFCRibbonColorButton, pRibbon->FindByID(ID_PEN_COLOR));

    m_penColor = pColorBtn->GetColor();
    // Create new pen using the selected color
    ReplacePen();
}

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

Инициализация перьев и сохранение параметров

Затем инициализируйте цвет и ширину перьев. Наконец, сохраните и загрузите цветной рисунок из файла.

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

Инициализация перьев на панели ленты.

Добавьте следующий код в scribdoc.cpp в CScribbleDoc::InitDocument методе после инструкции m_sizeDoc = CSize(200,200) .

// Reset the ribbon UI to its initial values
CMFCRibbonBar* pRibbon =
    ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton,
    pRibbon->FindByID(ID_PEN_COLOR));

// Set ColorButton to black
pColorBtn->SetColor(RGB(0, 0, 0));

CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THIN_WIDTH));

// Set Thin pen combobox to 2
pThinComboBox->SelectItem(1);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THICK_WIDTH));

// Set Thick pen combobox to 5
pThickComboBox->SelectItem(0);

Сохраните цветной рисунок в файле. Добавьте следующую инструкцию в scribdoc.cpp в CStroke::Serialize методе после инструкции ar << (WORD)m_nPenWidth; .
```
ar << (COLORREF)m_penColor;
```
Наконец, загрузите цветной рисунок из файла. Добавьте следующую строку кода в CStroke::Serialize метод после инструкции m_nPenWidth = w; .
```
ar >> m_penColor;
```
Теперь раскройте цвет и сохраните рисунок в файле.

Заключение

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

См. также

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

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

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

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

Разделы

Добавление новых панелей на ленту

Добавление панели представления и панели окна на панель ленты

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

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

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

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

Добавление кнопки цвета на панель пера

Добавление кнопки цвета на панель пера

Добавление элемента цвета в класс документа

Добавление элемента цвета в класс документа

Инициализация перьев и сохранение параметров

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

Заключение

См. также

Обратная связь

Дополнительные ресурсы