Exemplarische Vorgehensweise: Aktualisieren der MFC Scribble-Anwendung (Teil 1)

2025-06-21

In dieser exemplarischen Vorgehensweise wird das Ändern einer vorhandenen MFC-Anwendung zur Verwendung der Menüband-Benutzeroberfläche veranschaulicht. Visual Studio unterstützt sowohl das Office 2007-Menüband als auch das Windows 7 Scenic Ribbon. Weitere Informationen zur Benutzeroberfläche des Menübands finden Sie unter "Menübänder".

In dieser exemplarischen Vorgehensweise wird das klassische Scribble 1.0 MFC-Beispiel geändert, mit dem Sie mit der Maus Linienzeichnungen erstellen können. In diesem Teil der exemplarischen Vorgehensweise wird gezeigt, wie Sie das Scribble-Beispiel so ändern, dass sie eine Menübandleiste anzeigt. Teil 2 fügt der Menübandleiste weitere Schaltflächen hinzu.

Voraussetzungen

Das Scribble 1.0 MFC-Beispiel. Hilfe zum Konvertieren in Visual Studio 2017 oder höher finden Sie im Portierungshandbuch: MFC Scribble.

Abschnitte

Dieser Teil der exemplarischen Vorgehensweise enthält die folgenden Abschnitte:

Ersetzen der Basisklassen
Hinzufügen von Bitmaps zum Projekt
Hinzufügen einer Menübandressource zum Projekt
Erstellen einer Instanz der Menübandleiste
Hinzufügen einer Menübandkategorie
Festlegen des Aussehens der Anwendung

Ersetzen der Basisklassen

Um eine Anwendung, die ein Menü unterstützt, in eine Anwendung zu konvertieren, die ein Menüband unterstützt, müssen Sie die Anwendungs-, Rahmenfenster- und Symbolleistenklassen von aktualisierten Basisklassen ableiten. (Es wird empfohlen, das ursprüngliche Scribble-Beispiel nicht zu ändern. Bereinigen Sie stattdessen das Scribble-Projekt, kopieren Sie es in ein anderes Verzeichnis, und ändern Sie dann die Kopie.)

So ersetzen Sie die Basisklassen in der Scribble-Anwendung

Stellen Sie in scribble.cpp sicher, dass CScribbleApp::InitInstance ein Aufruf von AfxOleInit enthalten ist.
Fügen Sie der Datei "pch.h " (stdafx.h in Visual Studio 2017 und früheren Versionen) den folgenden Code hinzu:
```
#include <afxcontrolbars.h>
```
Ändern Sie in scribble.h die Definition für die CScribbleApp Klasse so, dass sie von der CWinAppEx-Klasse abgeleitet wird.
```
class CScribbleApp: public CWinAppEx
```
Scribble 1.0 wurde geschrieben, wenn Windows-Anwendungen eine Initialisierungsdatei (.ini) zum Speichern von Benutzereinstellungsdaten verwendet haben. Statt einer Initialisierungsdatei ändern Sie scribble, um Benutzereinstellungen in der Registrierung zu speichern. Geben Sie nach der LoadStdProfileSettings() Anweisung den folgenden Code einCScribbleApp::InitInstance, um den Registrierungsschlüssel und die Basis festzulegen.
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
Der Hauptframe für eine MDI-Anwendung (Multiple Document Interface) wird nicht mehr von der CMDIFrameWnd Klasse abgeleitet. Stattdessen wird sie von der CMDIFrameWndEx-Klasse abgeleitet.

Ersetzen Sie in den Dateien mainfrm.h und mainfrm.cpp alle Verweise CMDIFrameWnd durch CMDIFrameWndEx.
Ersetzen Sie in den Dateien childfrm.h und childfrm.cpp durch CMDIChildWndCMDIChildWndEx.

Im untergeordneten Element. h Datei, ersetzen CSplitterWnd durch CSplitterWndEx.
Ändern Sie Symbolleisten und Statusleisten, um die neuen MFC-Klassen zu verwenden.

