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

In Teil 1 dieser exemplarischen Vorgehensweise wurde gezeigt, wie Sie der klassischen Scribble-Anwendung ein Office Fluent-Menüband hinzufügen. In diesem Teil wird gezeigt, wie Sie Menübandbereiche und Steuerelemente hinzufügen, die Benutzer anstelle von Menüs und Befehlen verwenden können.

Voraussetzungen

Visual C++-Beispiele

Abschnitte

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

• Hinzufügen neuer Panels zum Menüband

• Hinzufügen eines Hilfebereichs zum Menüband

• Hinzufügen eines Stiftpanels zum Menüband

• Hinzufügen einer Farbschaltfläche zum Menüband

• Hinzufügen eines Farbelements zur Dokumentklasse

• Initialisieren von Stiften und Speichern von Einstellungen

Hinzufügen neuer Panels zum Menüband

Diese Schritte zeigen, wie Sie einen Ansichtsbereich hinzufügen, der zwei Kontrollkästchen enthält, die die Sichtbarkeit der Symbolleiste und der Statusleiste steuern, sowie ein Fensterbereich , der eine vertikal ausgerichtete geteilte Schaltfläche enthält, die die Erstellung und Anordnung von MDI-Fenstern (Multiple-Document Interface) steuert.

So fügen Sie der Menübandleiste einen Ansichtsbereich und einen Fensterbereich hinzu

1. Erstellen Sie einen Bereich mit dem Namen View, der zwei Kontrollkästchen enthält, mit denen die Statusleiste und die Symbolleiste umzuschalten sind.

   1. Ziehen Sie aus der Toolbox einen Bereich in die Kategorie "Start ". Ziehen Sie dann zwei Kontrollkästchen in das Panel.

   2. Klicken Sie auf das Panel, um dessen Eigenschaften zu ändern. Beschriftung ändern in View.

   3. Klicken Sie auf das erste Kontrollkästchen, um dessen Eigenschaften zu ändern. Ändern Sie die ID in ID_VIEW_TOOLBAR und die Beschriftung in Toolbar.

   4. Klicken Sie auf das zweite Kontrollkästchen, um dessen Eigenschaften zu ändern. Ändern Sie die ID in ID_VIEW_STATUS_BAR und die Beschriftung in Status Bar.

2. Erstellen Sie einen Bereich mit dem Namen Window einer geteilten Schaltfläche. Wenn ein Benutzer auf die geteilte Schaltfläche klickt, zeigt ein Kontextmenü drei Befehle an, die bereits in der Scribble-Anwendung definiert sind.

   1. Ziehen Sie aus der Toolbox einen Bereich in die Kategorie "Start ". Ziehen Sie dann eine Schaltfläche in den Bereich.

   2. Klicken Sie auf das Panel, um dessen Eigenschaften zu ändern. Beschriftung ändern in Window.

   3. Klicken Sie auf die Schaltfläche . Ändern Sie die Beschriftung in , Tasten in Windowsw, großen Bildindex in 1, und den Geteilten Modus in False. Klicken Sie dann neben den Menüelementen auf die Auslassungspunkte (...), um das Dialogfeld "Element-Editor" zu öffnen.

   4. Klicken Sie dreimal auf "Hinzufügen" , um drei Schaltflächen hinzuzufügen.

   5. Klicken Sie auf die erste Schaltfläche, und ändern Sie dann "Beschriftung" in " und "ID" in New WindowID_WINDOW_NEW.

   6. Klicken Sie auf die zweite Schaltfläche, und ändern Sie dann "Beschriftung" in " und "ID" in CascadeID_WINDOW_CASCADE.

   7. Klicken Sie auf die dritte Schaltfläche, und ändern Sie dann "Beschriftung" in Tile" und "ID " in ID_WINDOW_TILE_HORZ.

3. Speichern Sie die Änderungen, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Die Ansichts - und Fensterbereiche sollten angezeigt werden. Klicken Sie auf die Schaltflächen, um zu bestätigen, dass sie ordnungsgemäß funktionieren.

Hinzufügen eines Hilfebereichs zum Menüband

Jetzt können Sie zwei Menüelemente zuweisen, die in der Scribble-Anwendung definiert sind, Menübandschaltflächen mit dem Namen "Hilfethemen" und "Info zu Scribble". Die Schaltflächen werden einem neuen Bereich mit dem Namen "Hilfe" hinzugefügt.

