Procédure pas à pas : organisation des contrôles Windows Forms dans WPF

Cette procédure pas à pas vous montre comment utiliser les fonctionnalités de disposition WPF pour organiser des contrôles Windows Forms dans une application hybride.

Cette procédure pas à pas décrit notamment les tâches suivantes :

• Création du projet.
• Utilisation des paramètres de disposition par défaut
• Dimensionnement en fonction du contenu
• Utilisation du positionnement absolu
• Spécification explicite de la taille
• Définition des propriétés de disposition
• Présentation des limitations dans l’ordre de plan
• Ancrage
• Définition de la visibilité
• Hébergement d’un contrôle qui ne s’étire pas
• Mise à l’échelle.
• Rotation
• Définition d’une marge intérieure et de marges
• Utilisation de conteneurs de présentation dynamiques

Pour obtenir l’intégralité du code des tâches illustrées dans cette procédure pas à pas, consultez Exemple de disposition de contrôles Windows Forms dans WPF.

Lorsque vous avez terminé, vous aurez une compréhension des fonctionnalités de disposition Windows Forms dans les applications WPF.

Prérequis

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

Création du projet

Pour créer et configurer le projet, procédez comme suit :

1. Créez un projet d’application WPF nommé WpfLayoutHostingWf.

2. Dans Explorateur de solutions, ajoutez des références aux assemblys suivants :

   • WindowsFormsIntegration
   • System.Windows.Forms
   • System.Drawing

3. Double-cliquez sur MainWindow.xaml pour l’ouvrir en mode XAML.

4. Dans l’élément, ajoutez le mappage d’espace Window de noms Windows Forms suivant.

   xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
   

5. Dans l’élément Grid , définissez la ShowGridLines propriété sur true et définissez cinq lignes et trois colonnes.

   <Grid ShowGridLines="true">
     <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
     </Grid.RowDefinitions>
   
     <Grid.ColumnDefinitions>
       <ColumnDefinition/>
       <ColumnDefinition/>
       <ColumnDefinition/>
     </Grid.ColumnDefinitions>
   

Utilisation des paramètres de disposition par défaut

Par défaut, l’élément WindowsFormsHost gère la disposition du contrôle Windows Forms hébergé.

Pour utiliser les paramètres de disposition par défaut, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Default layout. -->
   <Canvas Grid.Row="0" Grid.Column="0">
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. Le contrôle Windows Forms System.Windows.Forms.Button apparaît dans le Canvas. Le contrôle hébergé est dimensionné en fonction de son contenu et l’élément WindowsFormsHost est dimensionné pour prendre en charge le contrôle hébergé.

Dimensionnement en fonction du contenu

L’élément WindowsFormsHost garantit que le contrôle hébergé est dimensionné pour afficher son contenu correctement.

Pour dimensionner le contenu, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Sizing to content. -->
   <Canvas Grid.Row="1" Grid.Column="0">
     <WindowsFormsHost Background="Orange">
       <wf:Button Text="Windows Forms control with more content" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   
   <Canvas Grid.Row="2" Grid.Column="0">
     <WindowsFormsHost FontSize="24" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. Les deux nouveaux contrôles de bouton sont dimensionnés pour afficher correctement la chaîne de texte plus longue et la taille de police supérieure, et les WindowsFormsHost éléments sont redimensionnés pour prendre en charge les contrôles hébergés.

Utilisation du positionnement absolu

Vous pouvez utiliser le positionnement absolu pour placer l’élément WindowsFormsHost n’importe où dans l’interface utilisateur.

Pour utiliser le positionnement absolu, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Absolute positioning. -->
   <Canvas Grid.Row="3" Grid.Column="0">
     <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control with absolute positioning" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost est placé à 20 pixels du côté supérieur de la cellule de grille et 20 pixels à partir de la gauche.

Spécification explicite de la taille

Vous pouvez spécifier la taille de l’élément WindowsFormsHost à l’aide des propriétés et Height des Width propriétés.

