Procédure pas à pas : hébergement d'un contrôle composite WPF dans les Windows Forms

Windows Presentation Foundation (WPF) fournit un environnement riche pour la création d’applications. Toutefois, lorsque vous avez un investissement important dans le code Windows Forms, il peut être plus efficace d’étendre votre application Windows Forms existante avec WPF plutôt que de la réécrire à partir de zéro. Un scénario courant consiste à incorporer un ou plusieurs contrôles implémentés avec WPF dans votre application Windows Forms. Pour plus d’informations sur la personnalisation des contrôles WPF, consultez Personnalisation des contrôles.

Cette procédure pas à pas vous guide tout au long d’une application qui héberge un contrôle composite WPF pour effectuer une entrée de données dans une application Windows Forms. Le contrôle composite est empaqueté dans une DLL. Cette procédure générale peut être étendue à des applications et des contrôles plus complexes. Cette procédure pas à pas a été conçue pour être quasiment identique au niveau de l’apparence et de la fonctionnalité à Procédure pas à pas : hébergement d’un contrôle composite Windows Forms dans WPF. La principale différence est que le scénario d’hébergement est inversé.

La procédure pas à pas est divisée en deux sections. La première section décrit brièvement l’implémentation du contrôle composite WPF. La deuxième section décrit en détail comment héberger le contrôle composite dans une application Windows Forms, recevoir des événements du contrôle et accéder à certaines propriétés du contrôle.

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

  • Implémentation du contrôle composite WPF

  • Implémentation de l’application hôte Windows Forms

Pour obtenir le listing de code complet des tâches illustrées dans cette procédure pas à pas, consultez Hébergement d’un contrôle composite WPF dans Windows Forms, exemple.

Prérequis

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

Implémentation du contrôle composite WPF

Le contrôle composite WPF utilisé dans cet exemple est un formulaire de saisie de données simple qui prend le nom et l’adresse de l’utilisateur. Lorsque l’utilisateur clique sur l’un des deux boutons pour indiquer que la tâche est terminée, le contrôle déclenche un événement personnalisé pour retourner ces informations à l’hôte. L’illustration suivante montre le rendu du contrôle.

L’image suivante montre un contrôle composite WPF :

Screenshot that shows a simple WPF control.

Création du projet

Pour démarrer le projet :

  1. Lancez Visual Studio et ouvrez la boîte de dialogue Nouveau projet .

  2. En Visual C#, dans la catégorie Windows, sélectionnez le modèle Bibliothèque de contrôles utilisateur WPF.

  3. Nommez le nouveau projet MyControls.

  4. Pour l’emplacement, spécifiez un dossier de premier niveau au nom explicite, tel que WindowsFormsHostingWpfControl. Plus tard, vous placerez l’application hôte dans ce dossier.

  5. Cliquez sur OK pour créer le projet. Le projet par défaut contient un seul contrôle nommé UserControl1.

  6. Dans Explorateur de solutions, renommez UserControl1MyControl1en .

Votre projet doit comporter des références aux DLL système suivantes. Si l’une de ces DLL n’est pas incluse par défaut, ajoutez-la à votre projet.

  • PresentationCore

  • PresentationFramework

  • Système

  • WindowsBase

Création de l’interface utilisateur

L’interface utilisateur pour le contrôle composite est implémentée avec XAML (Extensible Application Markup Language). L’interface utilisateur de contrôle composite se compose de cinq TextBox éléments. Chaque TextBox élément a un élément associé TextBlock qui sert d’étiquette. Il existe deux Button éléments en bas, OK et Cancel. Lorsque l’utilisateur clique sur l’un de ces boutons, le contrôle déclenche un événement personnalisé pour retourner les informations à l’hôte.

Disposition de base

Les différents éléments d’interface utilisateur sont contenus dans un Grid élément. Vous pouvez utiliser Grid pour organiser le contenu du contrôle composite de la même façon que vous utiliseriez un Table élément en HTML. WPF a également un Table élément, mais Grid il est plus léger et mieux adapté aux tâches de disposition simples.

Le code XAML suivant montre la disposition de base. Ce code XAML définit la structure globale du contrôle en spécifiant le nombre de colonnes et de lignes dans l’élément Grid .

