Procedura dettagliata: Hosting di un controllo composito WPF in Windows FormWalkthrough: Hosting a WPF Composite Control in Windows Forms

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) fornisce un ambiente completo per la creazione di applicazioni.provides a rich environment for creating applications. Tuttavia, quando si dispone di un investimento sostanziale nel codice Windows Form, può essere più efficace estendere l'applicazione Windows Form esistente con WPFWPF anziché riscriverla da zero.However, when you have a substantial investment in Windows Forms code, it can be more effective to extend your existing Windows Forms application with WPFWPF rather than to rewrite it from scratch. Uno scenario comune è quando si desidera incorporare uno o più controlli implementati con all'interno dell'applicazione Windows Form.A common scenario is when you want to embed one or more controls implemented with WPFWPF within your Windows Forms application.A common scenario is when you want to embed one or more controls implemented with WPFWPF within your Windows Forms application. Per ulteriori informazioni sulla personalizzazione dei controlli WPFWPF, vedere Personalizzazione dei controlli.For more information about customizing WPF controls, see Control Customization.

In questa procedura dettagliata viene WPFWPF illustrato un'applicazione che ospita un controllo composito per eseguire l'immissione di dati in un'applicazione Windows Form.This walkthrough steps you through an application that hosts a composite control to perform data-entry in a Windows Forms application.This walkthrough steps you through an application that hosts a WPFWPF composite control to perform data-entry in a Windows Forms application. Il controllo composito è compresso in una DLL.The composite control is packaged in a DLL. Questa procedura generale può essere estesa ad applicazioni e controlli più complessi.This general procedure can be extended to more complex applications and controls. Questa procedura dettagliata è progettata per essere quasi identica nell'aspetto e nella funzionalità di Walkthrough: Hosting di un controllo composito Windows Form in WPF.This walkthrough is designed to be nearly identical in appearance and functionality to Walkthrough: Hosting a Windows Forms Composite Control in WPF. La principale differenza è che lo scenario di hosting è invertito.The primary difference is that the hosting scenario is reversed.

La procedura guidata è suddivisa in due sezioni.The walkthrough is divided into two sections. La prima sezione descrive brevemente WPFWPF l'implementazione del controllo composito.The first section briefly describes the implementation of the WPFWPF composite control. Nella seconda sezione viene illustrato in dettaglio come ospitare il controllo composito in un'applicazione Windows Form, ricevere eventi dal controllo e accedere ad alcune delle proprietà del controllo.The second section discusses in detail how to host the composite control in a Windows Forms application, receive events from the control, and access some of the control's properties.

Le attività illustrate nella procedura dettagliata sono le seguenti:Tasks illustrated in this walkthrough include:

  • Implementazione del controllo composito WPF.Implementing the WPF composite control.

  • Implementazione dell'applicazione host Windows Forms.Implementing the Windows Forms host application.

Per un elenco di codice completo delle attività illustrate in questa procedura dettagliata, vedere Hosting di un controllo composito WPF in Esempio di Windows Form.For a complete code listing of the tasks illustrated in this walkthrough, see Hosting a WPF Composite Control in Windows Forms Sample.

PrerequisitiPrerequisites

Per completare la procedura dettagliata, è necessario Visual Studio.You need Visual Studio to complete this walkthrough.

Implementazione del controllo composito WPFImplementing the WPF Composite Control

Il WPFWPF controllo composito utilizzato in questo esempio è un semplice modulo di immissione dati che accetta il nome e l'indirizzo dell'utente.The WPFWPF composite control used in this example is a simple data-entry form that takes the user's name and address. Quando l'utente fa clic su uno dei due pulsanti per indicare che l'attività è completata, il controllo genera un evento personalizzato per restituire tali informazioni all'host.When the user clicks one of two buttons to indicate that the task is finished, the control raises a custom event to return that information to the host. La figura seguente mostra il controllo sottoposto a rendering.The following illustration shows the rendered control.

L'immagine seguente mostra un controllo composito WPF:The following image shows a WPFWPF composite control:The following image shows a WPF composite control:

Screenshot che mostra un controllo WPF semplice.

Creazione del progettoCreating the Project

Per avviare il progetto:To start the project:

  1. Avviare Visual Studio e aprire la finestra di dialogo Nuovo progetto.Launch Visual Studio, and open the New Project dialog box.

  2. In Visual C, e la categoria Windows, selezionare il modello Di libreria di controlli utente WPF.In Visual C# and the Windows category, select the WPF User Control Library template.

  3. Assegnare il nome MyControls al nuovo progetto.Name the new project MyControls.

  4. Per la posizione, specificare una cartella di WindowsFormsHostingWpfControlprimo livello denominata in modo pratico, ad esempio .For the location, specify a conveniently named top-level folder, such as WindowsFormsHostingWpfControl. Successivamente, si immetterà l'applicazione host in questa cartella.Later, you will put the host application in this folder.

  5. Fare clic su OK per creare il progetto.Click OK to create the project. Il progetto predefinito contiene UserControl1un singolo controllo denominato .The default project contains a single control named UserControl1.

  6. In Esplora soluzioni rinominare UserControl1 MyControl1in .In Solution Explorer, rename UserControl1 to MyControl1.

Il progetto dovrebbe includere riferimenti alle DLL di sistema seguenti.Your project should have references to the following system DLLs. Se alcune di queste DLL non sono incluse per impostazione predefinita, aggiungerle al progetto.If any of these DLLs are not included by default, add them to your project.

  • PresentationCorePresentationCore

  • PresentationFrameworkPresentationFramework

  • SystemSystem

  • WindowsBaseWindowsBase

Creazione dell'interfaccia utenteCreating the User Interface

L'oggetto interfaccia utenteuser interface (UI) per il Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)controllo composito viene implementato con .The interfaccia utenteuser interface (UI) for the composite control is implemented with Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML). Il controllo Interfaccia utenteUI composito è costituito da cinque TextBox elementi.The composite control Interfaccia utenteUI consists of five TextBox elements. A TextBox ogni elemento TextBlock è associato un elemento che funge da etichetta.Each TextBox element has an associated TextBlock element that serves as a label. Ci sono Button due elementi in basso, OK e Annulla.There are two Button elements at the bottom, OK and Cancel. Quando l'utente fa clic su uno di questi pulsanti, il controllo genera un evento personalizzato per restituire le informazioni all'host.When the user clicks either button, the control raises a custom event to return the information to the host.

Layout di baseBasic Layout

I Interfaccia utenteUI vari elementi sono Grid contenuti in un elemento.The various Interfaccia utenteUI elements are contained in a Grid element. È possibile Grid utilizzare per disporre il contenuto del controllo composito in modo molto simile all'utilizzo di un Table elemento in HTML.You can use Grid to arrange the contents of the composite control in much the same way you would use a Table element in HTML. WPFWPFha anche Table un Grid elemento, ma è più leggero e più adatto per semplici attività di layout.also has a Table element, but Grid is more lightweight and better suited for simple layout tasks.

Il codice XAML seguente illustra il layout di base.The following XAML shows the basic layout. Questo codice XAML definisce la struttura complessiva del controllo specificando Grid il numero di colonne e righe nell'elemento.This XAML defines the overall structure of the control by specifying the number of columns and rows in the Grid element.

In MyControl1.xaml sostituire il codice XAML esistente con il seguente.In MyControl1.xaml, replace the existing XAML with the following XAML.

<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>

Aggiunta di elementi TextBlock e TextBox alla grigliaAdding TextBlock and TextBox Elements to the Grid

Per posizionare un Interfaccia utenteUI elemento nella griglia, RowProperty ColumnProperty impostare gli attributi e dell'elemento sul numero di riga e di colonna appropriato.You place a Interfaccia utenteUI element in the grid by setting the element's RowProperty and ColumnProperty attributes to the appropriate row and column number. Ricordare che la numerazione di righe e colonne e in base zero.Remember that row and column numbering are zero-based. È possibile fare in modo che ColumnSpanProperty un elemento si estenda su più colonne impostandone l'attributo.You can have an element span multiple columns by setting its ColumnSpanProperty attribute. Per ulteriori Grid informazioni sugli elementi, consultate Creare un elemento Grid.For more information about Grid elements, see Create a Grid Element.

