Procédure pas à pas : mise à jour de l’application Scribble MFC (partie 1)

Article
10/12/2023

Cette procédure pas à pas montre comment modifier une application MFC existante pour utiliser l’interface utilisateur du ruban. Visual Studio prend en charge le ruban Bureau 2007 et le ruban panoramique Windows 7. Pour plus d’informations sur l’interface utilisateur du ruban, consultez Rubans.

Cette procédure pas à pas modifie l’exemple MFC Scribble 1.0 classique qui vous permet d’utiliser la souris pour créer des dessins de traits. Cette partie de la procédure pas à pas montre comment modifier l’exemple Scribble afin qu’il affiche une barre de ruban. La partie 2 ajoute d’autres boutons à la barre du ruban.

Prérequis

Exemple MFC Scribble 1.0. Pour obtenir de l’aide sur la conversion en Visual Studio 2017 ou version ultérieure, consultez le Guide de portage : Scribble MFC.

Sections

Cette partie de la procédure pas à pas comporte les sections suivantes :

Remplacement des classes de base
Ajout de bitmaps au projet
Ajout d’une ressource de ruban au projet
Création d’une instance de la barre de ruban
Ajout d’une catégorie de ruban
Définition de l’apparence de l’application

Remplacement des classes de base

Pour convertir une application qui prend en charge un menu en application prenant en charge un ruban, vous devez dériver les classes d’application, de fenêtre frame et de barre d’outils à partir de classes de base mises à jour. (Nous vous suggérons de ne pas modifier l’exemple Scribble d’origine. Au lieu de cela, propre le projet Scribble, copiez-le dans un autre répertoire, puis modifiez la copie.)

Pour remplacer les classes de base dans l’application Scribble

Dans scribble.cpp, vérifiez qu’il CScribbleApp::InitInstance inclut un appel à AfxOleInit.
Ajoutez le code suivant au fichier pch.h (stdafx.h dans Visual Studio 2017 et versions antérieures) :
```
#include <afxcontrolbars.h>
```
Dans scribble.h, modifiez la définition de la CScribbleApp classe afin qu’elle soit dérivée de la classe CWinAppEx.
```
class CScribbleApp: public CWinAppEx
```
Scribble 1.0 a été écrit lorsque les applications Windows utilisaient un fichier d’initialisation (.ini) pour enregistrer les données de préférence utilisateur. Au lieu d’un fichier d’initialisation, modifiez Scribble pour stocker les préférences utilisateur dans le Registre. Pour définir la clé de Registre et la base, tapez le code suivant après CScribbleApp::InitInstance l’instruction LoadStdProfileSettings() .
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
Le cadre principal d’une application MDI (Multiple Document Interface) n’est plus dérivé de la CMDIFrameWnd classe. Au lieu de cela, elle est dérivée de la classe CMDIFrameWndEx .

Dans les fichiers mainfrm.h et mainfrm.cpp, remplacez toutes les références par CMDIFrameWnd CMDIFrameWndEx.
Dans les fichiers childfrm.h et childfrm.cpp, remplacez CMDIChildWnd par CMDIChildWndEx.

Dans le childfrm. fichier h, remplacer CSplitterWnd par CSplitterWndEx.
Modifiez les barres d’outils et les barres d’état pour utiliser les nouvelles classes MFC.

Dans le fichier mainfrm.h :
1. Remplacez CToolBar par CMFCToolBar.
2. Remplacez CStatusBar par CMFCStatusBar.
Dans le fichier mainfrm.cpp :
1. Remplacer m_wndToolBar.SetBarStyle par m_wndToolBar.SetPaneStyle
2. Remplacer m_wndToolBar.GetBarStyle par m_wndToolBar.GetPaneStyle
3. Remplacer DockControlBar(&m_wndToolBar) par DockPane(&m_wndToolBar)

Dans le fichier ipframe.cpp, commentez les trois lignes de code suivantes.

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

Enregistrez les modifications, puis générez et exécutez l’application.

Ajout de bitmaps au projet

Les quatre étapes suivantes de cette procédure pas à pas nécessitent des ressources bitmap. Vous pouvez obtenir les bitmaps appropriées de différentes façons :

Utilisez les éditeurs de ressources pour inventer vos propres bitmaps. Vous pouvez également utiliser les éditeurs de ressources pour assembler des bitmaps à partir des images portables graphe réseau ics (.png) incluses dans Visual Studio et qui peuvent être téléchargées à partir de la bibliothèque d’images Visual Studio.