Dans MyControl1.xaml, remplacez le code XAML existant par le code XAML suivant.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="MyControls.MyControl1"
      Background="#DCDCDC"
      Width="375"
      Height="250"
      Name="rootElement"
      Loaded="Init">

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
</Grid>

Ajout d’éléments TextBlock et TextBox à la grille

Vous placez un élément d’interface utilisateur dans la grille en définissant les attributs et ColumnProperty les attributs de RowProperty l’élément sur le numéro de ligne et de colonne approprié. N’oubliez pas que la numérotation des lignes et des colonnes est de base zéro. Vous pouvez avoir un élément couvrant plusieurs colonnes en définissant son ColumnSpanProperty attribut. Pour plus d’informations sur les Grid éléments, consultez Créer un élément Grid.

Le code XAML suivant montre les éléments et TextBlock les éléments du TextBox contrôle composite avec leurs attributs et ColumnProperty leurs RowProperty attributs, qui sont définis pour placer les éléments correctement dans la grille.

Dans MyControl1.xaml, ajoutez le code XAML suivant dans l’élément Grid .

  <TextBlock Grid.Column="0"
        Grid.Row="0" 
        Grid.ColumnSpan="4"
        Margin="10,5,10,0"
        HorizontalAlignment="Center"
        Style="{StaticResource titleText}">Simple WPF Control</TextBlock>

  <TextBlock Grid.Column="0"
        Grid.Row="1"
        Style="{StaticResource inlineText}"
        Name="nameLabel">Name</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="1"
        Grid.ColumnSpan="3"
        Name="txtName"/>

  <TextBlock Grid.Column="0"
        Grid.Row="2"
        Style="{StaticResource inlineText}"
        Name="addressLabel">Street Address</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="2"
        Grid.ColumnSpan="3"
        Name="txtAddress"/>

  <TextBlock Grid.Column="0"
        Grid.Row="3"
        Style="{StaticResource inlineText}"
        Name="cityLabel">City</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="3"
        Width="100"
        Name="txtCity"/>

  <TextBlock Grid.Column="2"
        Grid.Row="3"
        Style="{StaticResource inlineText}"
        Name="stateLabel">State</TextBlock>
  <TextBox Grid.Column="3"
        Grid.Row="3"
        Width="50"
        Name="txtState"/>

  <TextBlock Grid.Column="0"
        Grid.Row="4"
        Style="{StaticResource inlineText}"
        Name="zipLabel">Zip</TextBlock>
  <TextBox Grid.Column="1"
        Grid.Row="4"
        Width="100"
        Name="txtZip"/>

Styles des éléments d’interface utilisateur

De nombreux éléments du formulaire de saisie de données ont une apparence semblable, ce qui signifie qu’ils ont des paramètres identiques pour plusieurs de leurs propriétés. Au lieu de définir séparément les attributs de chaque élément, le code XAML précédent utilise Style des éléments pour définir des paramètres de propriété standard pour les classes d’éléments. Cette approche réduit la complexité du contrôle et permet de modifier l’apparence de plusieurs éléments via un même attribut de style.

Les Style éléments sont contenus dans la propriété de l’élément GridResources , de sorte qu’ils peuvent être utilisés par tous les éléments du contrôle. Si un style est nommé, vous l’appliquez à un élément en ajoutant un Style jeu d’éléments au nom du style. Les styles qui ne sont pas nommés deviennent le style par défaut de l’élément. Pour plus d’informations sur les styles WPF, consultez Style et Création de modèles.

Le code XAML suivant montre les Style éléments du contrôle composite. Pour voir comment les styles sont appliqués aux éléments, reportez-vous au code XAML précédent. Par exemple, le dernier TextBlock élément a le inlineText style et le dernier TextBox élément utilise le style par défaut.

Dans MyControl1.xaml, ajoutez le code XAML suivant juste après l’élément Grid de démarrage.

<Grid.Resources>
  <Style x:Key="inlineText" TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="10,5,10,0"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="12"/>
  </Style>
  <Style x:Key="titleText" TargetType="{x:Type TextBlock}">
    <Setter Property="DockPanel.Dock" Value="Top"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="10,5,10,0"/>
  </Style>
  <Style TargetType="{x:Type Button}">
    <Setter Property="Margin" Value="10,5,10,0"/>
    <Setter Property="Width" Value="60"/>
  </Style>
  <Style TargetType="{x:Type TextBox}">
    <Setter Property="Margin" Value="10,5,10,0"/>
  </Style>