Il codice XAML seguente mostra TextBox TextBlock gli elementi RowProperty ColumnProperty e del controllo composito con i relativi attributi e , che sono impostati per posizionare correttamente gli elementi nella griglia.The following XAML shows the composite control's TextBox and TextBlock elements with their RowProperty and ColumnProperty attributes, which are set to place the elements properly in the grid.

In MyControl1.xaml aggiungi il codice Grid XAML seguente all'interno dell'elemento.In MyControl1.xaml, add the following XAML within the Grid element.

  <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"/>

Applicazione di stili agli elementi dell'interfaccia utenteStyling the UI Elements

Molti degli elementi nel form di immissione dati hanno un aspetto simile, che significa che hanno impostazioni identiche per alcune delle loro proprietà.Many of the elements on the data-entry form have a similar appearance, which means that they have identical settings for several of their properties. Anziché impostare gli attributi di ogni Style elemento separatamente, il codice XAML precedente usa gli elementi per definire le impostazioni delle proprietà standard per le classi di elementi.Rather than setting each element's attributes separately, the previous XAML uses Style elements to define standard property settings for classes of elements. Questo approccio riduce la complessità del controllo e consente di modificare l'aspetto di più elementi tramite un unico attributo di stile.This approach reduces the complexity of the control and enables you to change the appearance of multiple elements through a single style attribute.

Gli Style elementi sono Grid contenuti nella Resources proprietà dell'elemento, in modo che possano essere utilizzati da tutti gli elementi nel controllo.The Style elements are contained in the Grid element's Resources property, so they can be used by all elements in the control. Se uno stile è denominato, è possibile Style applicarlo a un elemento aggiungendo un set di elementi al nome dello stile.If a style is named, you apply it to an element by adding a Style element set to the style's name. Gli stili che non sono denominati diventano lo stile predefinito per l'elemento.Styles that are not named become the default style for the element. Per ulteriori WPFWPF informazioni sugli stili, consultate Applicazione di stili e modelli.For more information about WPFWPF styles, see Styling and Templating.

Il codice XAML Style seguente mostra gli elementi per il controllo composito.The following XAML shows the Style elements for the composite control. Per visualizzare come gli stili vengono applicati agli elementi, vedere il codice XAML precedente.To see how the styles are applied to elements, see the previous XAML. Ad esempio, TextBlock l'ultimo inlineText elemento ha TextBox lo stile e l'ultimo elemento utilizza lo stile predefinito.For example, the last TextBlock element has the inlineText style, and the last TextBox element uses the default style.

In MyControl1.xaml aggiungere il codice Grid XAML seguente subito dopo l'elemento iniziale.In MyControl1.xaml, add the following XAML just after the Grid start element.

<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>

Aggiunta dei pulsanti OK e CancelAdding the OK and Cancel Buttons

Gli elementi finali nel controllo composito sono gli elementi OK e Cancel, Button che occupano le prime due colonne dell'ultima riga dell'oggetto Grid.The final elements on the composite control are the OK and CancelButton elements, which occupy the first two columns of the last row of the Grid. Questi elementi utilizzano un ButtonClickedgestore Button eventi comune, , e lo stile predefinito definito nel codice XAML precedente.These elements use a common event handler, ButtonClicked, and the default Button style defined in the previous XAML.

In MyControl1.xaml aggiungere il codice TextBox XAML seguente dopo l'ultimo elemento.In MyControl1.xaml, add the following XAML after the last TextBox element. La XAMLXAML parte del controllo composito è ora completa.The XAMLXAML part of the composite control is now complete.

<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>

Implementazione del file code-behindImplementing the Code-Behind File