Toutefois, l’interface utilisateur du ruban nécessite que certaines bitmaps prennent en charge des images transparentes. Les bitmaps transparentes utilisent des pixels 32 bits, où 24 bits spécifient les composants rouge, vert et bleu de la couleur, et 8 bits définissent un canal alpha qui spécifie la transparence de la couleur. Les éditeurs de ressources actuels peuvent afficher, mais pas modifier des bitmaps avec des pixels 32 bits. Par conséquent, utilisez un éditeur d’images externe au lieu des éditeurs de ressources pour manipuler des bitmaps transparentes.
Copiez un fichier de ressources approprié d’une autre application dans votre projet, puis importez des bitmaps à partir de ce fichier.

Cette procédure pas à pas copie les fichiers de ressources de l’exemple créé dans La procédure pas à pas : création d’une application de ruban à l’aide de MFC.

Pour ajouter des bitmaps au projet

Utilisez Explorateur de fichiers pour copier les fichiers .bmp suivants à partir du répertoire des ressources (res) de l’exemple de ruban vers le répertoire de ressources (res) du projet Scribble :
1. Copiez main.bmp dans votre projet Scribble.
2. Copiez filesmall.bmp et filelarge.bmp dans votre projet Scribble.
3. Créez de nouvelles copies des fichiers filelarge.bmp et filesmall.bmp, mais enregistrez les copies dans l’exemple de ruban. Renommez les copies homemall.bmp et homelarge.bmp, puis déplacez les copies vers votre projet Scribble.
4. Effectuez une copie du fichier toolbar.bmp, mais enregistrez la copie dans l’exemple de ruban. Renommez le panelicons.bmp de copie, puis déplacez la copie vers votre projet Scribble.
Importez la bitmap pour une application MFC. Dans l’affichage des ressources, double-cliquez sur le nœud scribble.rc , double-cliquez sur le nœud Bitmap , puis cliquez sur Ajouter une ressource. Dans la boîte de dialogue qui s’affiche, cliquez sur Importer. Accédez au res répertoire, sélectionnez le fichier main.bmp, puis cliquez sur Ouvrir.

La bitmap main.bmp contient une image 26x26. Remplacez l’ID de la bitmap par IDB_RIBBON_MAIN.
Importez les bitmaps pour le menu fichier attaché au bouton Application .
1. Importez le fichier filesmall.bmp, qui contient onze images 16 x 16 (16 x 176). Remplacez l’ID de la bitmap par IDB_RIBBON_FILESMALL.
Remarque

Comme nous n’avons besoin que des huit premières images 16 x 16 (16x128), vous pouvez éventuellement rogner la largeur droite de cette bitmap de 176 à 128.
1. Importez le filelarge.bmp, qui contient neuf images 32 x 32 (32 x 288). Remplacez l’ID de la bitmap par IDB_RIBBON_FILELARGE.
Importez les bitmaps pour les catégories et panneaux du ruban. Chaque onglet de la barre de ruban est une catégorie et se compose d’une étiquette de texte et d’une image facultative.
1. Importez la bitmap homesmall.bmp, qui contient onze images 16 x 16 pour les images bitmap de petits boutons. Remplacez l’ID de la bitmap par IDB_RIBBON_HOMESMALL.
2. Importez la bitmap homelarge.bmp, qui contient neuf images 32 x 32 pour les bitmaps de boutons volumineux. Remplacez l’ID de la bitmap par IDB_RIBBON_HOMELARGE.
Importez des bitmaps pour les panneaux de ruban redimensionnés. Ces bitmaps, ou icônes de panneau, sont utilisées après une opération de redimensionnement si le ruban est trop petit pour afficher l’intégralité du panneau.
1. Importez la bitmap panelicons.bmp, qui contient huit images 16 x 16. Dans la fenêtre Propriétés de l’éditeur bitmap, ajustez la largeur de la bitmap à 64 (16 x 64). Remplacez l’ID de la bitmap par IDB_PANEL_ICONS.
Remarque

Étant donné que nous n’avons besoin que des quatre premières images 16 x 16 (16x64), vous pouvez éventuellement rogner la largeur droite de cette bitmap de 128 à 64.

Ajout d’une ressource de ruban au projet