</Grid.Resources>

Ajout des boutons OK et Annuler

Les derniers éléments du contrôle composite sont les éléments OK et CancelButton , qui occupent les deux premières colonnes de la dernière ligne du Grid. Ces éléments utilisent un gestionnaire d’événements commun, ButtonClickedet le style par défaut Button défini dans le code XAML précédent.

Dans MyControl1.xaml, ajoutez le code XAML suivant après le dernier TextBox élément. La partie XAML du contrôle composite est maintenant terminée.

<Button Grid.Row="5"
        Grid.Column="0"
        Name="btnOK"
        Click="ButtonClicked">OK</Button>
<Button Grid.Row="5"
        Grid.Column="1"
        Name="btnCancel"
        Click="ButtonClicked">Cancel</Button>

Implémentation du fichier code-behind

Le fichier code-behind, MyControl1.xaml.cs, implémente trois tâches essentielles :

  1. La gestion de l’événement qui se produit lorsque l’utilisateur clique sur l’un des boutons

  2. Récupère les données des TextBox éléments et les empaquette dans un objet d’argument d’événement personnalisé.

  3. Déclenche l’événement personnalisé OnButtonClick , qui informe l’hôte que l’utilisateur est terminé et transmet les données à l’hôte.

Le contrôle expose également plusieurs propriétés de couleur et de police qui vous permettent de modifier l’apparence. Contrairement à la WindowsFormsHost classe, utilisée pour héberger un contrôle Windows Forms, la ElementHost classe expose uniquement la propriété du Background contrôle. Pour conserver les similarités entre cet exemple de code et l’exemple abordé dans Procédure pas à pas : hébergement d’un contrôle composite Windows Forms dans WPF, le contrôle expose directement les propriétés restantes.

Structure de base du fichier code-behind

Le fichier code-behind se compose d’un espace de noms unique, MyControlsqui contiendra deux classes et MyControl1MyControlEventArgs.

namespace MyControls  
{  
  public partial class MyControl1 : Grid  
  {  
    //...  
  }  
  public class MyControlEventArgs : EventArgs  
  {  
    //...  
  }  
}  

La première classe, MyControl1est une classe partielle contenant le code qui implémente les fonctionnalités de l’interface utilisateur définie dans MyControl1.xaml. Lorsque MyControl1.xaml est analysé, le code XAML est converti en même classe partielle et les deux classes partielles sont fusionnées pour former le contrôle compilé. Pour cette raison, le nom de classe du fichier code-behind doit correspondre à celui assigné à MyControl1.xaml, et il doit hériter de l’élément racine du contrôle. La deuxième classe, MyControlEventArgs, est une classe d’arguments d’événement utilisée pour renvoyer les données à l’hôte.

Ouvrez MyControl1.xaml.cs. Modifiez la déclaration de classe existante afin qu’elle ait le nom suivant et hérite de Grid.

public partial class MyControl1 : Grid

Initialisation du contrôle

Le code suivant implémente plusieurs tâches de base :

  • Déclare un événement privé, OnButtonClicket son délégué associé. MyControlEventHandler

  • Crée plusieurs variables globales privées qui stockent les données de l’utilisateur. Ces données sont exposées via les propriétés correspondantes.

  • Implémente un gestionnaire, Initpour l’événement du Loaded contrôle. Ce gestionnaire initialise les variables globales en leur assignant les valeurs définies dans MyControl1.xaml. Pour ce faire, il utilise l’affectation Name à un élément classique TextBlock , nameLabelpour accéder aux paramètres de propriété de cet élément.

Supprimez le constructeur existant et ajoutez le code suivant à votre MyControl1 classe.

public delegate void MyControlEventHandler(object sender, MyControlEventArgs args);
public event MyControlEventHandler OnButtonClick;
private FontWeight _fontWeight;
private double _fontSize;
private FontFamily _fontFamily;
private FontStyle _fontStyle;
private SolidColorBrush _foreground;
private SolidColorBrush _background;

