Procedura dettagliata: aggiornamento dell'applicazione MFC Scribble (parte 1)

Articolo
10/12/2023

In questa procedura dettagliata viene illustrato come modificare un'applicazione MFC esistente per utilizzare l'interfaccia utente della barra multifunzione. Visual Studio supporta sia la barra multifunzione di Office 2007 che la barra multifunzione Windows 7 Scenic. Per altre informazioni sull'interfaccia utente della barra multifunzione, vedere Barre multifunzione.

In questa procedura dettagliata viene modificato l'esempio classico di Scribble 1.0 di MFC che consente di utilizzare il mouse per disegnare delle linee. Questa parte della procedura dettagliata mostra come modificare l'esempio di Scribble in modo che mostri una barra multifunzione. La parte 2 aggiunge altri pulsanti alla barra multifunzione.

Prerequisiti

Esempio MFC Scribble 1.0. Per informazioni sulla conversione in Visual Studio 2017 o versione successiva, vedere Guida alla conversione: MFC Scribble.

Sezioni

In questa parte della procedura dettagliata sono incluse le seguenti sezioni:

Sostituzione delle classi di base
Aggiunta di bitmap al progetto
Aggiunta di una risorsa della barra multifunzione al progetto
Creazione di un'istanza della barra multifunzione
Aggiunta di una categoria della barra multifunzione
Impostazione dell'aspetto dell'applicazione

Sostituzione delle classi di base

Per convertire un'applicazione che supporta un menu in un'applicazione che supporta una barra multifunzione, è necessario derivare le classi dell'applicazione, della finestra cornice e della barra degli strumenti da classi base aggiornate. Si consiglia di non modificare l'esempio originale di Scribble. Pulire invece il progetto Scribble, copiarlo in un'altra directory e quindi modificare la copia.

Per sostituire le classi base nell'applicazione Scribble

In scribble.cpp verificare che CScribbleApp::InitInstance includa una chiamata a AfxOleInit.
Aggiungere il codice seguente al file pch.h (stdafx.h in Visual Studio 2017 e versioni precedenti):
```
#include <afxcontrolbars.h>
```
In scribble.h modificare la definizione per la CScribbleApp classe in modo che sia derivata dalla classe CWinAppEx.
```
class CScribbleApp: public CWinAppEx
```
Scribble 1.0 è stato scritto quando le applicazioni Windows utilizzavano un file di inizializzazione (con estensione ini) per salvare i dati delle preferenze utente. Anziché utilizzare un file di inizializzazione, modificare Scribble in modo da archiviare le preferenze utente nel Registro di sistema. Per impostare la chiave del Registro di sistema e la base, digitare il seguente codice in CScribbleApp::InitInstance dopo l'istruzione LoadStdProfileSettings().
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
La cornice principale di un'applicazione MDI (Multiple Document Interface, interfaccia a documenti multipli) non è più derivata dalla classe CMDIFrameWnd. Deriva invece dalla classe CMDIFrameWndEx .

Nei file mainfrm.h e mainfrm.cpp sostituire tutti i riferimenti a CMDIFrameWnd con CMDIFrameWndEx.
Nei file childfrm.h e childfrm.cpp sostituire CMDIChildWnd con CMDIChildWndEx.

In childfrm. h file, sostituire CSplitterWnd con CSplitterWndEx.
Modificare le barre degli strumenti e le barre di stato per utilizzare le nuove classi MFC.

Nel file mainfrm.h:
1. Sostituisci CToolBar con CMFCToolBar.
2. Sostituisci CStatusBar con CMFCStatusBar.
Nel file mainfrm.cpp:
1. Sostituire m_wndToolBar.SetBarStyle con m_wndToolBar.SetPaneStyle
2. Sostituire m_wndToolBar.GetBarStyle con m_wndToolBar.GetPaneStyle
3. Sostituire DockControlBar(&m_wndToolBar) con DockPane(&m_wndToolBar)

Nel file ipframe.cpp commentare le tre righe di codice seguenti.

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

Salvare i cambiamenti, quindi compilare ed eseguire l'applicazione.

Aggiunta di bitmap al progetto

I quattro passaggi successivi di questa procedura dettagliata richiedono risorse bitmap. È possibile ottenere le bitmap appropriate in vari modi:

Usare gli editor di risorse per inventare bitmap personalizzate. In alternativa, usare gli editor di risorse per assemblare bitmap dalle immagini con estensione png (Portable Network Graphics) incluse in Visual Studio e che possono essere scaricate dalla libreria di immagini di Visual Studio.