Il file code-behind, MyControl1.xaml.cs, implementa tre attività essenziali:The code-behind file, MyControl1.xaml.cs, implements three essential tasks:The code-behind file, MyControl1.xaml.cs, implements three essential tasks:

  1. Gestisce l'evento che si verifica quando l'utente fa clic su uno dei pulsanti.Handles the event that occurs when the user clicks one of the buttons.

  2. Recupera i dati TextBox dagli elementi e li comprime in un oggetto argomento dell'evento personalizzato.Retrieves the data from the TextBox elements, and packages it in a custom event argument object.

  3. Genera l'evento personalizzato, OnButtonClick che notifica all'host che l'utente è terminato e passa i dati all'host.Raises the custom OnButtonClick event, which notifies the host that the user is finished and passes the data back to the host.

Il controllo espone inoltre un numero di proprietà di colore e tipo di carattere che consentono di modificare l'aspetto.The control also exposes a number of color and font properties that enable you to change the appearance. A WindowsFormsHost differenza della classe , utilizzata per ospitare ElementHost un controllo Windows Background Form, la classe espone solo la proprietà del controllo.Unlike the WindowsFormsHost class, which is used to host a Windows Forms control, the ElementHost class exposes the control's Background property only. Per mantenere la somiglianza tra questo esempio di codice e l'esempio illustrato in Procedura dettagliata: hosting di un controllo composito Windows Form in WPF, il controllo espone direttamente le proprietà rimanenti.To maintain the similarity between this code example and the example discussed in Walkthrough: Hosting a Windows Forms Composite Control in WPF, the control exposes the remaining properties directly.

Struttura di base del file code-behindThe Basic Structure of the Code-Behind File

Il file code-behind è costituito da un singolo spazio dei nomi, MyControls, che conterrà due classi e MyControl1 MyControlEventArgs.The code-behind file consists of a single namespace, MyControls, which will contain two classes, MyControl1 and MyControlEventArgs.

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

La prima MyControl1classe, , è una classe parziale Interfaccia utenteUI contenente il codice che implementa la funzionalità del definito in MyControl1.xaml.The first class, MyControl1, is a partial class containing the code that implements the functionality of the Interfaccia utenteUI defined in MyControl1.xaml. Quando MyControl1.xaml viene analizzato, l'oggetto XAMLXAML viene convertito nella stessa classe parziale e le due classi parziali vengono unite per formare il controllo compilato.When MyControl1.xaml is parsed, the XAMLXAML is converted to the same partial class, and the two partial classes are merged to form the compiled control. Per questo motivo, il nome della classe nel file code-behind deve corrispondere al nome della classe assegnato a MyControl1.xaml e deve ereditare dall'elemento radice del controllo.For this reason, the class name in the code-behind file must match the class name assigned to MyControl1.xaml, and it must inherit from the root element of the control. La seconda MyControlEventArgsclasse, , è una classe di argomenti dell'evento utilizzata per inviare i dati all'host.The second class, MyControlEventArgs, is an event arguments class that is used to send the data back to the host.

Aprire MyControl1.xaml.cs.Open MyControl1.xaml.cs. Modificare la dichiarazione di classe esistente in modo Gridche abbia il nome seguente ed erediti da .Change the existing class declaration so that it has the following name and inherits from Grid.

public partial class MyControl1 : Grid

Inizializzazione del controlloInitializing the Control

Il codice seguente implementa alcune attività di base:The following code implements several basic tasks:

  • Dichiara un evento OnButtonClickprivato, , e MyControlEventHandleril delegato associato, .Declares a private event, OnButtonClick, and its associated delegate, MyControlEventHandler.

  • Crea diverse variabili globali private che archiviano i dati dell'utente.Creates several private global variables that store the user's data. Questi dati vengono esposti tramite le proprietà corrispondenti.This data is exposed through corresponding properties.

  • Implementa un Initgestore, , Loaded per l'evento del controllo.Implements a handler, Init, for the control's Loaded event. Questo gestore inizializza le variabili globali assegnando loro i valori definiti in MyControl1.xaml.This handler initializes the global variables by assigning them the values defined in MyControl1.xaml. A tale scopo, Name viene utilizzato TextBlock l'oggetto assegnato a un elemento tipico, nameLabel, per accedere alle impostazioni delle proprietà dell'elemento.To do this, it uses the Name assigned to a typical TextBlock element, nameLabel, to access that element's property settings.