So fügen Sie einen Hilfebereich hinzu

1. Ziehen Sie aus der Toolbox einen Bereich in die Kategorie "Start ". Ziehen Sie dann zwei Schaltflächen in den Bereich.

2. Klicken Sie auf das Panel, um dessen Eigenschaften zu ändern. Beschriftung ändern in Help.

3. Klicken Sie auf die erste Schaltfläche. Ändern Sie die Beschriftung in Help Topicsund die ID in ID_HELP_FINDER.

4. Klicken Sie auf die zweite Schaltfläche. Ändern Sie die Beschriftung in About Scribble...und die ID in ID_APP_ABOUT.

5. Speichern Sie die Änderungen, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Ein Hilfebereich mit zwei Menübandschaltflächen sollte angezeigt werden.

   Wichtig

   Wenn Sie auf die Schaltfläche "Hilfethemen " klicken, öffnet die Scribble-Anwendung eine komprimierte HTML-Hilfedatei (CHM) mit dem Namen your_project_name.chm. Wenn Ihr Projekt nicht "Scribble" heißt, müssen Sie daher die Hilfedatei in den Projektnamen umbenennen.

Hinzufügen eines Stiftpanels zum Menüband

Fügen Sie nun ein Panel hinzu, um Schaltflächen anzuzeigen, die die Stärke und die Farbe des Stifts steuern. Dieses Panel enthält ein Kontrollkästchen, das zwischen dicken und dünnen Stiften umschaltet. Seine Funktionalität ähnelt der des Menüelements "Dicke Linie " in der Scribble-Anwendung.

Mit der ursprünglichen Scribble-Anwendung können Benutzer Stiftbreiten aus einem Dialogfeld auswählen, das angezeigt wird, wenn der Benutzer im Menü auf Stiftbreiten klickt. Da die Menübandleiste ausreichend Platz für neue Steuerelemente hat, können Sie das Dialogfeld mithilfe von zwei Kombinationsfeldern im Menüband ersetzen. Ein Kombinationsfeld passt die Breite des dünnen Stifts an, und das andere Kombinationsfeld passt die Breite des dicken Stifts an.

So fügen Sie dem Menüband einen Stiftbereich und Kombinationsfelder hinzu

1. Ziehen Sie aus der Toolbox einen Bereich in die Kategorie "Start ". Ziehen Sie dann ein Kontrollkästchen und zwei Kombinationsfelder in das Panel.

2. Klicken Sie auf das Panel, um dessen Eigenschaften zu ändern. Beschriftung ändern in Pen.

3. Aktivieren Sie das Kontrollkästchen. Ändern Sie die Beschriftung in Use Thickund die ID in ID_PEN_THICK_OR_THIN.

4. Klicken Sie auf das erste Kombinationsfeld. Ändern Sie beschriftung in , ID in Thin PenID_PEN_THIN_WIDTH, Typ in Drop List, Daten in 1;2;3;4;5;6;7;8;9;, und Text in 2.

5. Klicken Sie auf das zweite Kombinationsfeld. Ändern Sie beschriftung in , ID in Thick PenID_PEN_THICK_WIDTH, Typ in Drop List, Daten in 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;, und Text in 5.

6. Die neuen Kombinationsfelder entsprechen keinem vorhandenen Menüelement, daher müssen Sie für jede Stiftoption ein Menüelement erstellen.

   1. Öffnen Sie im Fenster " Ressourcenansicht " die IDR_SCRIBBTYPE Menüressource.

   2. Klicken Sie auf "Stift" , um das Stiftmenü zu öffnen. Klicken Sie dann auf "Hier eingeben" und geben Sie ein Thi&n Pen.

   3. Klicken Sie mit der rechten Maustaste auf den Text, den Sie eingegeben haben, um das Eigenschaftenfenster zu öffnen, und ändern Sie dann die ID-Eigenschaft in ID_PEN_THIN_WIDTH.

   4. Erstellen Sie einen Ereignishandler für jedes Stiftmenüelement. Klicken Sie mit der rechten Maustaste auf das von Ihnen erstellte Menüelement "Thi&n Pen ", und klicken Sie dann auf "Ereignishandler hinzufügen". Der Ereignishandler-Assistent wird angezeigt.

   5. Wählen Sie im Listenfeld "Klasse" im Assistenten "CScribbleDoc" aus, und klicken Sie dann auf "Hinzufügen" und "Bearbeiten". Der Befehl erstellt einen Ereignishandler mit dem Namen CScribbleDoc::OnPenThinWidth.

   6. Füge CScribbleDoc::OnPenThinWidth den folgenden Code hinzu.

      // 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();
      

