Procédure pas à pas : réorganisation du contenu WPF sur les Windows Forms au moment du design

Article
08/10/2011

Cette procédure pas à pas indique comment utiliser les fonctionnalités de disposition Windows Forms, telles que l'ancrage et les lignes d'alignement (SnapLines), pour réorganiser les contrôles WPF (Windows Presentation Foundation).

Dans cette procédure pas à pas, vous allez effectuer les tâches suivantes :

créer le projet ;
créer le contrôle WPF ;
héberger des contrôles WPF dans un panneau de disposition ;
utiliser des lignes d'alignement (SnapLines) pour aligner des contrôles WPF ;
ancrer des contrôles WPF.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

Visual Studio 2010.

Création du projet

La première étape consiste à créer le projet Windows Forms.

Notes

Lors de l'hébergement du contenu WPF, seuls les projets C# et Visual Basic sont pris en charge.

Pour créer le projet

Créez un projet Application Windows Forms dans Visual Basic ou Visual C# nommé ArrangeElementHost. Pour plus d'informations, consultez Comment : créer un projet d'Application Windows Forms.

Création du contrôle WPF

Après avoir ajouté un contrôle WPF au projet, vous pouvez le réorganiser sur le formulaire.

Pour créer des contrôles WPF

Ajoutez un nouveau composant au projet UserControl. Utilisez le nom par défaut pour le type de contrôle, UserControl1.xaml. Pour plus d'informations, consultez Procédure pas à pas : création de contenu WPF sur les Windows Forms au moment du design.
En mode Design, assurez-vous que UserControl1 est sélectionné. Pour plus d'informations, consultez Comment : sélectionner et déplacer des éléments sur l'aire de conception.
Dans la fenêtre Propriétés, affectez aux propriétés Width et Height la valeur 200.
Affectez la valeur Bleu à la propriété Background.
Générez le projet.

Hébergement des contrôles WPF dans un panneau de disposition

Vous pouvez utiliser des contrôles WPF dans les panneaux de disposition de la même façon vous utilisez d'autres contrôles Windows Forms.

Pour héberger des contrôles WPF dans un panneau de disposition

Ouvrez Form1 dans le Concepteur Windows Forms.
Dans la Boîte à outils, faites glisser un contrôle TableLayoutPanel jusqu'au formulaire.
Sur le panneau des balises actives du contrôle TableLayoutPanel, sélectionnez Supprimer la dernière ligne.
Redimensionnez le contrôle TableLayoutPanel en lui donnant une plus grande largeur et hauteur.
Dans la Boîte à outils, double-cliquez sur UserControl1 pour créer une instance d'UserControl1 dans la première cellule du contrôle TableLayoutPanel.

L'instance de UserControl1 est hébergée dans un nouveau contrôle ElementHost nommé elementHost1.
Dans la Boîte à outils, double-cliquez sur UserControl1 pour créer une autre instance dans la deuxième cellule du contrôle TableLayoutPanel.
Dans la fenêtre Structure du document, sélectionnez tableLayoutPanel1. Pour plus d'informations, consultez Structure du document, fenêtre.
Dans la fenêtre Propriétés, affectez à la propriété Padding la valeur 10, 10, 10, 10.

Les deux contrôles ElementHost sont redimensionnés pour s'ajuster dans la nouvelle disposition.

Utilisation des lignes d'alignement (SnapLines) pour aligner des contrôles WPF

Les lignes d'alignement (SnapLines) facilitent l'alignement des contrôles sur un formulaire. Vous pouvez utiliser des lignes d'alignement (Snaplines) pour aligner également vos contrôles WPF. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide des lignes d'alignement (SnapLines).

Pour utiliser des lignes d'alignement (SnapLines) pour aligner des contrôles WPF

Dans la Boîte à outils, faites glisser une instance de UserControl1 sur le formulaire et placez-la dans l'espace sous le contrôle TableLayoutPanel.

L'instance de UserControl1 est hébergée dans un nouveau contrôle ElementHost nommé elementHost3.
À l'aide des lignes d'alignement (Snaplines), alignez le bord gauche de elementHost3 avec le bord gauche du contrôle TableLayoutPanel.
À l'aide des lignes d'alignement (Snaplines), donnez à elementHost3 la même largeur que le contrôle TableLayoutPanel.
Déplacez elementHost3 vers le contrôle TableLayoutPanel jusqu'à ce qu'une ligne d'alignement (Snapline) de centre apparaisse entre les contrôles.
Dans la fenêtre Propriétés, affectez à la propriété Margin la valeur 20, 20, 20, 20.
Déplacez l'elementHost3 en l'éloignant du contrôle TableLayoutPanel jusqu'à ce que la ligne d'alignement (Snapline) de centre réapparaisse. La ligne d'alignement (Snapline) de centre indique maintenant une marge de 20.
Déplacez elementHost3 vers la droite, jusqu'à ce que son bord gauche s'aligne avec le bord gauche de elementHost1.
Modifiez la largeur de elementHost3 jusqu'à ce que son bord droit s'aligne avec le bord droit de elementHost2.

Ancrage de contrôles WPF

Un contrôle WPF hébergé sur un formulaire a le même comportement d'ancrage que d'autres contrôles Windows Forms.

Pour ancrer des contrôles WPF

Sélectionnez elementHost1.
Dans la fenêtre Propriétés, attribuez à la propriété Anchor la valeur Top, Bottom, Left, Right.
Redimensionnez le contrôle TableLayoutPanel en lui donnant une plus grande taille.

Le contrôle elementHost1 est redimensionné pour remplir la cellule.
Sélectionnez elementHost2.
Dans la fenêtre Propriétés, affectez à la propriété Dock la valeur Fill.

Le contrôle elementHost2 est redimensionné pour remplir la cellule.
Sélectionnez le contrôle TableLayoutPanel.
Affectez la valeur Top à sa propriété Dock.
Sélectionnez elementHost3.
Affectez la valeur Fill à sa propriété Dock.

Le contrôle elementHost3 est redimensionné pour remplir l'espace restant sur le formulaire.
Redimensionnez le formulaire.

Tous les trois contrôles ElementHost sont redimensionnés correctement.

Pour plus d'informations, consultez Comment : ancrer et arrimer des contrôles enfants dans un contrôle TableLayoutPanel.

Voir aussi

Partager via