Tuttavia, l'interfaccia utente della barra multifunzione richiede che determinate bitmap supportino immagini trasparenti. Le bitmap trasparenti usano pixel a 32 bit, dove 24 bit specificano i componenti rosso, verde e blu del colore e 8 bit definiscono un canale alfa che specifica la trasparenza del colore. Con gli editor risorse correnti è possibile visualizzare, ma non modificare, le bitmap con pixel a 32 bit. Pertanto, utilizzare un editor di immagini esterno anziché gli editor risorse per modificare le bitmap trasparenti.
Copiare un file di risorse appropriato da un'altra applicazione al progetto e importare le bitmap da quel file.

Questa procedura dettagliata copia i file di risorse dall'esempio creato in Procedura dettagliata: Creazione di un'applicazione della barra multifunzione tramite MFC.

Per aggiungere bitmap al progetto

Usare Esplora file per copiare i file bmp seguenti dalla directory resources (res) dell'esempio della barra multifunzione alla directory delle risorse (res) del progetto Scribble:
1. Copiare il file main.bmp nel progetto Scribble.
2. Copiare i file filesmall.bmp e filelarge.bmp nel progetto Scribble.
3. Creare nuove copie dei file filelarge.bmp e filesmall.bmp, ma salvare le copie nell'esempio della barra multifunzione. Rinominare le copie homesmall.bmp e homelarge.bmp, quindi spostarle nel progetto Scribble.
4. Creare una copia del file toolbar.bmp, ma salvare la copia nell'esempio della barra multifunzione. Rinominare la copia panelicons.bmp e spostarla nel progetto Scribble.
Importare la bitmap per un'applicazione MFC. In Visualizzazione risorse fare doppio clic sul nodo scribble.rc , fare doppio clic sul nodo Bitmap e quindi su Aggiungi risorsa. Nella finestra di dialogo visualizzata fare clic su Importa. Passare alla res directory, selezionare il file main.bmp e quindi fare clic su Apri.

La bitmap main.bmp contiene un'immagine 26x26. Modificare l'ID della bitmap in IDB_RIBBON_MAIN.
Importare le bitmap per il menu file associato al pulsante Applicazione .
1. Importare il file filesmall.bmp, che contiene undici immagini 16x16 (16x176). Modificare l'ID della bitmap in IDB_RIBBON_FILESMALL.
Nota

Poiché sono necessarie solo le prime otto immagini 16x16 (16x128), è possibile ritagliare facoltativamente la larghezza laterale destra di questa bitmap da 176 a 128.
1. Importare il filelarge.bmp, che contiene nove immagini 32x32 (32x288). Modificare l'ID della bitmap in IDB_RIBBON_FILELARGE.
Importare le bitmap per le categorie e i pannelli della barra multifunzione. Ogni scheda della barra multifunzione è una categoria e consiste in un'etichetta di testo e in un'immagine facoltativa.
1. Importare la bitmap homesmall.bmp, che contiene undici immagini da 16x16 per bitmap di pulsante di piccole dimensioni. Modificare l'ID della bitmap in IDB_RIBBON_HOMESMALL.
2. Importare la bitmap homelarge.bmp, che contiene nove immagini da 32x32 per bitmap di pulsante di grandi dimensioni. Modificare l'ID della bitmap in IDB_RIBBON_HOMELARGE.
Importare le bitmap per i pannelli della barra multifunzione ridimensionati. Queste bitmap, o icone di pannello, vengono spesso utilizzate dopo un'operazione di ridimensionamento se la barra multifunzione è troppo piccola per visualizzare l'intero pannello.
1. Importare la bitmap panelicons.bmp, la quale contiene otto immagini 16x16. Nella finestra Proprietà dell'editor bitmap regolare la larghezza della bitmap su 64 (16x64). Modificare l'ID della bitmap in IDB_PANEL_ICONS.
Nota

Poiché sono necessarie solo le prime quattro immagini 16x16 (16x64), è possibile ritagliare facoltativamente la larghezza laterale destra di questa bitmap da 128 a 64.

Aggiunta di una risorsa della barra multifunzione al progetto

Quando si converte un'applicazione che usa menu in un'applicazione che usa una barra multifunzione, non è necessario rimuovere o disabilitare i menu esistenti. È sufficiente creare una risorsa della barra multifunzione, aggiungere pulsanti della barra multifunzione e quindi associare i nuovi pulsanti alle voci di menu esistenti. Anche se i menu non sono più visibili, i messaggi dalla barra multifunzione vengono instradati attraverso i menu e i tasti di scelta rapida dei menu continuano a funzionare.