Pour spécifier explicitement la taille, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Explicit sizing. -->
   <Canvas Grid.Row="4" Grid.Column="0">
     <WindowsFormsHost Width="50" Height="70" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost est défini sur une taille de 50 pixels de large de 70 pixels de haut, ce qui est inférieur aux paramètres de disposition par défaut. Le contenu du contrôle Windows Forms est réorganisé en conséquence.

Définition des propriétés de disposition

Définissez toujours les propriétés liées à la disposition sur le contrôle hébergé à l’aide des propriétés de l’élément WindowsFormsHost . Si vous définissez les propriétés de disposition directement sur le contrôle hébergé, vous obtiendrez des résultats inattendus.

La définition des propriétés liées à la disposition sur le contrôle hébergé en XAML n’a aucun effet.

Pour afficher les effets de la définition des propriétés sur le contrôle hébergé, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Setting hosted control properties directly. -->
   <Canvas Grid.Row="0" Grid.Column="1">
     <WindowsFormsHost Width="160" Height="50" Background="Yellow">
       <wf:Button Name="button1" Click="button1_Click" Text="Click me" FlatStyle="Flat" BackColor="Green"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Dans Explorateur de solutions, double-cliquez sur MainWindow.xaml.vb ou MainWindow.xaml.cs pour l’ouvrir dans l’éditeur de code.

3. Copiez le code suivant dans la définition de MainWindow classe :

   private void button1_Click(object sender, EventArgs e )
   {
       System.Windows.Forms.Button b = sender as System.Windows.Forms.Button;
   
       b.Top = 20;
       b.Left = 20;
   }
   

   Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
       Dim b As System.Windows.Forms.Button = sender
   
       b.Top = 20
       b.Left = 20
   
   End Sub
   

4. Appuyez sur F5 pour générer et exécuter l’application.

5. Cliquez sur le bouton Cliquer sur moi . Le button1_Click gestionnaire d’événements définit les propriétés et Left les Top propriétés sur le contrôle hébergé. Cela entraîne le repositionnement du contrôle hébergé dans l’élément WindowsFormsHost . L’hôte conserve la même zone d’écran, mais le contrôle hébergé est découpé. Au lieu de cela, le contrôle hébergé doit toujours remplir l’élément WindowsFormsHost .

Présentation des limitations dans l’ordre de plan

Les éléments visibles WindowsFormsHost sont toujours dessinés au-dessus d’autres éléments WPF, et ils ne sont pas affectés par l’ordre de plan. Pour voir ce comportement z-order, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Z-order demonstration. -->
   <Canvas Grid.Row="1" Grid.Column="1">
     <WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     <Label Content="A WPF label" FontSize="24"/>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost est peint sur l’élément label.

Ancrage

WindowsFormsHost l’élément prend en charge l’ancrage WPF. Définissez la Dock propriété jointe pour ancrer le contrôle hébergé dans un DockPanel élément.

Pour ancrer un contrôle hébergé, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Docking a WindowsFormsHost element. -->
   <DockPanel LastChildFill="false"  Grid.Row="2" Grid.Column="1">
     <WindowsFormsHost DockPanel.Dock="Right"  Canvas.Top="20" Canvas.Left="20" Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </DockPanel>
   

2. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost est ancré à droite de l’élément DockPanel .

Définition de la visibilité

Vous pouvez rendre votre contrôle Windows Forms invisible ou le réduire en définissant la Visibility propriété sur l’élément WindowsFormsHost . Quand un contrôle est invisible, il n’est pas affiché, mais il occupe l’espace de disposition. Quand un contrôle est réduit, il n’est pas affiché et n’occupe pas l’espace de disposition.

Pour définir la visibilité d’un contrôle hébergé, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Setting Visibility to hidden and collapsed. -->
   <StackPanel Grid.Row="3" Grid.Column="1">
     <Button Name="button2" Click="button2_Click" Content="Click to make invisible" Background="OrangeRed"/>
     <WindowsFormsHost Name="host1"  Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     <Button Name="button3" Click="button3_Click" Content="Click to collapse" Background="OrangeRed"/>
   </StackPanel>
   