private void Init(object sender, EventArgs e)
{
    //They all have the same style, so use nameLabel to set initial values.
    _fontWeight = nameLabel.FontWeight;
    _fontSize = nameLabel.FontSize;
    _fontFamily = nameLabel.FontFamily;
    _fontStyle = nameLabel.FontStyle;
    _foreground = (SolidColorBrush)nameLabel.Foreground;
    _background = (SolidColorBrush)rootElement.Background;
}

Gestion des événements de clic de bouton

L’utilisateur indique que la tâche de saisie de données est terminée en cliquant sur le bouton OK ou Annuler. Les deux boutons utilisent le même Click gestionnaire d’événements. ButtonClicked Les deux boutons ont un nom btnOK ou btnCancel, qui permet au gestionnaire de déterminer quel bouton a été cliqué en examinant la valeur de l’argument sender . Le gestionnaire fait ce qui suit :

  • Crée un MyControlEventArgs objet qui contient les données des TextBox éléments.

  • Si l’utilisateur a cliqué sur le bouton Annuler, définit la propriété falsede l’objet MyControlEventArgsIsOK sur .

  • Déclenche l’événement OnButtonClick pour indiquer à l’hôte que l’utilisateur est terminé et transmet les données collectées.

Ajoutez le code suivant à votre MyControl1 classe, après la Init méthode.

private void ButtonClicked(object sender, RoutedEventArgs e)
{
    MyControlEventArgs retvals = new MyControlEventArgs(true,
                                                        txtName.Text,
                                                        txtAddress.Text,
                                                        txtCity.Text,
                                                        txtState.Text,
                                                        txtZip.Text);
    if (sender == btnCancel)
    {
        retvals.IsOK = false;
    }
    if (OnButtonClick != null)
        OnButtonClick(this, retvals);
}

Création de propriétés

Le reste de la classe expose simplement les propriétés qui correspondent aux variables globales décrites précédemment. Lorsqu’une propriété change, le setter modifie l’apparence du contrôle en modifiant les propriétés de l’élément correspondant et en mettant à jour les variables globales sous-jacentes.

Ajoutez le code suivant à votre MyControl1 classe.

public FontWeight MyControl_FontWeight
{
    get { return _fontWeight; }
    set
    {
        _fontWeight = value;
        nameLabel.FontWeight = value;
        addressLabel.FontWeight = value;
        cityLabel.FontWeight = value;
        stateLabel.FontWeight = value;
        zipLabel.FontWeight = value;
    }
}
public double MyControl_FontSize
{
    get { return _fontSize; }
    set
    {
        _fontSize = value;
        nameLabel.FontSize = value;
        addressLabel.FontSize = value;
        cityLabel.FontSize = value;
        stateLabel.FontSize = value;
        zipLabel.FontSize = value;
    }
}
public FontStyle MyControl_FontStyle
{
    get { return _fontStyle; }
    set
    {
        _fontStyle = value;
        nameLabel.FontStyle = value;
        addressLabel.FontStyle = value;
        cityLabel.FontStyle = value;
        stateLabel.FontStyle = value;
        zipLabel.FontStyle = value;
    }
}
public FontFamily MyControl_FontFamily
{
    get { return _fontFamily; }
    set
    {
        _fontFamily = value;
        nameLabel.FontFamily = value;
        addressLabel.FontFamily = value;
        cityLabel.FontFamily = value;
        stateLabel.FontFamily = value;
        zipLabel.FontFamily = value;
    }
}

public SolidColorBrush MyControl_Background
{
    get { return _background; }
    set
    {
        _background = value;
        rootElement.Background = value;
    }
}
public SolidColorBrush MyControl_Foreground
{
    get { return _foreground; }
    set
    {
        _foreground = value;
        nameLabel.Foreground = value;
        addressLabel.Foreground = value;
        cityLabel.Foreground = value;
        stateLabel.Foreground = value;
        zipLabel.Foreground = value;
    }
}

Renvoi des données à l’hôte

Le composant final du fichier est la MyControlEventArgs classe, qui est utilisée pour renvoyer les données collectées à l’hôte.