7. Erstellen Sie als Nächstes ein Menüelement und Ereignishandler für den dicken Stift.

   1. Öffnen Sie im Fenster " Ressourcenansicht " die IDR_SCRIBBTYPE Menüressource.

   2. Klicken Sie auf "Stift" , um das Stiftmenü zu öffnen. Klicken Sie dann auf "Hier eingeben" und geben Sie ein Thic&k Pen.

   3. Klicken Sie mit der rechten Maustaste auf den Text, den Sie eingegeben haben, um das Eigenschaftenfenster anzuzeigen. Ändern Sie die ID-Eigenschaft in ID_PEN_THICK_WIDTH.

   4. Klicken Sie mit der rechten Maustaste auf das Menüelement "Dicker Stift ", das Sie erstellt haben, und klicken Sie dann auf "Ereignishandler hinzufügen". Der Ereignishandler-Assistent wird angezeigt.

   5. Wählen Sie im Listenfeld "Klasse" des Assistenten CScribbleDoc aus, und klicken Sie dann auf Hinzufügen und Bearbeiten. Der Befehl erstellt einen Ereignishandler mit dem Namen CScribbleDoc::OnPenThickWidth.

   6. Füge CScribbleDoc::OnPenThickWidth den folgenden Code hinzu.

      // 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();
      

8. Speichern Sie die Änderungen, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Neue Schaltflächen und Kombinationsfelder sollten angezeigt werden. Versuchen Sie, verschiedene Stiftbreiten zum Scribble zu verwenden.

Hinzufügen einer Farbschaltfläche zum Stiftbereich

Fügen Sie als Nächstes ein CMFCRibbonColorButton -Objekt hinzu, mit dem der Benutzer farblich scribibble.

So fügen Sie dem Stiftbereich eine Farbschaltfläche hinzu

1. Erstellen Sie vor dem Hinzufügen der Farbschaltfläche ein Menüelement dafür. Öffnen Sie im Fenster " Ressourcenansicht " die IDR_SCRIBBTYPE Menüressource. Klicken Sie auf das Menüelement "Stift ", um das Stiftmenü zu öffnen. Klicken Sie dann auf "Hier eingeben" und geben Sie ein &Color. Klicken Sie mit der rechten Maustaste auf den Text, den Sie eingegeben haben, um das Eigenschaftenfenster anzuzeigen. Ändern Sie die ID in ID_PEN_COLOR.

2. Fügen Sie nun die Farbschaltfläche hinzu. Ziehen Sie aus der Toolbox eine Farbschaltfläche in den Stiftbereich .

3. Klicken Sie auf die Farbschaltfläche. Ändern Sie die Beschriftung in Color, ID in ID_PEN_COLOR, einfaches Aussehen in True, große Bildindex in 1, und den Geteilten Modus in False.

4. Speichern Sie die Änderungen, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Die neue Farbschaltfläche sollte im Stiftbereich angezeigt werden. Sie kann jedoch nicht verwendet werden, da sie noch keinen Ereignishandler hat. Die nächsten Schritte zeigen, wie Sie einen Ereignishandler für die Farbschaltfläche hinzufügen.

Hinzufügen eines Farbelements zur Dokumentklasse

Da die ursprüngliche Scribble-Anwendung keine Farbstifte enthält, müssen Sie eine Implementierung für sie schreiben. Um die Stiftfarbe des Dokuments zu speichern, fügen Sie der Dokumentklasse ein neues Element hinzu. CscribbleDoc

So fügen Sie der Dokumentklasse ein Farbelement hinzu

1. Suchen Sie in scribdoc.h in der CScribbleDoc Klasse den // Attributes Abschnitt. Fügen Sie die folgenden Codezeilen nach der Definition des m_nThickWidth Datenelements hinzu.

   // Current pen color
   COLORREF m_penColor;
   