In der Datei "mainfrm.h":
1. Ersetzen Sie CToolBar durch CMFCToolBar.
2. Ersetzen Sie CStatusBar durch CMFCStatusBar.
In der datei mainfrm.cpp:
1. Ersetzen Sie m_wndToolBar.SetBarStyle durch m_wndToolBar.SetPaneStyle.
2. Ersetzen Sie m_wndToolBar.GetBarStyle durch m_wndToolBar.GetPaneStyle.
3. Ersetzen Sie DockControlBar(&m_wndToolBar) durch DockPane(&m_wndToolBar).

Kommentieren Sie in der datei ipframe.cpp die folgenden drei Codezeilen aus.

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

Speichern Sie die Änderungen, und erstellen Sie die Anwendung, und führen Sie sie aus.

Hinzufügen von Bitmaps zum Projekt

Die nächsten vier Schritte dieser exemplarischen Vorgehensweise erfordern Bitmapressourcen. Sie können die entsprechenden Bitmaps auf verschiedene Arten abrufen:

Verwenden Sie die Ressourcen-Editoren , um Ihre eigenen Bitmaps zu erfinden. Oder verwenden Sie die Ressourcen-Editoren, um Bitmaps aus den portablen Netzwerkgrafiken (.png) zusammenzustellen, die in Visual Studio enthalten sind und aus der Visual Studio-Bildbibliothek heruntergeladen werden können.

Die Menüband-Benutzeroberfläche erfordert jedoch, dass bestimmte Bitmaps transparente Bilder unterstützen. Transparente Bitmaps verwenden 32-Bit-Pixel, wobei 24 Bit die roten, grünen und blauen Komponenten der Farbe angeben, und 8 Bit definieren einen Alphakanal , der die Transparenz der Farbe angibt. Die aktuellen Ressourcen-Editoren können Bitmaps mit 32-Bit-Pixeln anzeigen, aber nicht ändern. Verwenden Sie daher einen externen Bild-Editor anstelle der Ressourcen-Editoren, um transparente Bitmaps zu bearbeiten.
Kopieren Sie eine entsprechende Ressourcendatei aus einer anderen Anwendung in Ihr Projekt, und importieren Sie dann Bitmaps aus dieser Datei.

In dieser exemplarischen Vorgehensweise werden Ressourcendateien aus dem beispiel kopiert, das in " Walkthrough" erstellt wurde: Erstellen einer Menübandanwendung mithilfe von MFC.

So fügen Sie dem Projekt Bitmaps hinzu

Verwenden Sie den Datei-Explorer, um die folgenden .bmp Dateien aus dem Ressourcenverzeichnis (res) des Menübandbeispiels in das Ressourcenverzeichnis (res) des Scribble-Projekts zu kopieren:
1. Kopieren Sie main.bmp in Ihr Scribble-Projekt.
2. Kopieren Sie filesmall.bmp und filelarge.bmp in Ihr Scribble-Projekt.
3. Erstellen Sie neue Kopien der filelarge.bmp- und filesmall.bmp-Dateien, speichern Sie jedoch die Kopien im Beispiel des Menübands. Benennen Sie die Kopien homesmall.bmp und homelarge.bmp um, und verschieben Sie die Kopien dann in Ihr Scribble-Projekt.
4. Erstellen Sie eine Kopie der toolbar.bmp-Datei, speichern Sie die Kopie aber im Beispiel des Menübands. Benennen Sie die Kopie panelicons.bmp um, und verschieben Sie die Kopie dann in Ihr Scribble-Projekt.
Importieren Sie die Bitmap für eine MFC-Anwendung. Doppelklicken Sie in der Ressourcenansicht auf den Knoten scribble.rc , doppelklicken Sie auf den Bitmapknoten , und klicken Sie dann auf "Ressource hinzufügen". Klicken Sie im daraufhin angezeigten Dialogfeld auf "Importieren". Navigieren Sie zum res Verzeichnis, wählen Sie die main.bmp Datei aus, und klicken Sie dann auf "Öffnen".

Die main.bmp Bitmap enthält ein Bild von 26 x 26. Ändern Sie die ID der Bitmap in IDB_RIBBON_MAIN.
Importieren Sie die Bitmaps für das Dateimenü, das an die Schaltfläche "Anwendung" angefügt ist.
1. Importieren Sie die filesmall.bmp-Datei, die elf Bilder mit 16 x 16 (16 x 176) enthält. Ändern Sie die ID der Bitmap in IDB_RIBBON_FILESMALL.
Hinweis