Ajoutez le code suivant à votre MyControls espace de noms. L’implémentation est simple et n’est donc pas davantage expliquée.

public class MyControlEventArgs : EventArgs
{
    private string _Name;
    private string _StreetAddress;
    private string _City;
    private string _State;
    private string _Zip;
    private bool _IsOK;

    public MyControlEventArgs(bool result,
                              string name,
                              string address,
                              string city,
                              string state,
                              string zip)
    {
        _IsOK = result;
        _Name = name;
        _StreetAddress = address;
        _City = city;
        _State = state;
        _Zip = zip;
    }

    public string MyName
    {
        get { return _Name; }
        set { _Name = value; }
    }
    public string MyStreetAddress
    {
        get { return _StreetAddress; }
        set { _StreetAddress = value; }
    }
    public string MyCity
    {
        get { return _City; }
        set { _City = value; }
    }
    public string MyState
    {
        get { return _State; }
        set { _State = value; }
    }
    public string MyZip
    {
        get { return _Zip; }
        set { _Zip = value; }
    }
    public bool IsOK
    {
        get { return _IsOK; }
        set { _IsOK = value; }
    }
}

Générez la solution. La génération produira une DLL nommée MyControls.dll.

Implémentation de l’application hôte Windows Forms

L’application hôte Windows Forms utilise un ElementHost objet pour héberger le contrôle composite WPF. L’application gère l’événement OnButtonClick pour recevoir les données du contrôle composite. L’application dispose également d’un ensemble de boutons d’option que vous pouvez utiliser pour modifier l’apparence du contrôle. L’illustration suivante présente l’application.

L’image suivante montre un contrôle composite WPF hébergé dans une application Windows Forms

Screenshot that shows a Windows Form Hosting Avalon control.

Création du projet

Pour démarrer le projet :

  1. Lancez Visual Studio et ouvrez la boîte de dialogue Nouveau projet .

  2. En Visual C#, dans la catégorie Windows, sélectionnez le modèle Application Windows Forms.

  3. Nommez le nouveau projet WFHost.

  4. Pour l’emplacement, spécifiez le même dossier de premier niveau qui contient le projet MyControls.

  5. Cliquez sur OK pour créer le projet.

Vous devez également ajouter des références à la DLL qui contient MyControl1 et d’autres assemblys.

  1. Cliquez avec le bouton droit sur le nom du projet dans l’Explorateur de solutions, puis sélectionnez Ajouter une référence.

  2. Cliquez sur l’onglet Parcourir, puis accédez au dossier qui contient MyControls.dll. Pour cette procédure pas à pas, il s’agit du dossier MyControls\bin\Debug.

  3. Sélectionnez MyControls.dll, puis cliquez sur OK.

  4. Ajoutez les références aux assemblys suivants.

    • PresentationCore

    • PresentationFramework

    • System.Xaml

    • WindowsBase

    • WindowsFormsIntegration

Implémentation de l’interface utilisateur de l’application

L’interface utilisateur de l’application Windows Forms contient plusieurs contrôles permettant d’interagir avec le contrôle composite WPF.

  1. Ouvrez Form1 dans le Concepteur Windows Forms.

  2. Agrandissez le formulaire pour qu’il puisse contenir tous les contrôles.

  3. Dans le coin supérieur droit du formulaire, ajoutez un System.Windows.Forms.Panel contrôle pour contenir le contrôle composite WPF.

  4. Ajoutez les contrôles suivants System.Windows.Forms.GroupBox au formulaire.

    Nom Text
    groupBox1 Couleur d’arrière-plan
    groupBox2 Couleur de premier plan
    groupBox3 Taille de police
    groupBox4 Famille de polices
    groupBox5 Style de police
    groupBox6 Font Weight
    groupBox7 Données du contrôle
  5. Ajoutez les contrôles suivants System.Windows.Forms.RadioButton aux System.Windows.Forms.GroupBox contrôles.

    GroupBox Nom Text
    groupBox1 radioBackgroundOriginal D’origine
    groupBox1 radioBackgroundLightGreen LightGreen
    groupBox1 radioBackgroundLightSalmon LightSalmon
    groupBox2 radioForegroundOriginal D’origine
    groupBox2 radioForegroundRed Rouge
    groupBox2 radioForegroundYellow Jaune
    groupBox3 radioSizeOriginal D’origine
    groupBox3 radioSizeTen 10
    groupBox3 radioSizeTwelve 12
    groupBox4 radioFamilyOriginal D’origine
    groupBox4 radioFamilyTimes Times New Roman
    groupBox4 radioFamilyWingDings WingDings
    groupBox5 radioStyleOriginal Normal
    groupBox5 radioStyleItalic Italic
    groupBox6 radioWeightOriginal D’origine
    groupBox6 radioWeightBold Gras
  6. Ajoutez les contrôles suivants System.Windows.Forms.Label au dernier System.Windows.Forms.GroupBox. Ces contrôles affichent les données retournées par le contrôle composite WPF.

    GroupBox Nom Text
    groupBox7 lblName Name:
    groupBox7 lblAddress Adresse :
    groupBox7 lblCity Ville :
    groupBox7 lblState État :
    groupBox7 lblZip Zip :