Eliminare il costruttore esistente e MyControl1 aggiungere il codice seguente alla classe.Delete the existing constructor and add the following code to your MyControl1 class.

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;
}

Gestione degli eventi clic dei pulsantiHandling the Buttons' Click Events

L'utente indica che l'attività di immissione dati è terminata facendo clic sul pulsante OK o Annulla.The user indicates that the data-entry task is finished by clicking either the OK button or the Cancel button. Entrambi i pulsanti utilizzano lo stesso Click gestore eventi, ButtonClicked.Both buttons use the same Click event handler, ButtonClicked. Entrambi i pulsanti btnOK btnCancelhanno un nome, o , che consente al gestore di determinare su quale pulsante è stato fatto clic esaminando il valore dell'argomento sender .Both buttons have a name, btnOK or btnCancel, that enables the handler to determine which button was clicked by examining the value of the sender argument. Il gestore esegue le operazioni seguenti:The handler does the following:

  • Crea MyControlEventArgs un oggetto che contiene TextBox i dati degli elementi.Creates a MyControlEventArgs object that contains the data from the TextBox elements.

  • Se l'utente ha fatto clic MyControlEventArgs sul IsOK pulsante false Annulla, imposta la proprietà dell'oggetto su .If the user clicked the Cancel button, sets the MyControlEventArgs object's IsOK property to false.

  • Genera OnButtonClick l'evento per indicare all'host che l'utente è terminato e restituisce i dati raccolti.Raises the OnButtonClick event to indicate to the host that the user is finished, and passes back the collected data.

Aggiungere il codice MyControl1 seguente alla Init classe, dopo il metodo.Add the following code to your MyControl1 class, after the Init method.

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);
}

Creazione di proprietàCreating Properties

Il resto della classe espone semplicemente proprietà che corrispondono alle variabili globali precedentemente illustrate.The remainder of the class simply exposes properties that correspond to the global variables discussed previously. Quando una proprietà viene modificata, la funzione di accesso impostata modifica l'aspetto del controllo cambiando le proprietà degli elementi corrispondenti e aggiornando le variabili globali sottostanti.When a property changes, the set accessor modifies the appearance of the control by changing the corresponding element properties and updating the underlying global variables.

Aggiungere il codice MyControl1 seguente alla classe.Add the following code to your MyControl1 class.

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;
    }
}

Invio di dati di nuovo all'hostSending the Data Back to the Host

Il componente finale nel MyControlEventArgs file è la classe , che viene utilizzata per inviare i dati raccolti all'host.The final component in the file is the MyControlEventArgs class, which is used to send the collected data back to the host.

Aggiungere il codice MyControls seguente allo spazio dei nomi.Add the following code to your MyControls namespace. L'implementazione è semplice e non verrà ulteriormente illustrata.The implementation is straightforward, and is not discussed further.

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; }
    }
}

Compilare la soluzione.Build the solution. La compilazione genererà una DLL denominata MyControls.dll.The build will produce a DLL named MyControls.dll.

Implementazione dell'applicazione host Windows FormsImplementing the Windows Forms Host Application

L'applicazione host Windows ElementHost Form utilizza WPFWPF un oggetto per ospitare il controllo composito.The Windows Forms host application uses an ElementHost object to host the WPFWPF composite control. L'applicazione OnButtonClick gestisce l'evento per ricevere i dati dal controllo composito.The application handles the OnButtonClick event to receive the data from the composite control. L'applicazione dispone anche di un set di pulsanti di opzione che è possibile utilizzare per modificare l'aspetto del controllo.The application also has a set of option buttons that you can use to modify the control's appearance. La figura seguente mostra l'applicazione.The following illustration shows the application.