Da wir nur die ersten acht 16 x 16 Bilder (16 x 128) benötigen, können Sie optional die rechte Seitenbreite dieser Bitmap von 176 bis 128 zuschneiden.
1. Importieren Sie die filelarge.bmp, die neun 32 x 32 (32x288)-Bilder enthält. Ändern Sie die ID der Bitmap in IDB_RIBBON_FILELARGE.
Importieren Sie die Bitmaps für die Menübandkategorien und -panels. Jede Registerkarte auf der Menübandleiste ist eine Kategorie und besteht aus einer Textbezeichnung und einem optionalen Bild.
1. Importieren Sie die homesmall.bmp Bitmap, die elf 16 x 16 Bilder für kleine Schaltflächenbitmaps enthält. Ändern Sie die ID der Bitmap in IDB_RIBBON_HOMESMALL.
2. Importieren Sie die homelarge.bmp Bitmap, die neun 32x32-Bilder für große Schaltflächenbitmaps enthält. Ändern Sie die ID der Bitmap in IDB_RIBBON_HOMELARGE.
Importieren Sie Bitmaps für die Fensterbereiche des geänderten Menübands. Diese Bitmaps oder Panelsymbole werden nach einem Größenänderungsvorgang verwendet, wenn das Menüband zu klein ist, um den gesamten Bereich anzuzeigen.
1. Importieren Sie die panelicons.bmp Bitmap, die acht 16 x 16 Bilder enthält. Passen Sie im Eigenschaftenfenster des Bitmap-Editors die Breite der Bitmap auf 64 (16 x 64) an. Ändern Sie die ID der Bitmap in IDB_PANEL_ICONS.
Hinweis

Da wir nur die ersten vier 16 x 16 Bilder (16x64) benötigen, können Sie optional die rechte Seitenbreite dieser Bitmap von 128 bis 64 zuschneiden.

Hinzufügen einer Menübandressource zum Projekt

Wenn Sie eine Anwendung konvertieren, die Menüs in eine Anwendung konvertiert, die ein Menüband verwendet, müssen Sie die vorhandenen Menüs nicht entfernen oder deaktivieren. Erstellen Sie einfach eine Menübandressource, fügen Sie Menübandschaltflächen hinzu, und ordnen Sie dann die neuen Schaltflächen den vorhandenen Menüelementen zu. Obwohl die Menüs nicht mehr sichtbar sind, werden Nachrichten aus der Menübandleiste weiterhin durch die Menüs und Menüverknüpfungen weitergeleitet.

Ein Menüband besteht aus der Schaltfläche "Anwendung ", die die große Schaltfläche auf der oberen linken Seite des Menübands und eine oder mehrere Kategorieregisterkarten darstellt. Jede Kategorieregisterkarte enthält ein oder mehrere Bereiche, die als Container für Menübandschaltflächen und -steuerelemente fungieren. Das folgende Verfahren zeigt, wie Sie eine Menübandressource erstellen und dann die Schaltfläche "Anwendung " anpassen.

So fügen Sie dem Projekt eine Menübandressource hinzu

Klicken Sie im Projektmappen-Explorer mit ausgewähltem Scribble-Projekt im Menü "Projekt" auf "Ressource hinzufügen".
Wählen Sie im Dialogfeld " Ressource hinzufügen " das Menüband aus, und klicken Sie dann auf "Neu".