Initialisation du formulaire

Vous implémentez généralement le code d’hébergement dans le gestionnaire d’événements du Load formulaire. Le code suivant montre le Load gestionnaire d’événements, un gestionnaire pour l’événement du Loaded contrôle composite WPF et les déclarations pour plusieurs variables globales utilisées ultérieurement.

Dans le Concepteur Windows Forms, double-cliquez sur le formulaire pour créer un gestionnaire d’événements Load . En haut de Form1.cs, ajoutez les instructions suivantes using .

using System.Windows;
using System.Windows.Forms.Integration;
using System.Windows.Media;

Remplacez le contenu de la classe existante Form1 par le code suivant.

private ElementHost ctrlHost;
private MyControls.MyControl1 wpfAddressCtrl;
System.Windows.FontWeight initFontWeight;
double initFontSize;
System.Windows.FontStyle initFontStyle;
System.Windows.Media.SolidColorBrush initBackBrush;
System.Windows.Media.SolidColorBrush initForeBrush;
System.Windows.Media.FontFamily initFontFamily;

public Form1()
{
    InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)
{
    ctrlHost = new ElementHost();
    ctrlHost.Dock = DockStyle.Fill;
    panel1.Controls.Add(ctrlHost);
    wpfAddressCtrl = new MyControls.MyControl1();
    wpfAddressCtrl.InitializeComponent();
    ctrlHost.Child = wpfAddressCtrl;

    wpfAddressCtrl.OnButtonClick +=
        new MyControls.MyControl1.MyControlEventHandler(
        avAddressCtrl_OnButtonClick);
    wpfAddressCtrl.Loaded += new RoutedEventHandler(
        avAddressCtrl_Loaded);
}

void avAddressCtrl_Loaded(object sender, EventArgs e)
{
    initBackBrush = (SolidColorBrush)wpfAddressCtrl.MyControl_Background;
    initForeBrush = wpfAddressCtrl.MyControl_Foreground;
    initFontFamily = wpfAddressCtrl.MyControl_FontFamily;
    initFontSize = wpfAddressCtrl.MyControl_FontSize;
    initFontWeight = wpfAddressCtrl.MyControl_FontWeight;
    initFontStyle = wpfAddressCtrl.MyControl_FontStyle;
}

La Form1_Load méthode du code précédent montre la procédure générale d’hébergement d’un contrôle WPF :

  1. Créez un objet ElementHost.

  2. Définissez la propriété du Dock contrôle sur DockStyle.Fill.

  3. Ajoutez le ElementHost contrôle à la Panel collection du Controls contrôle.

  4. Créez une instance du contrôle WPF.

  5. Hébergez le contrôle composite sur le formulaire en affectant le contrôle à la ElementHost propriété du Child contrôle.

Les deux lignes restantes dans les gestionnaires d’attachement Form1_Load de méthode à deux événements de contrôle :

  • OnButtonClick est un événement personnalisé qui est déclenché par le contrôle composite quand l’utilisateur clique sur le bouton OK ou Annuler. Vous gérez l’événement pour obtenir la réponse de l’utilisateur et pour collecter les données spécifiées par l’utilisateur.

  • Loaded est un événement standard déclenché par un contrôle WPF lorsqu’il est entièrement chargé. L’événement est utilisé ici, parce que l’exemple doit initialiser plusieurs variables globales à l’aide de propriétés du contrôle. Au moment de l’événement du Load formulaire, le contrôle n’est pas entièrement chargé et ces valeurs sont toujours définies nullsur . Vous devez attendre que l’événement du Loaded contrôle se produise avant de pouvoir accéder à ces propriétés.