L'immagine seguente mostra un controllo composito WPF ospitato in un'applicazione Windows Form"The following image shows a WPF composite control hosted in a Windows Forms application"The following image shows a WPF composite control hosted in a Windows Forms application"

Screenshot che mostra un controllo Avalon di Windows Form Hosting.

Creazione del progettoCreating the Project

Per avviare il progetto:To start the project:

  1. Avviare Visual Studio e aprire la finestra di dialogo Nuovo progetto.Launch Visual Studio, and open the New Project dialog box.

  2. In Visual Ce e la categoria Windows, selezionare il modello applicazione Windows Form.In Visual C# and the Windows category, select the Windows Forms Application template.

  3. Assegnare il nome WFHost al nuovo progetto.Name the new project WFHost.

  4. Come percorso, specificare la stessa cartella di livello superiore che contiene il progetto MyControls.For the location, specify the same top-level folder that contains the MyControls project.

  5. Fare clic su OK per creare il progetto.Click OK to create the project.

È inoltre necessario aggiungere riferimenti alla MyControl1 DLL che contiene e altri assembly.You also need to add references to the DLL that contains MyControl1 and other assemblies.

  1. Fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e scegliere Aggiungi riferimento.Right-click the project name in Solution Explorer, and select Add Reference.

  2. Fare clic sulla scheda Sfoglia e individuare la cartella contenente MyControls.dll.Click the Browse tab, and browse to the folder that contains MyControls.dll. In questa procedura dettagliata la cartella è MyControls\bin\Debug.For this walkthrough, this folder is MyControls\bin\Debug.

  3. Selezionare MyControls.dll, quindi fare clic su OK.Select MyControls.dll, and then click OK.

  4. Aggiungere riferimenti agli assembly indicati di seguito.Add references to the following assemblies.

    • PresentationCorePresentationCore

    • PresentationFrameworkPresentationFramework

    • System.XamlSystem.Xaml

    • WindowsBaseWindowsBase

    • WindowsFormsIntegrationWindowsFormsIntegration

Implementazione dell'interfaccia utente per l'applicazioneImplementing the User Interface for the Application