2. Dans MainWindow.xaml.vb ou MainWindow.xaml.cs, copiez le code suivant dans la définition de classe :

   private void button2_Click(object sender, EventArgs e)
   {
       this.host1.Visibility = Visibility.Hidden;
   }
   
   private void button3_Click(object sender, EventArgs e)
   {
       this.host1.Visibility = Visibility.Collapsed;
   }
   

   Private Sub button2_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
       Me.host1.Visibility = Windows.Visibility.Hidden
   End Sub
   
   
   Private Sub button3_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
       Me.host1.Visibility = Windows.Visibility.Collapsed
   End Sub
   

3. Appuyez sur F5 pour générer et exécuter l’application.

4. Cliquez sur le bouton Cliquer pour rendre invisible l’élément WindowsFormsHost invisible.

5. Cliquez sur le bouton Cliquer pour réduire complètement l’élément WindowsFormsHost de la disposition. Lorsque le contrôle Windows Forms est réduit, les éléments environnants sont réorganisés pour occuper son espace.

Hébergement d’un contrôle qui ne s’étire pas

Certains contrôles Windows Forms ont une taille fixe et ne s’étendent pas pour remplir l’espace disponible dans la disposition. Par exemple, le MonthCalendar contrôle affiche un mois dans un espace fixe.

Pour héberger un contrôle qui n’est pas étendu, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Hosting a control that does not stretch. -->
   <!-- The MonthCalendar has a discrete size. -->
   <StackPanel Grid.Row="4" Grid.Column="1">
     <Label Content="A WPF element" Background="OrangeRed"/>
     <WindowsFormsHost Background="Yellow">
       <wf:MonthCalendar/>
     </WindowsFormsHost>
     <Label Content="Another WPF element" Background="OrangeRed"/>
   </StackPanel>
   

2. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost est centré dans la ligne de grille, mais il n’est pas étiré pour remplir l’espace disponible. Si la fenêtre est suffisamment grande, vous pouvez voir deux mois ou plus affichés par le contrôle hébergé MonthCalendar , mais ceux-ci sont centrés dans la ligne. Le moteur de disposition WPF centre les éléments qui ne peuvent pas être dimensionnés pour remplir l’espace disponible.

Mise à l'échelle

Contrairement aux éléments WPF, la plupart des contrôles Windows Forms ne sont pas évolutifs en continu. Pour fournir une mise à l’échelle personnalisée, vous remplacez la WindowsFormsHost.ScaleChild méthode.

Pour mettre à l’échelle un contrôle hébergé à l’aide du comportement par défaut, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Scaling transformation. -->
   <StackPanel Grid.Row="0" Grid.Column="2">
     
     <StackPanel.RenderTransform>
       <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" />
     </StackPanel.RenderTransform>
   
     <Label Content="A WPF UIElement" Background="OrangeRed"/>
     
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
     
     <Label Content="Another WPF UIElement" Background="OrangeRed"/>
     
   </StackPanel>
   

2. Appuyez sur F5 pour générer et exécuter l’application. Le contrôle hébergé et ses éléments voisins sont mis à l’échelle par un facteur de 0,5. Toutefois, la police du contrôle hébergé n’est pas mise à l’échelle.

Rotation

Contrairement aux éléments WPF, les contrôles Windows Forms ne prennent pas en charge la rotation. L’élément WindowsFormsHost ne fait pas pivoter avec d’autres éléments WPF lorsqu’une transformation de rotation est appliquée. Toute valeur de rotation autre que 180 degrés déclenche l’événement LayoutError .

Pour voir l’effet de la rotation dans une application hybride, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Rotation transformation. -->
   <StackPanel Grid.Row="1" Grid.Column="2">
   
     <StackPanel.RenderTransform>
       <RotateTransform CenterX="200" CenterY="50" Angle="180" />
     </StackPanel.RenderTransform>
   
     <Label Content="A WPF element" Background="OrangeRed"/>
   
     <WindowsFormsHost Background="Yellow">
       <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
     </WindowsFormsHost>
   
     <Label Content="Another WPF element" Background="OrangeRed"/>
   
   </StackPanel>
   

2. Appuyez sur F5 pour générer et exécuter l’application. Le contrôle hébergé ne pivote pas, mais ses éléments voisins subissent une rotation de 180 degrés. Vous devrez peut-être redimensionner la fenêtre pour apercevoir les éléments.