Le Loaded gestionnaire d’événements est affiché dans le code précédent. Le OnButtonClick gestionnaire est abordé dans la section suivante.

Handling OnButtonClick

L’événement OnButtonClick se produit lorsque l’utilisateur clique sur le bouton OK ou Annuler .

Le gestionnaire d’événements case activée le champ de IsOK l’argument d’événement pour déterminer quel bouton a été cliqué. Les lblvariables de données correspondent aux Label contrôles abordés précédemment. Si l’utilisateur clique sur le bouton OK , les données des contrôles du TextBox contrôle sont affectées au contrôle correspondant Label . Si l’utilisateur clique sur Annuler, les Text valeurs sont définies sur les chaînes par défaut.

Ajoutez le bouton suivant au code du gestionnaire d’événements à la Form1 classe.

void avAddressCtrl_OnButtonClick(
    object sender,
    MyControls.MyControl1.MyControlEventArgs args)
{
    if (args.IsOK)
    {
        lblAddress.Text = "Street Address: " + args.MyStreetAddress;
        lblCity.Text = "City: " + args.MyCity;
        lblName.Text = "Name: " + args.MyName;
        lblState.Text = "State: " + args.MyState;
        lblZip.Text = "Zip: " + args.MyZip;
    }
    else
    {
        lblAddress.Text = "Street Address: ";
        lblCity.Text = "City: ";
        lblName.Text = "Name: ";
        lblState.Text = "State: ";
        lblZip.Text = "Zip: ";
    }
}

Créer et exécuter l’application. Ajoutez du texte dans le contrôle composite WPF, puis cliquez sur OK. Le texte s’affiche dans les étiquettes. À ce stade, le code n’a pas été ajouté pour gérer les cases d’option.

Modification de l’apparence du contrôle

Les RadioButton contrôles du formulaire permettent à l’utilisateur de modifier le premier plan et les couleurs d’arrière-plan du contrôle composite WPF, ainsi que plusieurs propriétés de police. La couleur d’arrière-plan est exposée par l’objet ElementHost . Les propriétés restantes sont exposées comme des propriétés personnalisées du contrôle.

Double-cliquez sur chaque RadioButton contrôle du formulaire pour créer CheckedChanged des gestionnaires d’événements. Remplacez les gestionnaires d’événements CheckedChanged par le code suivant.

private void radioBackgroundOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = initBackBrush;
}

private void radioBackgroundLightGreen_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = new SolidColorBrush(Colors.LightGreen);
}

private void radioBackgroundLightSalmon_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Background = new SolidColorBrush(Colors.LightSalmon);
}

private void radioForegroundOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = initForeBrush;
}

private void radioForegroundRed_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = new System.Windows.Media.SolidColorBrush(Colors.Red);
}

private void radioForegroundYellow_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_Foreground = new System.Windows.Media.SolidColorBrush(Colors.Yellow);
}

private void radioFamilyOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = initFontFamily;
}

private void radioFamilyTimes_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = new System.Windows.Media.FontFamily("Times New Roman");
}

private void radioFamilyWingDings_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontFamily = new System.Windows.Media.FontFamily("WingDings");
}

private void radioSizeOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = initFontSize;
}

private void radioSizeTen_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = 10;
}

private void radioSizeTwelve_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontSize = 12;
}

private void radioStyleOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontStyle = initFontStyle;
}

private void radioStyleItalic_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontStyle = System.Windows.FontStyles.Italic;
}

private void radioWeightOriginal_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontWeight = initFontWeight;
}

private void radioWeightBold_CheckedChanged(object sender, EventArgs e)
{
    wpfAddressCtrl.MyControl_FontWeight = FontWeights.Bold;
}

Créer et exécuter l’application. Cliquez sur les différentes cases d’option pour voir l’effet du contrôle composite WPF.

Voir aussi