L'interfaccia utente per l'applicazione Windows Form contiene vari controlli per interagire con il controllo composito WPF.The UI for the Windows Form application contains several controls to interact with the WPF composite control.

  1. Aprire Form1 in Progettazione Windows Form.Open Form1 in the Windows Form Designer.

  2. Ingrandire il form per cui inserire i controlli.Enlarge the form to accommodate the controls.

  3. Nell'angolo superiore destro del form System.Windows.Forms.Panel aggiungere un WPFWPF controllo per contenere il controllo composito.In the upper-right corner of the form, add a System.Windows.Forms.Panel control to hold the WPFWPF composite control.

  4. Aggiungere i System.Windows.Forms.GroupBox controlli seguenti al form.Add the following System.Windows.Forms.GroupBox controls to the form.

    NomeName TestoText
    groupBox1groupBox1 Colore di sfondoBackground Color
    groupBox2groupBox2 Colore primo pianoForeground Color
    groupBox3groupBox3 Dimensione carattereFont Size
    groupBox4groupBox4 Famiglia di caratteriFont Family
    groupBox5groupBox5 StileFont Style
    groupBox6groupBox6 Spessore carattereFont Weight
    groupBox7groupBox7 Dati dal controlloData from control
  5. Aggiungere i System.Windows.Forms.RadioButton seguenti System.Windows.Forms.GroupBox controlli ai controlli.Add the following System.Windows.Forms.RadioButton controls to the System.Windows.Forms.GroupBox controls.

    GroupBoxGroupBox NomeName TestoText
    groupBox1groupBox1 radioBackgroundOriginalradioBackgroundOriginal OriginaleOriginal
    groupBox1groupBox1 radioBackgroundLightGreenradioBackgroundLightGreen LightGreenLightGreen
    groupBox1groupBox1 radioBackgroundLightSalmonradioBackgroundLightSalmon LightSalmonLightSalmon
    groupBox2groupBox2 radioForegroundOriginalradioForegroundOriginal OriginaleOriginal
    groupBox2groupBox2 radioForegroundRedradioForegroundRed RossoRed
    groupBox2groupBox2 radioForegroundYellowradioForegroundYellow GialloYellow
    groupBox3groupBox3 radioSizeOriginalradioSizeOriginal OriginaleOriginal
    groupBox3groupBox3 radioSizeTenradioSizeTen 1010
    groupBox3groupBox3 radioSizeTwelveradioSizeTwelve 1212
    groupBox4groupBox4 radioFamilyOriginalradioFamilyOriginal OriginaleOriginal
    groupBox4groupBox4 radioFamilyTimesradioFamilyTimes Times New RomanTimes New Roman
    groupBox4groupBox4 radioFamilyWingDingsradioFamilyWingDings WingDingsWingDings
    groupBox5groupBox5 radioStyleOriginalradioStyleOriginal NormaleNormal
    groupBox5groupBox5 radioStyleItalicradioStyleItalic CorsivoItalic
    groupBox6groupBox6 radioWeightOriginalradioWeightOriginal OriginaleOriginal
    groupBox6groupBox6 radioWeightBoldradioWeightBold GrassettoBold
  6. Aggiungere i System.Windows.Forms.Label seguenti controlli System.Windows.Forms.GroupBoxall'ultimo file .Add the following System.Windows.Forms.Label controls to the last System.Windows.Forms.GroupBox. Questi controlli visualizzano i WPFWPF dati restituiti dal controllo composito.These controls display the data returned by the WPFWPF composite control.

    GroupBoxGroupBox NomeName TestoText
    groupBox7groupBox7 lblNamelblName Nome:Name:
    groupBox7groupBox7 lblAddresslblAddress Indirizzo:Street Address:
    groupBox7groupBox7 lblCitylblCity Città:City:
    groupBox7groupBox7 lblStatelblState Stato:State:
    groupBox7groupBox7 lblZiplblZip CAP:Zip:

Inizializzazione del formInitializing the Form

In genere si implementa il codice Load di hosting nel gestore eventi del form.You generally implement the hosting code in the form's Load event handler. Il codice seguente Load mostra il gestore WPFWPF eventi, Loaded un gestore per l'evento del controllo composito e le dichiarazioni per diverse variabili globali utilizzate in un secondo momento.The following code shows the Load event handler, a handler for the WPFWPF composite control's Loaded event, and declarations for several global variables that are used later.

In Progettazione Windows Form fare doppio clic Load sul form per creare un gestore eventi.In the Windows Forms Designer, double-click the form to create a Load event handler. Nella parte superiore di Form1.cs using aggiungere le istruzioni seguenti.At the top of Form1.cs, add the following using statements.

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

Sostituire il contenuto Form1 della classe esistente con il codice seguente.Replace the contents of the existing Form1 class with the following code.

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;
}

Il Form1_Load metodo nel codice precedente mostra la WPFWPF procedura generale per ospitare un controllo:The method in the preceding code shows the general procedure for hosting a control:The Form1_Load method in the preceding code shows the general procedure for hosting a WPFWPF control:

  1. Creare un nuovo oggetto ElementHost.Create a new ElementHost object.

  2. Impostare la Dock proprietà DockStyle.Filldel controllo su .Set the control's Dock property to DockStyle.Fill.

  3. Aggiungere ElementHost il controllo Panel alla Controls raccolta del controllo.Add the ElementHost control to the Panel control's Controls collection.

  4. Creare un'istanza WPFWPF del controllo.Create an instance of the WPFWPF control.

  5. Ospitare il controllo composito nel form ElementHost assegnando Child il controllo alla proprietà del controllo.Host the composite control on the form by assigning the control to the ElementHost control's Child property.

