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

Artikel
10/12/2023

In dieser exemplarischen Vorgehensweise wird beschrieben, wie Sie eine vorhandene MFC-Anwendung so ändern, dass die Menüband-Benutzeroberfläche verwendet wird. Visual Studio unterstützt sowohl das Menüband von Office 2007 als auch das "Scenic Ribbon" von Windows 7. Weitere Informationen zur Benutzeroberfläche des Menübands finden Sie unter "Menübänder".

In dieser exemplarischen Vorgehensweise wird das klassische MFC-Beispiel Scribble 1.0 geändert, das Ihnen ermöglicht, mit der Maus Strichzeichnungen zu erstellen. In diesem Teil der exemplarischen Vorgehensweise wird gezeigt, wie das Scribble-Beispiel so geändert wird, dass es 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

Zum Konvertieren einer Anwendung, die ein Menü unterstützt, in eine Anwendung, die ein Menüband unterstützt, müssen Sie die Anwendung, das Rahmenfenster und die Symbolleistenklassen von den aktualisierten Basisklassen ableiten. (Es wird empfohlen, das ursprüngliche Scribble-Beispiel nicht zu ändern. Sauber 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

Überprüfen Sie in scribble.cpp, ob 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, als Windows-Anwendungen eine Initialisierungsdatei (.ini) verwendeten, um die Benutzereinstellungen zu speichern. Ändern Sie Scribble so, dass die Benutzereinstellungen statt in einer Initialisierungsdatei in der Registrierung gespeichert werden. Um den Registrierungsschlüssel und die Basis festzulegen, geben Sie den folgenden Code in CScribbleApp::InitInstance nach der LoadStdProfileSettings()-Anweisung ein.
```
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 auf CMDIFrameWnd durch CMDIFrameWndEx.
Ersetzen Sie in den Dateien "childfrm.h" und "childfrm.cpp" CMDIChildWnd durch CMDIChildWndEx.

Im untergeordneten Element. h Datei, ersetzen CSplitterWnd durch CSplitterWndEx.
Ändern Sie die Symbolleisten und die Statusleisten so, dass die neuen MFC-Klassen verwendet werden.

Führen Sie in der Datei "mainfrm.h" folgende Schritte aus:
1. Ersetzen Sie CToolBar durch CMFCToolBar.
2. Ersetzen Sie CStatusBar durch CMFCStatusBar.
Führen Sie in der Datei "mainfrm.cpp" folgende Schritte aus:
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, erstellen Sie anschließend die Anwendung, und führen Sie sie aus.

Hinzufügen von Bitmaps zum Projekt

Für die nächsten vier Schritte dieser exemplarischen Vorgehensweise sind Bitmapressourcen erforderlich. 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 Netzwerkdiagramm ics (PNG)-Bildern 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 Bits/Pixel 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 von 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 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 Dateien filelarge.bmp und filesmall.bmp, speichern Sie jedoch die Kopien im Beispiel des Menübands. Benennen Sie die Kopien in "homesmall.bmp" und "homelarge.bmp" um, und verschieben Sie sie dann in das Scribble-Projekt.
4. Erstellen Sie eine Kopie der Datei toolbar.bmp, speichern Sie die Kopie aber im Beispiel des Menübands. Benennen Sie die Kopie in "panelicons.bmp" um, und verschieben Sie sie dann in das 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 Datei Standard.bmp aus, und klicken Sie dann auf "Öffnen".

Die Bitmap "main.bmp" enthält ein 26x26-Bild. Ä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 Datei "filesmall.bmp", 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 dateilarge.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 -bereiche. Jede Registerkarte in der Menübandleiste ist eine Kategorie und besteht aus einer Textbezeichnung und einem optionalen Bild.
1. Importieren Sie die Bitmap "homesmall.bmp", 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 Bitmap homelarge.bmp, 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 Menübandbereiche, deren Größe geändert wurde. Diese Bitmaps oder Bereichssymbole werden nach einer Größenänderung verwendet, wenn das Menüband zu klein ist, um den gesamten Bereich anzuzeigen.
1. Importieren Sie die Bitmap "panelicons.bmp", die acht 16x16-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 Kategorienregisterkarte enthält einen oder mehrere Bereiche, die als Container für Menübandschaltflächen und Steuerelemente dienen. 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

Wenn das in Projektmappen-Explorer ausgewählte Scribble-Projekt im Menü "Projekt" auf "Ressource hinzufügen" geklickt hat.
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 Designansicht. 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 Meldungs-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 in 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 beim Starten Ihrer Anwendung eine Instanz der Menübandleiste erstellt wird. Um eine Menübandleiste zu einer Anwendung hinzuzufügen, deklarieren Sie die Menübandleiste in der Datei "mainfrm.h". Schreiben Sie dann in der Datei "mainfrm.cpp" Code zum Laden der Menübandressource.

So erstellen Sie eine Instanz der Menübandleiste

Fügen Sie in der Datei "mainfrm.h" einen Datenmember zum geschützten Abschnitt von CMainFrame, der 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 letzten 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 das gleiche Bereichssymbol für alle Bereiche verwendet. Sie können jedoch auch andere Bildlistenindizes verwenden, um andere Symbole anzuzeigen.

So fügen Sie eine Kategorie "Startseite" und einen Bereich "Bearbeiten" 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 , Large Images to , Small Images to IDB_RIBBON_HOMELARGEIDB_RIBBON_HOMESMALL. &Home
Jede Menübandkategorie ist in benannte Bereiche unterteilt. Jedes Panel enthält eine Reihe von Steuerelementen, die verwandte Vorgänge ausführen. Diese Kategorie verfügt über 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, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Die Scribble-Anwendung sollte angezeigt werden, und sie sollte am oberen Rand des Fensters über eine Menübandleiste 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 die Benutzeroberfläche im Office 2000-Stil nutzt, sieht die Anwendung möglicherweise altmodisch aus. Sie können die Anwendung zurücksetzen, um den visuellen Manager "Office 2007" zu verwenden, sodass sie einer Office 2007-Anwendung ähnelt.

So legen Sie die Darstellung 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, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Die Anwendungsbenutzeroberfläche 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)

Freigeben über