Définition d’une marge intérieure et de marges

Le remplissage et les marges dans la disposition WPF sont similaires au remplissage et aux marges dans Windows Forms. Définissez simplement les propriétés et Margin les Padding propriétés sur l’élémentWindowsFormsHost.

Pour définir le remplissage et les marges d’un contrôle hébergé, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Padding. -->
   <Canvas Grid.Row="2" Grid.Column="2">
     <WindowsFormsHost Padding="0, 20, 0, 0" Background="Yellow">
       <wf:Button Text="Windows Forms control with padding" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

   <!-- Margin. -->
   <Canvas Grid.Row="3" Grid.Column="2">
     <WindowsFormsHost Margin="20, 20, 0, 0" Background="Yellow">
       <wf:Button Text="Windows Forms control with margin" FlatStyle="Flat"/>
     </WindowsFormsHost>
   </Canvas>
   

2. Appuyez sur F5 pour générer et exécuter l’application. Les paramètres de remplissage et de marge sont appliqués aux contrôles Windows Forms hébergés de la même façon qu’ils seront appliqués dans Windows Forms.

Utilisation de conteneurs de disposition dynamiques

Windows Forms fournit deux conteneurs de disposition dynamique et FlowLayoutPanelTableLayoutPanel. Vous pouvez également utiliser ces conteneurs dans les dispositions WPF.

Pour utiliser un conteneur de disposition dynamique, procédez comme suit :

1. Copiez le code XAML suivant dans l’élément Grid :

   <!-- Flow layout. -->
   <DockPanel Grid.Row="4" Grid.Column="2">
     <WindowsFormsHost Name="flowLayoutHost" Background="Yellow">
       <wf:FlowLayoutPanel/>
     </WindowsFormsHost>
   </DockPanel>
   

2. Dans MainWindow.xaml.vb ou MainWindow.xaml.cs, copiez le code suivant dans la définition de classe :

   private void InitializeFlowLayoutPanel()
   {
       System.Windows.Forms.FlowLayoutPanel flp =
           this.flowLayoutHost.Child as System.Windows.Forms.FlowLayoutPanel;
   
       flp.WrapContents = true;
   
       const int numButtons = 6;
   
       for (int i = 0; i < numButtons; i++)
       {
           System.Windows.Forms.Button b = new System.Windows.Forms.Button();
           b.Text = "Button";
           b.BackColor = System.Drawing.Color.AliceBlue;
           b.FlatStyle = System.Windows.Forms.FlatStyle.Flat;
   
           flp.Controls.Add(b);
       }
   }
   

   Private Sub InitializeFlowLayoutPanel()
       Dim flp As System.Windows.Forms.FlowLayoutPanel = Me.flowLayoutHost.Child
   
       flp.WrapContents = True
   
       Const numButtons As Integer = 6
   
       Dim i As Integer
       For i = 0 To numButtons
           Dim b As New System.Windows.Forms.Button()
           b.Text = "Button"
           b.BackColor = System.Drawing.Color.AliceBlue
           b.FlatStyle = System.Windows.Forms.FlatStyle.Flat
   
           flp.Controls.Add(b)
       Next i
   
   End Sub
   

3. Ajoutez un appel à la InitializeFlowLayoutPanel méthode dans le constructeur :

   public MainWindow()
   {
       InitializeComponent();
   
       this.InitializeFlowLayoutPanel();
   }
   

   Public Sub New()
       InitializeComponent()
   
       Me.InitializeFlowLayoutPanel()
   
   End Sub
   

4. Appuyez sur F5 pour générer et exécuter l’application. L’élément WindowsFormsHost remplit , DockPanelet FlowLayoutPanel organise ses contrôles enfants dans la valeur par défaut FlowDirection.

Voir aussi

• ElementHost
• WindowsFormsHost
• Concevoir en XAML dans Visual Studio
• Considérations sur la disposition de l’élément WindowsFormsHost
• Exemple d’organisation des contrôles Windows Forms dans WPF
• Procédure pas à pas : hébergement d'un contrôle composite Windows Forms dans WPF
• Procédure pas à pas : hébergement d’un contrôle composite WPF dans les Windows Forms