Lorsque vous convertissez une application qui utilise des menus en une application qui utilise un ruban, vous n’avez pas besoin de supprimer ou de désactiver les menus existants. Créez simplement une ressource de ruban, ajoutez des boutons de ruban, puis associez les nouveaux boutons aux éléments de menu existants. Bien que les menus ne soient plus visibles, les messages de la barre du ruban sont routés via les menus et les raccourcis de menu continuent de fonctionner.

Un ruban se compose du bouton Application , qui est le grand bouton situé en haut à gauche du ruban et d’un ou plusieurs onglets de catégorie. Chaque onglet catégorie contient un ou plusieurs panneaux qui agissent en tant que conteneurs pour les boutons et contrôles du ruban. La procédure suivante montre comment créer une ressource de ruban, puis personnaliser le bouton Application .

Pour ajouter une ressource de ruban au projet

Lorsque le projet Scribble est sélectionné dans Explorateur de solutions, dans le menu Projet, cliquez sur Ajouter une ressource.
Dans la boîte de dialogue Ajouter une ressource , sélectionnez Ruban , puis cliquez sur Nouveau.

Visual Studio crée une ressource de ruban et l’ouvre en mode Création. L’ID de ressource du ruban est IDR_RIBBON1, qui s’affiche en mode Ressource. Le ruban contient une catégorie et un panneau.
Vous pouvez personnaliser le bouton Application en modifiant ses propriétés. Les ID de message utilisés dans ce code sont déjà définis dans le menu pour Scribble 1.0.
Dans l’affichage création, cliquez sur le bouton Application pour afficher ses propriétés. Modifiez les valeurs de propriété comme suit : Image en IDB_RIBBON_MAIN, Invite à File, Clés vers f, Images volumineuses IDB_RIBBON_FILELARGEvers et Petites Images vers IDB_RIBBON_FILESMALL.
Les modifications suivantes créent le menu qui s’affiche lorsque l’utilisateur clique sur le bouton Application . Cliquez sur les points de suspension (...) en regard des éléments principaux pour ouvrir l’éditeur d’éléments.
1. Lorsque le bouton Type d’élément est sélectionné, cliquez sur Ajouter pour ajouter un bouton. Modifiez la légende en &New, l’ID en ID_FILE_NEW, l’image en 0image de grande taille 0.
2. Cliquez sur Ajouter pour ajouter un bouton. Remplacez la légende &Savepar , l’ID par ID_FILE_SAVE, l’image par et l’image 2de grande taille 2.
3. Cliquez sur Ajouter pour ajouter un bouton. Remplacez la légende Save &Aspar , l’ID par ID_FILE_SAVE_AS, l’image par et l’image 3de grande taille 3.
4. Cliquez sur Ajouter pour ajouter un bouton. Remplacez la légende &Printpar , l’ID par ID_FILE_PRINT, l’image par et l’image 4de grande taille 4.
5. Remplacez le type d’élément par Séparateur, puis cliquez sur Ajouter.
6. Remplacez le type d’élément par Button. Cliquez sur Ajouter pour ajouter un cinquième bouton. Remplacez la légende &Closepar , l’ID par ID_FILE_CLOSE, l’image par et l’image 5de grande taille 5.
Les modifications suivantes créent un sous-menu sous le bouton Imprimer que vous avez créé à l’étape précédente.
1. Cliquez sur le bouton Imprimer, remplacez le type d’élément par Étiquette, puis cliquez sur Insérer. Remplacez la légende par Preview and print the document.
2. Cliquez sur le bouton Imprimer, remplacez le type d’élément par Bouton, puis cliquez sur Insérer. Remplacez la légende &Printpar , l’ID par ID_FILE_PRINT, l’image par et l’image 4de grande taille 4.
3. Cliquez sur le bouton Imprimer , puis cliquez sur Insérer pour ajouter un bouton. Remplacez la légende &Quick Printpar , l’ID par ID_FILE_PRINT_DIRECT, l’image par et l’image 7de grande taille 7.
4. Cliquez sur le bouton Imprimer , puis sur Insérer pour ajouter un autre bouton. Remplacez la légende Print Pre&viewpar , l’ID par ID_FILE_PRINT_PREVIEW, l’image par et l’image 6de grande taille 6.
5. Vous avez maintenant modifié les éléments principaux. Cliquez sur Fermer pour quitter l’éditeur d’éléments.
La modification suivante crée un bouton de sortie qui apparaît en bas du menu du bouton Application .
1. Choisissez l’onglet Affichage des ressources dans Explorateur de solutions.
2. Dans la fenêtre Propriétés, cliquez sur les points de suspension (...) en regard du bouton pour ouvrir l’éditeur d’éléments.
3. Lorsque le bouton Type d’élément est sélectionné, cliquez sur Ajouter pour ajouter un bouton. Remplacez la légende par E&xit, ID par ID_APP_EXIT, Image par 8.
4. Vous avez modifié les boutons. Cliquez sur Fermer pour quitter l’éditeur d’éléments.

