Procédure pas à pas : organiser le contenu WPF sur Windows Forms au moment du design

  • Article

Cet article explique comment utiliser les fonctionnalités de disposition Windows Forms, telles que l’ancrage et les lignes d’ancrage, pour organiser les contrôles WPF (Windows Presentation Foundation).

Prérequis

Cette procédure pas à pas nécessite Visual Studio.

Créer le projet

Ouvrez Visual Studio et créez un projet d’application Windows Forms dans Visual Basic ou Visual C# nommé ArrangeElementHost.

Remarque

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

Créer le contrôle WPF

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

  1. Ajoutez un nouveau UserControl WPF au projet. 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 Windows Forms au moment du design.

  2. En mode Design, assurez-vous que UserControl1 est sélectionné.

  3. Dans la fenêtre Propriétés, définissez la valeur des Width propriétés sur Height 200.

  4. Définissez la valeur de la Background propriété sur Blue.

  5. Créez le projet.

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

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

  1. Ouvrez Form1 dans le Concepteur Windows Forms.

  2. Dans la boîte à outils, faites glisser un TableLayoutPanel contrôle sur le formulaire.

  3. Dans le TableLayoutPanel panneau d’étiquettes actives du contrôle, sélectionnez Supprimer la dernière ligne.

  4. Augmentez la largeur et la hauteur du contrôle TableLayoutPanel.

  5. Dans la boîte à outils, double-cliquez UserControl1 pour créer une instance de UserControl1 la première cellule du TableLayoutPanel contrôle.

    L'instance de UserControl1 est hébergée dans un nouveau contrôle ElementHost nommé elementHost1.

  6. Dans la boîte à outils, double-cliquez UserControl1 pour créer une autre instance dans la deuxième cellule du TableLayoutPanel contrôle.

  7. Dans la fenêtre Plan du document, sélectionnez tableLayoutPanel1.

  8. Dans la fenêtre Propriétés , définissez la valeur de la Padding propriété sur 10, 10, 10, 10.

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

Utiliser des lignes d’alignement pour aligner les contrôles WPF

Les lignes d'alignement permettent d'aligner facilement les contrôles sur un formulaire. Vous pouvez aussi utiliser des lignes d'alignement pour aligner vos contrôles WPF. Pour plus d’informations, consultez Procédure pas à pas : organiser des contrôles sur Windows Forms à l’aide de lignes d’alignement.

  1. À partir de la boîte à outils, faites glisser une instance du UserControl1 formulaire et placez-la dans l’espace sous le TableLayoutPanel contrôle.

    L'instance de UserControl1 est hébergée dans un nouveau contrôle ElementHost nommé elementHost3.

  2. À l'aide des lignes d'alignement, alignez le bord gauche de elementHost3 avec le bord gauche du contrôle TableLayoutPanel.

  3. À l'aide des lignes d'alignement, affectez à elementHost3 la même largeur que celle du contrôle TableLayoutPanel.

  4. Déplacez elementHost3 vers le contrôle TableLayoutPanel jusqu'à ce qu'une ligne d'alignement centrale apparaisse entre les contrôles.

  5. Dans la fenêtre Propriétés , définissez la valeur de la propriété Margin sur 20, 20, 20, 20, 20.

  6. Déplacez le elementHost3 hors du contrôle TableLayoutPanel jusqu'à ce que la ligne d'alignement centrale réapparaisse. La ligne d'alignement centrale indique maintenant une marge de 20.

  7. Se déplacer elementHost3 vers la droite jusqu’à ce que son bord gauche s’aligne avec le bord gauche de elementHost1.

  8. Modifiez la largeur de elementHost3 jusqu'à ce que son bord droit soit aligné avec le bord droit de elementHost2.

Ancrer et ancrer des 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.

  1. Sélectionnez elementHost1.

  2. Dans la fenêtre Propriétés , définissez la Anchor propriété sur Top, Bottom, Left, Right.

  3. Agrandissez le contrôle TableLayoutPanel.

    Le contrôle elementHost1 est redimensionné pour remplir la cellule.

  4. Sélectionnez elementHost2.

  5. Dans la fenêtre Propriétés , définissez la valeur de la Dock propriété sur Fill.

    Le contrôle elementHost2 est redimensionné pour remplir la cellule.

  6. Sélectionnez le contrôle TableLayoutPanel.

  7. Affectez à sa propriété Dock la valeur Top.

  8. Sélectionnez elementHost3.

  9. Affectez à sa propriété Dock la valeur Fill.

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

  10. Redimensionnez le formulaire.

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

    Pour plus d’informations, consultez Guide pratique pour ancrer et ancrer des contrôles enfants dans un contrôle TableLayoutPanel.

Voir aussi