Visual Studio erstellt eine Menübandressource und öffnet sie in der Entwurfsansicht. Die Menübandressourcen-ID ist IDR_RIBBON1, die in der Ressourcenansicht angezeigt wird. Das Menüband enthält eine Kategorie und einen Bereich.
Sie können die Schaltfläche "Anwendung " anpassen, indem Sie deren Eigenschaften ändern. Die Nachrichten-IDs, die in diesem Code verwendet werden, sind bereits im Menü für Scribble 1.0 definiert.
Klicken Sie in der Entwurfsansicht auf die Schaltfläche "Anwendung ", um die zugehörigen Eigenschaften anzuzeigen. Ändern Sie eigenschaftswerte wie folgt: Image to IDB_RIBBON_MAIN, Prompt to File, Keys to f, Large Images to IDB_RIBBON_FILELARGE, and Small Images to IDB_RIBBON_FILESMALL.
Die folgenden Änderungen erstellen das Menü, das angezeigt wird, wenn der Benutzer auf die Schaltfläche "Anwendung " klickt. Klicken Sie auf die Auslassungspunkte (...) neben den Hauptelementen , um den Element-Editor zu öffnen.
1. Klicken Sie bei ausgewählter Schaltfläche "Elementtyp" auf "Hinzufügen", um eine Schaltfläche hinzuzufügen. Ändern Sie die Beschriftung in &New, ID in ID_FILE_NEW, Bild in 0, Bild groß in 0.
2. Klicken Sie auf "Hinzufügen" , um eine Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_SAVE&Save, Bild in 2und Bild Groß in 2.
3. Klicken Sie auf "Hinzufügen" , um eine Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_SAVE_ASSave &As, Bild in 3und Bild Groß in 3.
4. Klicken Sie auf "Hinzufügen" , um eine Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_PRINT&Print, Bild in 4und Bild Groß in 4.
5. Ändern Sie den Elementtyp in Trennzeichen , und klicken Sie dann auf "Hinzufügen".
6. Ändern Sie den Elementtyp in "Schaltfläche". Klicken Sie auf "Hinzufügen" , um eine fünfte Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_CLOSE&Close, Bild in 5und Bild Groß in 5.
Die folgenden Änderungen erstellen ein Untermenü unter der Schaltfläche " Drucken ", das Sie im vorherigen Schritt erstellt haben.
1. Klicken Sie auf die Schaltfläche " Drucken ", ändern Sie den Elementtyp in "Etiketten", und klicken Sie dann auf "Einfügen". Beschriftung ändern in Preview and print the document.
2. Klicken Sie auf die Schaltfläche " Drucken ", ändern Sie den Elementtyp in "Schaltfläche", und klicken Sie auf "Einfügen". Ändern Sie beschriftung in , ID in ID_FILE_PRINT&Print, Bild in 4und Bild Groß in 4.
3. Klicken Sie auf die Schaltfläche "Drucken ", und klicken Sie dann auf "Einfügen ", um eine Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_PRINT_DIRECT&Quick Print, Bild in 7und Bild Groß in 7.
4. Klicken Sie auf die Schaltfläche " Drucken ", und klicken Sie dann auf "Einfügen ", um eine weitere Schaltfläche hinzuzufügen. Ändern Sie beschriftung in , ID in ID_FILE_PRINT_PREVIEWPrint Pre&view, Bild in 6und Bild Groß in 6.
5. Sie haben jetzt die Hauptelemente geändert. Klicken Sie auf "Schließen ", um den Element-Editor zu beenden.
Mit der folgenden Änderung wird eine Schaltfläche zum Beenden erstellt, die unten im Menü " Anwendung " angezeigt wird.
1. Wählen Sie im Projektmappen-Explorer die Registerkarte "Ressourcenansicht" aus.
2. Klicken Sie im Eigenschaftenfenster auf die Auslassungspunkte (...) neben "Schaltfläche" , um den Element-Editor zu öffnen.
3. Klicken Sie bei ausgewählter Schaltfläche "Elementtyp" auf "Hinzufügen", um eine Schaltfläche hinzuzufügen. Beschriftung in , ID in ID_APP_EXITE&xit, Bild in 8.
4. Sie haben die Schaltflächen geändert. Klicken Sie auf "Schließen ", um den Element-Editor zu beenden.

Erstellen einer Instanz der Menübandleiste

Die folgenden Schritte zeigen, wie Sie beim Starten der Anwendung eine Instanz der Menübandleiste erstellen. Um einer Anwendung eine Menübandleiste hinzuzufügen, deklarieren Sie die Menübandleiste in der Datei "mainfrm.h". Schreiben Sie dann in der datei mainfrm.cpp Code, um die Menübandressource zu laden.

So erstellen Sie eine Instanz der Menübandleiste