Una barra multifunzione è costituita dal pulsante Applicazione , ovvero il pulsante grande sul lato superiore sinistro della barra multifunzione e una o più schede di categoria. Ogni scheda di categoria contiene uno o più pannelli che fungono da contenitori per i pulsanti e i controlli della barra multifunzione. La procedura seguente illustra come creare una risorsa della barra multifunzione e quindi personalizzare il pulsante Applicazione .

Per aggiungere una risorsa barra multifunzione al progetto

Con il progetto Scribble selezionato in Esplora soluzioni, scegliere Aggiungi risorsa dal menu Progetto.
Nella finestra di dialogo Aggiungi risorsa selezionare Barra multifunzione e quindi fare clic su Nuovo.

In Visual Studio verrà creata una risorsa barra multifunzione che verrà aperta nella visualizzazione Progettazione. L'ID risorsa della barra multifunzione è IDR_RIBBON1, che viene visualizzato in Visualizzazione risorse. La barra multifunzione contiene una categoria e un pannello.
È possibile personalizzare il pulsante Applicazione modificandone le proprietà. Gli ID di messaggio che vengono utilizzati in questo codice sono già definiti nel menu per Scribble 1.0.
Nella visualizzazione struttura fare clic sul pulsante Applicazione per visualizzarne le proprietà. Modificare i valori delle proprietà come segue: Immagine in IDB_RIBBON_MAIN, Richiedi a File, Chiavi a f, Immagini di grandi dimensioni in IDB_RIBBON_FILELARGEe Immagini di piccole dimensioni in IDB_RIBBON_FILESMALL.
Le modifiche seguenti creano il menu visualizzato quando l'utente fa clic sul pulsante Applicazione . Fare clic sui puntini di sospensione (...) accanto a Elementi principali per aprire l'Editor elementi.
1. Con il pulsante Tipo di elemento selezionato, fare clic su Aggiungi per aggiungere un pulsante. Modificare Caption (Didascalia) in , ID in &New, Image (ID_FILE_NEW0Immagine grande) in 0.
2. Fare clic su Aggiungi per aggiungere un pulsante. Modificare Didascalia in , ID in &SaveID_FILE_SAVE, Immagine in 2e Immagine grande in 2.
3. Fare clic su Aggiungi per aggiungere un pulsante. Modificare Didascalia in , ID in Save &AsID_FILE_SAVE_AS, Immagine in 3e Immagine grande in 3.
4. Fare clic su Aggiungi per aggiungere un pulsante. Modificare Didascalia in , ID in &PrintID_FILE_PRINT, Immagine in 4e Immagine grande in 4.
5. Modificare il tipo di elemento in Separatore e quindi fare clic su Aggiungi.
6. Modificare il tipo di elemento in Button. Fare clic su Aggiungi per aggiungere un quinto pulsante. Modificare Didascalia in , ID in &CloseID_FILE_CLOSE, Immagine in 5e Immagine grande in 5.
Le modifiche seguenti creano un sottomenu sotto il pulsante Stampa creato nel passaggio precedente.
1. Fare clic sul pulsante Stampa, modificare il tipo di elemento in Etichetta e quindi fare clic su Inserisci. Modificare Caption (Didascalia) in Preview and print the document.
2. Fare clic sul pulsante Stampa, modificare il tipo di elemento su Pulsante e fare clic su Inserisci. Modificare Didascalia in , ID in &PrintID_FILE_PRINT, Immagine in 4e Immagine grande in 4.
3. Fare clic sul pulsante Stampa e quindi su Inserisci per aggiungere un pulsante. Modificare Didascalia in , ID in &Quick PrintID_FILE_PRINT_DIRECT, Immagine in 7e Immagine grande in 7.
4. Fare clic sul pulsante Stampa e quindi su Inserisci per aggiungere un altro pulsante. Modificare Didascalia in , ID in Print Pre&viewID_FILE_PRINT_PREVIEW, Immagine in 6e Immagine grande in 6.
5. Sono stati modificati gli elementi principali. Fare clic su Chiudi per uscire dall'Editor elementi.
La modifica seguente crea un pulsante di uscita visualizzato nella parte inferiore del menu pulsante Applicazione .
1. Scegliere la scheda Visualizzazione risorse in Esplora soluzioni.
2. Nella finestra Proprietà fare clic sui puntini di sospensione (...) accanto a Pulsante per aprire l'Editor elementi.
3. Con il pulsante Tipo di elemento selezionato, fare clic su Aggiungi per aggiungere un pulsante. Modificare Didascalia in E&xit, ID in ID_APP_EXIT, Immagine in 8.
4. Hai modificato i pulsanti. Fare clic su Chiudi per uscire dall'Editor elementi.