2. Jedes Dokument enthält eine Liste von Stokes, die der Benutzer bereits gezeichnet hat. Jeder Strich wird durch ein CStroke Objekt definiert. Die CStroke Klasse enthält keine Informationen zur Stiftfarbe, daher müssen Sie die Klasse ändern. Fügen Sie in scribdoc.h in der CStroke Klasse die folgenden Codezeilen nach der Definition des m_nPenWidth Datenelements hinzu.

   // Pen color for the stroke
   COLORREF m_penColor;
   

3. Fügen Sie in scribdoc.h einen neuen CStroke Konstruktor hinzu, dessen Parameter eine Breite und Farbe angeben. Fügen Sie nach der CStroke(UINT nPenWidth); Anweisung die folgende Codezeile hinzu.

   CStroke(UINT nPenWidth, COLORREF penColor);
   

4. Fügen Sie in scribdoc.cpp die Implementierung des neuen CStroke Konstruktors hinzu. Fügen Sie den folgenden Code nach der Implementierung des CStroke::CStroke(UINT nPenWidth) Konstruktors hinzu.

   // 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();
   }
   

5. Ändern Sie die zweite Zeile der CStroke::DrawStroke Methode wie folgt.

   if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
   

6. Legen Sie die Standardstiftfarbe für die Dokumentklasse fest. Fügen Sie in scribdoc.cpp die folgenden Zeilen nach der m_nThickWidth = 5; Anweisung hinzuCScribbleDoc::InitDocument.

   // default pen color is black
   m_penColor = RGB(0, 0, 0);
   

7. Ändern Sie in scribdoc.cpp die erste Zeile der CScribbleDoc::NewStroke Methode in Folgendes.

   CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
   

8. Ändern Sie die letzte Zeile der CScribbleDoc::ReplacePen Methode wie folgt.

   m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
   

9. Sie haben das m_penColor Mitglied in einem vorherigen Schritt hinzugefügt. Erstellen Sie nun einen Ereignishandler für die Farbschaltfläche, die das Element festlegt.

   1. Öffnen Sie im Fenster " Ressourcenansicht " die IDR_SCRIBBTYPE Menüressource.

   2. Klicken Sie mit der rechten Maustaste auf das Menüelement "Farbe ", und klicken Sie auf " Ereignishandler hinzufügen". Der Ereignishandler-Assistent wird angezeigt.

   3. Wählen Sie im Listenfeld "Klasse" im Assistenten CScribbleDoc aus, und klicken Sie dann auf die Schaltfläche "Hinzufügen und Bearbeiten". Der Befehl erstellt den CScribbleDoc::OnPenColor Ereignishandler-Stub.

10. Ersetzen Sie den Stub für den CScribbleDoc::OnPenColor Ereignishandler durch den folgenden Code.

    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();
    }
    

11. Speichern Sie die Änderungen, erstellen Sie anschließend die Anwendung, und führen Sie sie aus. Sie können jetzt die Farbschaltfläche drücken und die Farbe des Stifts ändern.

Initialisieren von Stiften und Speichern von Einstellungen

Initialisieren Sie als Nächstes die Farbe und Breite der Stifte. Speichern und laden Sie schließlich eine Farbzeichnung aus einer Datei.

So initialisieren Sie Steuerelemente auf der Menübandleiste

1. Initialisieren Sie die Stifte auf der Menübandleiste.

   Fügen Sie den folgenden Code hinzu, um "scribdoc.cpp" in der CScribbleDoc::InitDocument Methode nach der m_sizeDoc = CSize(200,200) Anweisung hinzuzufügen.

   // 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);
   

2. Speichern Sie eine Farbzeichnung in einer Datei. Fügen Sie die folgende Anweisung hinzu, um "scribdoc.cpp" in der CStroke::Serialize Methode nach der ar << (WORD)m_nPenWidth; Anweisung hinzuzufügen.

   ar << (COLORREF)m_penColor;
   

3. Laden Sie schließlich eine Farbzeichnung aus einer Datei. Fügen Sie in der Methode nach der CStroke::Serialize m_nPenWidth = w; Anweisung die folgende Codezeile hinzu.

   ar >> m_penColor;
   

4. Zeichnen Sie nun in Farbe, und speichern Sie ihre Zeichnung in einer Datei.

Zusammenfassung

Sie haben die MFC Scribble-Anwendung aktualisiert. Verwenden Sie diese exemplarische Vorgehensweise als Leitfaden, wenn Sie Ihre vorhandenen Anwendungen ändern.

Siehe auch

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