Fügen Sie in der Datei "mainfrm.h" dem geschützten Abschnitt der CMainFrameKlasse die Klassendefinition für den Hauptframe hinzu. Dieses Element ist für die Menübandleiste vorgesehen.
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```
Fügen Sie in der datei mainfrm.cpp den folgenden Code vor der endgültigen return Anweisung am Ende der CMainFrame::OnCreate Funktion hinzu. Sie erstellt eine Instanz der Menübandleiste.
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);
```

Anpassen der Menübandressource

Nachdem Sie die Schaltfläche "Anwendung " erstellt haben, können Sie dem Menüband Elemente hinzufügen.

Hinweis

In dieser exemplarischen Vorgehensweise wird dasselbe Panelsymbol für alle Bereiche verwendet. Sie können jedoch andere Bildlistenindizes verwenden, um andere Symbole anzuzeigen.

So fügen Sie eine Kategorie "Start" und "Bearbeitungsbereich" hinzu

Das Scribble-Programm erfordert nur eine Kategorie. Doppelklicken Sie in der Entwurfsansicht in der Toolbox auf "Kategorie ", um eine hinzuzufügen und die zugehörigen Eigenschaften anzuzeigen. Ändern Sie eigenschaftswerte wie folgt: Caption to &Home, Large Images to , Small Images to IDB_RIBBON_HOMESMALLIDB_RIBBON_HOMELARGE.
Jede Menübandkategorie ist in benannten Bereichen organisiert. Jedes Panel enthält eine Reihe von Steuerelementen, die verwandte Vorgänge ausführen. Diese Kategorie hat einen Bereich. Klicken Sie auf "Panel", und ändern Sie dann "Beschriftung" in Edit.
Fügen Sie dem Bearbeitungsbereich eine Schaltfläche hinzu, die für das Löschen des Inhalts des Dokuments verantwortlich ist. Die Nachrichten-ID für diese Schaltfläche wurde bereits in der IDR_SCRIBBTYPE Menüressource definiert. Geben Sie Clear All als Schaltflächentext und den Index der Bitmap an, die die Schaltfläche schmückt. Öffnen Sie die Toolbox, und ziehen Sie dann eine Schaltfläche in den Bearbeitungsbereich . Klicken Sie auf die Schaltfläche, und ändern Sie dann "Caption" in Clear All, "ID" in ID_EDIT_CLEAR_ALL, "Image Index" in , "Large Image Index" in 00.
Speichern Sie die Änderungen, und erstellen Sie die Anwendung, und führen Sie sie aus. Die Scribble-Anwendung sollte angezeigt werden, und sie sollte über eine Menübandleiste am oberen Rand des Fensters anstelle einer Menüleiste verfügen. Die Menübandleiste sollte über eine Kategorie, "Start" und " Start " verfügen, über einen Bereich", " Bearbeiten". Die hinzugefügten Menübandschaltflächen sollten den vorhandenen Ereignishandlern zugeordnet sein, und die Schaltflächen "Öffnen", " Schließen", " Speichern", " Drucken" und " Alle löschen" sollten wie erwartet funktionieren.

Festlegen des Aussehens der Anwendung

Ein visueller Manager ist ein globales Objekt, das die gesamte Zeichnung für eine Anwendung steuert. Da die ursprüngliche Scribble-Anwendung den Office 2000-Benutzeroberflächenstil verwendet, sieht die Anwendung möglicherweise altmodisch aus. Sie können die Anwendung auf die Verwendung des visuellen Office 2007-Managers zurücksetzen, damit sie einer Office 2007-Anwendung ähnelt.

So legen Sie das Aussehen der Anwendung fest

Geben Sie in der CMainFrame::OnCreate Funktion den folgenden Code vor der return 0; Anweisung ein, um den standardmäßigen visuellen Manager und den Standardstil zu ändern.

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

Speichern Sie die Änderungen, und erstellen Sie die Anwendung, und führen Sie sie aus. Die Benutzeroberfläche der Anwendung sollte der Office 2007-Benutzeroberfläche ähneln.

Nächste Schritte

Sie haben das klassische Scribble 1.0 MFC-Beispiel für die Verwendung des Menüband-Designers geändert. Wechseln Sie jetzt zu Teil 2.

Siehe auch

Exemplarische Vorgehensweisen
Exemplarische Vorgehensweise: Aktualisieren der MFC Scribble-Anwendung (Teil 2)