Creazione di un'istanza della barra multifunzione

Nei passaggi seguenti viene illustrato come creare un'istanza della barra multifunzione quando si avvia l'applicazione. Per aggiungere una barra multifunzione a un'applicazione, dichiarare la barra multifunzione nel file mainfrm.h. Quindi, nel file mainfrm.cpp, scrivere il codice per caricare la risorsa barra multifunzione.

Per creare un'istanza della barra multifunzione

Nel file mainfrm.h aggiungere un membro dati alla sezione protetta di CMainFrame, la definizione della classe per la cornice principale. Questo membro è per la barra multifunzione.
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```
Nel file mainfrm.cpp aggiungere il seguente codice prima dell'istruzione finale return alla fine della funzione CMainFrame::OnCreate. Crea un'istanza della barra multifunzione.
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);
```

Personalizzazione della risorsa della barra multifunzione

Dopo aver creato il pulsante Applicazione , è possibile aggiungere elementi alla barra multifunzione.

Nota

In questa procedura dettagliata viene utilizzata la stessa icona di pannello per tutti i pannelli. Tuttavia, è possibile utilizzare altri indici dell'elenco di immagini per visualizzare altre icone.

Per aggiungere una categoria Home e un pannello Modifica

Il programma Scribble richiede solo una categoria. Nella visualizzazione Struttura fare doppio clic su Categoria nella casella degli strumenti per aggiungerne una e visualizzarne le proprietà. Modificare i valori delle proprietà come indicato di seguito: Didascalia in &Home, Immagini di grandi dimensioni in IDB_RIBBON_HOMELARGE, Immagini di piccole dimensioni in IDB_RIBBON_HOMESMALL.
Ogni categoria della barra multifunzione è organizzata in pannelli, ciascuno dei quali dispone di un nome. Ogni pannello contiene un set di controlli che completano le operazioni correlate. Questa categoria dispone di un solo pannello. Fare clic su Pannello e quindi modificare Caption (Didascalia) in Edit.
Nel pannello Modifica aggiungere un pulsante responsabile della cancellazione del contenuto del documento. L'ID del messaggio per questo pulsante è già stato definito nella risorsa di IDR_SCRIBBTYPE menu. Specificare Clear All come testo del pulsante e l'indice della bitmap che decora il pulsante. Aprire la casella degli strumenti e quindi trascinare un pulsante nel pannello Modifica . Fare clic sul pulsante e quindi impostare Caption su Clear All, ID su ID_EDIT_CLEAR_ALL, Image Index su 0, Large Image Index su 0.
Salvare le modifiche, quindi compilare ed eseguire l'applicazione. Verrà visualizzata l'applicazione Scribble con una barra multifunzione nella parte superiore della finestra al posto della barra dei menu. La barra multifunzione deve avere una categoria, Home e Home deve avere un pannello, Modifica. I pulsanti della barra multifunzione aggiunti devono essere associati ai gestori eventi esistenti e i pulsanti Apri, Chiudi, Salva, Stampa e Cancella tutti dovrebbero funzionare come previsto.

Impostazione dell'aspetto dell'applicazione

Un gestore visivo è un oggetto globale che controlla tutto il disegno per un'applicazione. Dal momento che l'applicazione originale Scribble utilizza lo stile dell'interfaccia utente (UI) di Office 2000, l'aspetto dell'applicazione potrebbe risultare datato. È possibile reimpostare l'applicazione in modo che utilizzi il gestore visualizzazione di Office 2007 e che risulti simile a un'applicazione di Office 2007.

Per impostare l'aspetto dell'applicazione

CMainFrame::OnCreate Nella funzione digitare il codice seguente prima dell'istruzione return 0; per modificare il gestore di oggetti visivi e lo stile predefiniti.

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

Salvare le modifiche, quindi compilare ed eseguire l'applicazione. L'interfaccia utente dell'applicazione dovrebbe essere simile all'interfaccia utente di Office 2007.

Passaggi successivi

È stato modificato l'esempio MFC classico Scribble 1.0 per usare La finestra di progettazione della barra multifunzione. Ora vai alla Parte 2.

Vedi anche

Procedure dettagliate
Procedura dettagliata: aggiornamento dell'applicazione MFC Scribble (parte 2)

Condividi tramite