Création d’une instance de la barre de ruban

Les étapes suivantes montrent comment créer une instance de la barre de ruban au démarrage de votre application. Pour ajouter une barre de ruban à une application, déclarez la barre du ruban dans le fichier mainfrm.h. Ensuite, dans le fichier mainfrm.cpp, écrivez du code pour charger la ressource du ruban.

Pour créer une instance de la barre de ruban

Dans le fichier mainfrm.h, ajoutez un membre de données à la section protégée de , la définition de CMainFrameclasse pour le frame principal. Ce membre concerne la barre du ruban.
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```
Dans le fichier mainfrm.cpp, ajoutez le code suivant avant l’instruction finale return à la fin de la CMainFrame::OnCreate fonction. Il crée une instance de la barre de ruban.
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);
```

Personnalisation de la ressource du ruban

Maintenant que vous avez créé le bouton Application , vous pouvez ajouter des éléments au ruban.

Remarque

Cette procédure pas à pas utilise la même icône de panneau pour tous les panneaux. Toutefois, vous pouvez utiliser d’autres index de liste d’images pour afficher d’autres icônes.

Pour ajouter une catégorie d’accueil et un panneau Modifier

Le programme Scribble ne nécessite qu’une seule catégorie. En mode Création, dans la boîte à outils, double-cliquez sur Catégorie pour en ajouter une et afficher ses propriétés. Modifiez les valeurs de propriété comme suit : Légende en , Images volumineuses IDB_RIBBON_HOMELARGEen , Petites images en IDB_RIBBON_HOMESMALL. &Home
Chaque catégorie de ruban est organisée en panneaux nommés. Chaque panneau contient un ensemble de contrôles qui terminent les opérations associées. Cette catégorie comporte un panneau. Cliquez sur Panneau, puis modifiez la légende en Edit.
Dans le panneau Modifier , ajoutez un bouton responsable de l’effacement du contenu du document. L’ID de message de ce bouton a déjà été défini dans la ressource de IDR_SCRIBBTYPE menu. Spécifiez Clear All le texte du bouton et l’index de la bitmap qui décore le bouton. Ouvrez la boîte à outils, puis faites glisser un bouton vers le panneau Édition . Cliquez sur le bouton, puis remplacez Légende Clear Allpar ID par ID_EDIT_CLEAR_ALL, Index d’image par 0, Index d’image de grande taille sur 0.
Enregistrez les modifications, puis générez et exécutez l’application. L’application Scribble doit être affichée et elle doit avoir une barre de ruban en haut de la fenêtre au lieu d’une barre de menus. La barre de ruban doit avoir une catégorie, Accueil et Accueil doit avoir un panneau, Modifier. Les boutons du ruban que vous avez ajoutés doivent être associés aux gestionnaires d’événements existants, et les boutons Ouvrir, Fermer, Enregistrer, Imprimer et Effacer tous doivent fonctionner comme prévu.

Définition de l’apparence de l’application

Un gestionnaire visuel est un objet global qui contrôle tous les dessins d’une application. Étant donné que l’application Scribble d’origine utilise le style d’interface utilisateur Bureau 2000, l’application peut ressembler à une ancienne mode. Vous pouvez réinitialiser l’application pour utiliser le gestionnaire visuel Bureau 2007 afin qu’elle ressemble à une application Bureau 2007.

Pour définir l’apparence de l’application

Dans la CMainFrame::OnCreate fonction, tapez le code suivant avant l’instruction return 0; pour modifier le gestionnaire de visuels et le style par défaut.

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

Enregistrez les modifications, puis générez et exécutez l’application. L’interface utilisateur de l’application doit ressembler à l’interface utilisateur Bureau 2007.

Étapes suivantes

Vous avez modifié l’exemple MFC Scribble 1.0 classique pour utiliser le Concepteur de ruban. Maintenant, passez à la partie 2.

Voir aussi

Procédures pas à pas
Procédure pas à pas : mise à jour de l’application Scribble MFC (partie 2)

Partager via