Le due righe Form1_Load rimanenti nel metodo collegano i gestori a due eventi di controllo:The remaining two lines in the method attach handlers to two control events:The remaining two lines in the Form1_Load method attach handlers to two control events:

  • OnButtonClickè un evento personalizzato generato dal controllo composito quando l'utente fa clic sul pulsante OK o Annulla.OnButtonClick is a custom event that is fired by the composite control when the user clicks the OK or Cancel button. Si gestisce l'evento per ottenere la risposta dell'utente e per raccogliere i dati specificati dall'utente.You handle the event to get the user's response and to collect any data that the user specified.

  • Loadedè un evento standard generato WPFWPF da un controllo quando è completamente caricato.Loaded is a standard event that is raised by a WPFWPF control when it is fully loaded. L'evento è usato qui poiché nell'esempio è necessario inizializzare diverse variabili globali usando le proprietà del controllo.The event is used here because the example needs to initialize several global variables using properties from the control. Al momento dell'evento Load del form, il controllo non è completamente nullcaricato e tali valori sono ancora impostati su .At the time of the form's Load event, the control is not fully loaded and those values are still set to null. È necessario attendere che si Loaded verifichi l'evento del controllo prima di poter accedere a tali proprietà.You need to wait until the control's Loaded event occurs before you can access those properties.

Il Loaded gestore eventi viene visualizzato nel codice precedente.The Loaded event handler is shown in the preceding code. Il OnButtonClick gestore viene illustrato nella sezione successiva.The OnButtonClick handler is discussed in the next section.

Gestione dell'evento OnButtonClickHandling OnButtonClick

L'evento OnButtonClick si verifica quando l'utente fa clic sul pulsante OK o Annulla.The OnButtonClick event occurs when the user clicks the OK or Cancel button.

Il gestore eventi controlla IsOK il campo dell'argomento dell'evento per determinare su quale pulsante è stato fatto clic.The event handler checks the event argument's IsOK field to determine which button was clicked. Le lblvariabili di Label dati corrispondono ai controlli descritti in precedenza.The lbldata variables correspond to the Label controls that were discussed earlier. Se l'utente fa clic sul pulsante OK, i dati dei controlli del TextBox controllo vengono assegnati al controllo corrispondente. LabelIf the user clicks the OK button, the data from the control's TextBox controls is assigned to the corresponding Label control. Se l'utente Cancelfa Text clic su Annulla , i valori vengono impostati sulle stringhe predefinite.If the user clicks Cancel, the Text values are set to the default strings.

Aggiungere il codice del gestore Form1 eventi Click del pulsante seguente alla classe.Add the following button click event handler code to the Form1 class.

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: ";
    }
}

Compilare ed eseguire l'applicazione.Build and run the application. Aggiungere del testo nel controllo composito WPFWPF e quindi fare clic su OK.Add some text in the WPF composite control and then click OK. Il testo viene visualizzato nelle etichette.The text appears in the labels. A questo punto, il codice non è stato aggiunto ai pulsanti di opzione.At this point, code has not been added to handle the radio buttons.

Modifica dell'aspetto del controlloModifying the Appearance of the Control

I RadioButton controlli nel form consentiranno all'utente di modificare i WPFWPF colori di primo piano e di sfondo del controllo composito, nonché diverse proprietà del carattere.The RadioButton controls on the form will enable the user to change the WPFWPF composite control's foreground and background colors as well as several font properties. Il colore di sfondo ElementHost viene esposto dall'oggetto.The background color is exposed by the ElementHost object. Le proprietà restanti sono esposte come proprietà personalizzate del controllo.The remaining properties are exposed as custom properties of the control.

Fare doppio RadioButton clic su ogni CheckedChanged controllo del form per creare gestori eventi.Double-click each RadioButton control on the form to create CheckedChanged event handlers. Sostituire CheckedChanged i gestori eventi con il codice seguente.Replace the CheckedChanged event handlers with the following code.

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;
}

Compilare ed eseguire l'applicazione.Build and run the application. Fare clic sui vari pulsanti di opzione per vedere l'effetto sul controllo composito WPF.Click the different radio buttons to see the effect on the WPF composite control.

Vedere ancheSee also