チュートリアル: Windows フォームでの WPF 複合コントロールのホストWalkthrough: Hosting a WPF Composite Control in Windows Forms

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) は、アプリケーションの作成に適した環境を提供します。provides a rich environment for creating applications. ただし、コードにWindows フォームWindows Forms多大な投資をしている場合は、最初から書き換えるのではなく、を使用WPFWPFして既存Windows フォームWindows Formsのアプリケーションを拡張する方が効果的な場合があります。However, when you have a substantial investment in Windows フォームWindows Forms code, it can be more effective to extend your existing Windows フォームWindows Forms application with WPFWPF rather than to rewrite it from scratch. 一般的なシナリオは、Windows フォームアプリケーション内で、で実装されたWPFWPF 1 つ以上のコントロールを埋め込む必要がある場合です。A common scenario is when you want to embed one or more controls implemented with WPFWPF within your Windows Forms application. WPF コントロールのカスタマイズの詳細については、「コントロールのカスタマイズ」を参照してください。For more information about customizing WPF controls, see Control Customization.

このチュートリアルでは、 WPFWPF複合コントロールをホストして Windows フォームアプリケーションでデータ入力を実行するアプリケーションについて説明します。This walkthrough steps you through an application that hosts a WPFWPF composite control to perform data-entry in a Windows Forms application. 複合コントロールは DLL にパッケージ化されています。The composite control is packaged in a DLL. この一般的な手順は、より複雑なアプリケーションやコントロールに拡張することができます。This general procedure can be extended to more complex applications and controls. このチュートリアルは、次のチュートリアルに似た外観と機能を持つように設計されています。WPFでの Windows フォーム複合コントロールのホスト。This walkthrough is designed to be nearly identical in appearance and functionality to Walkthrough: Hosting a Windows Forms Composite Control in WPF. 主な違いは、ホストする側とされる側が逆であることです。The primary difference is that the hosting scenario is reversed.

このチュートリアルは、2 つのセクションに分かれています。The walkthrough is divided into two sections. 最初のセクションでは、 WPFWPF複合コントロールの実装について簡単に説明します。The first section briefly describes the implementation of the WPFWPF composite control. 2番目のセクションでは、Windows フォームアプリケーションで複合コントロールをホストする方法、コントロールからイベントを受信する方法、およびコントロールのプロパティの一部にアクセスする方法の詳細について説明します。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.

このチュートリアルでは、以下のタスクを行います。Tasks illustrated in this walkthrough include:

  • WPF 複合コントロールを実装する。Implementing the WPF composite control.

  • Windows フォーム ホスト アプリケーションを実装する。Implementing the Windows Forms host application.

このチュートリアルで示すタスクの完全なコード一覧については、「 Windows フォームサンプルでの WPF 複合コントロールのホスト」を参照してください。For a complete code listing of the tasks illustrated in this walkthrough, see Hosting a WPF Composite Control in Windows Forms Sample.

必須コンポーネントPrerequisites

このチュートリアルを完了するには Visual Studio が必要です。You need Visual Studio to complete this walkthrough.

WPF 複合コントロールの実装Implementing the WPF Composite Control

この例で使用される複合コントロールは、ユーザーの名前と住所を取得する単純なデータ入力フォームです。WPFWPFThe WPFWPF composite control used in this example is a simple data-entry form that takes the user's name and address. ユーザーが 2 つのボタンのいずれかをクリックして入力操作が終了したことを示すと、コントロールはカスタム イベントを発生させて入力情報をホストに返します。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. 次の図はレンダリングされたコントロールを示しています。The following illustration shows the rendered control.

次の図は、WPF 複合コントロールを示しています。The following image shows a WPF composite control:

単純な WPF コントロールを示すスクリーンショット。

プロジェクトの作成Creating the Project

プロジェクトを開始するにはTo start the project:

  1. Microsoft Visual StudioMicrosoft Visual Studio起動し、 [新しいプロジェクト] ダイアログボックスを開きます。Launch Microsoft Visual StudioMicrosoft Visual Studio, and open the New Project dialog box.

  2. [ビジュアルC# ] と [Windows] カテゴリで、 [WPF ユーザーコントロールライブラリ] テンプレートを選択します。In Visual C# and the Windows category, select the WPF User Control Library template.

  3. 新しいプロジェクトに MyControls という名前を付けます。Name the new project MyControls.

  4. [場所] には、など、便利な最上位レベルのフォルダー WindowsFormsHostingWpfControlを指定します。For the location, specify a conveniently named top-level folder, such as WindowsFormsHostingWpfControl. このフォルダーには後でホスト アプリケーションも配置します。Later, you will put the host application in this folder.

  5. [OK] をクリックして、プロジェクトを作成します。Click OK to create the project. 既定のプロジェクトには、というUserControl1名前のコントロールが1つ含まれています。The default project contains a single control named UserControl1.

  6. ソリューションエクスプローラーで、のUserControl1名前MyControl1をに変更します。In Solution Explorer, rename UserControl1 to MyControl1.

プロジェクトは、以下のシステム DLL を参照している必要があります。Your project should have references to the following system DLLs. これらの DLL のいずれかが既定で含まれていない場合は、プロジェクトに追加します。If any of these DLLs are not included by default, add them to your project.

  • PresentationCorePresentationCore

  • PresentationFrameworkPresentationFramework

  • システムSystem

  • WindowsBaseWindowsBase

ユーザー インターフェイスの作成Creating the User Interface

複合ユーザー インターフェイス (UI)user interface (UI)コントロールのは、を使用Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)して実装されます。The ユーザー インターフェイス (UI)user interface (UI) for the composite control is implemented with Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML). 複合コントロールUIUIは、5つTextBoxの要素で構成されます。The composite control UIUI consists of five TextBox elements. TextBox要素には、 TextBlockラベルとして機能する要素が関連付けられています。Each TextBox element has an associated TextBlock element that serves as a label. 下部にはButton[OK][キャンセル] の2つの要素があります。There are two Button elements at the bottom, OK and Cancel. ユーザーがいずれかのボタンをクリックすると、コントロールは情報をホストに返すカスタム イベントを発生させます。When the user clicks either button, the control raises a custom event to return the information to the host.

基本的なレイアウトBasic Layout

要素には、さまざまなUIUI要素が含まれています。 GridThe various UIUI elements are contained in a Grid element. を使用Gridすると、HTML で要素をTable使用する場合とほぼ同じ方法で複合コントロールの内容を配置できます。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. WPFWPFにはTable要素もありますGridが、軽量で、単純なレイアウトタスクに適しています。also has a Table element, but Grid is more lightweight and better suited for simple layout tasks.

次の XAML に基本的なレイアウトを示します。The following XAML shows the basic layout. この XAML は、 Grid要素内の列と行の数を指定することによって、コントロールの全体的な構造を定義します。This XAML defines the overall structure of the control by specifying the number of columns and rows in the Grid element.

MyControl1.xaml で、で、既存の XAML を次の XAML で置き換えます。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>

TextBlock および TextBox 要素のグリッドへの追加Adding TextBlock and TextBox Elements to the Grid

要素のUIUI RowProperty属性とColumnProperty属性を適切な行と列の番号に設定して、グリッドに要素を配置します。You place a UIUI element in the grid by setting the element's RowProperty and ColumnProperty attributes to the appropriate row and column number. 行と列の番号付けは 0 から始まることに注意してください。Remember that row and column numbering are zero-based. 要素は、 ColumnSpanProperty属性を設定することによって複数の列にまたがることができます。You can have an element span multiple columns by setting its ColumnSpanProperty attribute. Grid要素の詳細については、「 Grid 要素の作成」を参照してください。For more information about Grid elements, see Create a Grid Element.

次の XAML は、複合コントロールのTextBoxおよびTextBlock要素とColumnProperty属性RowPropertyを示しています。これらの要素は、グリッドに要素を適切に配置するように設定されています。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.

Mycontrol1.xaml で、 Grid要素内に次の xaml を追加します。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"/>

UI 要素のスタイル設定Styling the UI Elements

データ入力フォームの多くの要素は外観が似ていますが、それは、そのいくつかのプロパティの設定が同一であることを意味しています。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. 前の XAML では、各要素の属性を個別にStyle設定するのではなく、要素を使用して要素のクラスの標準プロパティ設定を定義しています。Rather than setting each element's attributes separately, the previous XAML uses Style elements to define standard property settings for classes of elements. この方法だと、コントロールの複雑さが軽減され、1 つのスタイル属性を使用して複数要素の外観を変更することができます。This approach reduces the complexity of the control and enables you to change the appearance of multiple elements through a single style attribute.

要素はGrid要素のResourcesプロパティに含まれているため、コントロールのすべての要素で使用できます。 StyleThe Style elements are contained in the Grid element's Resources property, so they can be used by all elements in the control. スタイルにという名前が付けられている場合は、スタイルStyleの名前に要素セットを追加することによって、要素に適用します。If a style is named, you apply it to an element by adding a Style element set to the style's name. 名前が付いていないスタイルは、その要素の既定のスタイルになります。Styles that are not named become the default style for the element. WPFWPFスタイルの詳細については、「スタイルとテンプレート」を参照してください。For more information about WPFWPF styles, see Styling and Templating.

次の XAML は、 Style複合コントロールの要素を示しています。The following XAML shows the Style elements for the composite control. スタイルがどのように要素に適用されるかについては、前の XAML を参照してください。To see how the styles are applied to elements, see the previous XAML. たとえば、最後TextBlockの要素inlineTextのスタイルはで、最後TextBoxの要素は既定のスタイルを使用します。For example, the last TextBlock element has the inlineText style, and the last TextBox element uses the default style.

Mycontrol1.xaml で、開始要素のGrid直後に次の xaml を追加します。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>

[OK] ボタンと [キャンセル] ボタンの追加Adding the OK and Cancel Buttons

複合コントロールの最後の要素は、の最後の行Gridの最初の2つの列を占有する、 OKおよびCancel Button要素です。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. これらの要素は、共通のイベントButtonClickedハンドラーと、前Buttonの XAML で定義されている既定のスタイルを使用します。These elements use a common event handler, ButtonClicked, and the default Button style defined in the previous XAML.

Mycontrol1.xaml で、最後TextBoxの要素の後に次の xaml を追加します。In MyControl1.xaml, add the following XAML after the last TextBox element. 複合コントロールの一部が完成しました。 XAMLXAMLThe 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>

分離コード ファイルの実装Implementing the Code-Behind File

分離コードファイル MyControl1.xaml.cs には、次の3つの重要なタスクが実装されています。The code-behind file, MyControl1.xaml.cs, implements three essential tasks:

  1. ユーザーがいずれかのボタンをクリックしたときに発生するイベントを処理します。Handles the event that occurs when the user clicks one of the buttons.

  2. TextBox要素からデータを取得し、カスタムイベント引数オブジェクトでパッケージ化します。Retrieves the data from the TextBox elements, and packages it in a custom event argument object.

  3. カスタムOnButtonClickイベントを発生させます。これにより、ユーザーが終了したことがホストに通知され、データがホストに戻されます。Raises the custom OnButtonClick event, which notifies the host that the user is finished and passes the data back to the host.

コントロールは、外観を変更するための色とフォントの多くのプロパティも公開します。The control also exposes a number of color and font properties that enable you to change the appearance. Windows フォームコントロールをホストするために使用されるElementHost Background クラスとは異なり、クラスはコントロールのプロパティだけをWindowsFormsHost公開します。Unlike the WindowsFormsHost class, which is used to host a Windows Forms control, the ElementHost class exposes the control’s Background property only. このコード例と「チュートリアル:」で説明されている例の類似性を維持するには、次の手順を実行します。WPFで Windows フォーム複合コントロールをホストすると、コントロールは残りのプロパティを直接公開します。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.

分離コード ファイルの基本構造The Basic Structure of the Code-Behind File

分離コードファイルは、 MyControls MyControl1ととMyControlEventArgsいう2つのクラスを含む、1つの名前空間で構成されます。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  
  {  
    //...  
  }  
}  

最初のクラスMyControl1は、mycontrol1.xaml でUIUI定義されているの機能を実装するコードを含む部分クラスです。The first class, MyControl1, is a partial class containing the code that implements the functionality of the UIUI defined in MyControl1.xaml. Mycontrol1.xaml が解析XAMLXAMLされると、は同じ部分クラスに変換され、2つの部分クラスがマージされてコンパイル済みのコントロールを形成します。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. このため、分離コード ファイル内のクラス名は MyControl1.xaml に割り当てられたクラス名と一致する必要があり、コントロールのルート要素から継承する必要があります。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. 2番目のMyControlEventArgsクラスは、データをホストに送信するために使用されるイベント引数クラスです。The second class, MyControlEventArgs, is an event arguments class that is used to send the data back to the host.

MyControl1.xaml.cs を開きます。Open MyControl1.xaml.cs. 次の名前を持ち、からGrid継承するように、既存のクラス宣言を変更します。Change the existing class declaration so that it has the following name and inherits from Grid.

public partial class MyControl1 : Grid

コントロールの初期化Initializing the Control

このコードでは、次の基本タスクを実装します。The following code implements several basic tasks:

  • プライベートイベントOnButtonClick、、およびそれに関連付けられMyControlEventHandlerたデリゲートを宣言します。Declares a private event, OnButtonClick, and its associated delegate, MyControlEventHandler.

  • ユーザーのデータを格納するいくつかのプライベート グローバル変数を作成します。Creates several private global variables that store the user's data. このデータは、対応するプロパティを通じて公開されます。This data is exposed through corresponding properties.

  • コントロールのInit Loadedイベントのハンドラーを実装します。Implements a handler, Init, for the control’s Loaded event. このハンドラーは、MyControl1.xaml で定義された値をグローバル変数に割り当てることで、グローバル変数を初期化します。This handler initializes the global variables by assigning them the values defined in MyControl1.xaml. これを行うには、通常Name TextBlockの要素でnameLabelあるに割り当てられたを使用して、その要素のプロパティ設定にアクセスします。To do this, it uses the Name assigned to a typical TextBlock element, nameLabel, to access that element's property settings.

既存のコンストラクターを削除し、次のコードをMyControl1クラスに追加します。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;
}

ボタンのクリック イベントの処理Handling the Buttons' Click Events

ユーザーは、 [OK ] ボタンまたは [キャンセル] ボタンをクリックして、データ入力タスクが完了したことを示します。The user indicates that the data-entry task is finished by clicking either the OK button or the Cancel button. どちらのボタンも、 Click同じイベントハンドラー ButtonClickedを使用します。Both buttons use the same Click event handler, ButtonClicked. どちらのボタンにも、 btnOKまたbtnCancelはという名前が付いています。これにより、ハンドラーは、 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. ハンドラーは次の処理を行います。The handler does the following:

  • TextBox要素のMyControlEventArgsデータを格納するオブジェクトを作成します。Creates a MyControlEventArgs object that contains the data from the TextBox elements.

  • ユーザーが [キャンセル] ボタンをクリックしたMyControlEventArgs場合はIsOK 、にfalseよってオブジェクトのプロパティがに設定されます。If the user clicked the Cancel button, sets the MyControlEventArgs object's IsOK property to false.

  • ユーザーが終了したことをホストに示すイベントを発生させ、収集したデータを渡します。OnButtonClickRaises the OnButtonClick event to indicate to the host that the user is finished, and passes back the collected data.

メソッドのMyControl1 Init後に、次のコードをクラスに追加します。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);
}

プロパティの作成Creating Properties

クラスの残りの部分では単に、前に説明したグローバル変数に対応するプロパティを公開します。The remainder of the class simply exposes properties that correspond to the global variables discussed previously. プロパティが変更されると、set アクセサーは、対応する要素のプロパティを変更し、基になるグローバル変数を更新することによって、コントロールの外観を変更します。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.

MyControl1クラスに次のコードを追加します。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;
    }
}

ホストへのデータの返送Sending the Data Back to the Host

ファイルの最後のコンポーネントはMyControlEventArgsクラスです。このクラスは、収集されたデータをホストに送り返すために使用されます。The final component in the file is the MyControlEventArgs class, which is used to send the collected data back to the host.

MyControls名前空間に次のコードを追加します。Add the following code to your MyControls namespace. この実装は簡単なので、これ以上の説明はしません。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; }
    }
}

ソリューションをビルドします。Build the solution. ビルドでは、MyControls.dll という名前の DLL が生成されます。The build will produce a DLL named MyControls.dll.

Windows フォーム ホスト アプリケーションの実装Implementing the Windows Forms Host Application

Windows フォームホストアプリケーションは、 ElementHostオブジェクトを使用してWPFWPF複合コントロールをホストします。The Windows Forms host application uses an ElementHost object to host the WPFWPF composite control. アプリケーションは、複合OnButtonClickコントロールからデータを受信するためのイベントを処理します。The application handles the OnButtonClick event to receive the data from the composite control. アプリケーションにはオプションのボタンのセットもあり、それを使用してコントロールの外観を変更することができます。The application also has a set of option buttons that you can use to modify the control’s appearance. 次の図は、アプリケーションを示しています。The following illustration shows the application.

次の図は、Windows フォームアプリケーションでホストされる WPF 複合コントロールを示しています。The following image shows a WPF composite control hosted in a Windows Forms application"

Scteenshot は、Avalon コントロールをホストする Windows フォームを示しています。

プロジェクトの作成Creating the Project

プロジェクトを開始するにはTo start the project:

  1. Visual StudioVisual Studio起動し、 [新しいプロジェクト] ダイアログボックスを開きます。Launch Visual StudioVisual Studio, and open the New Project dialog box.

  2. [ビジュアルC# ] と [Windows] カテゴリで、 [Windows フォームアプリケーション] テンプレートを選択します。In Visual C# and the Windows category, select the Windows Forms Application template.

  3. 新しいプロジェクトに WFHost という名前を付けます。Name the new project WFHost.

  4. 配置場所として、MyControls の配置先と同じ最上位フォルダーを指定します。For the location, specify the same top-level folder that contains the MyControls project.

  5. [OK] をクリックして、プロジェクトを作成します。Click OK to create the project.

また、および他のアセンブリを含むMyControl1 DLL への参照を追加する必要もあります。You also need to add references to the DLL that contains MyControl1 and other assemblies.

  1. ソリューションエクスプローラーでプロジェクト名を右クリックし、 [参照の追加] を選択します。Right-click the project name in Solution Explorer, and select Add Reference.

  2. [参照] タブをクリックし、mycontrols.dll が含まれているフォルダーを参照します。Click the Browse tab, and browse to the folder that contains MyControls.dll. このチュートリアルの場合は、MyControls\bin\Debug フォルダーです。For this walkthrough, this folder is MyControls\bin\Debug.

  3. [Mycontrols.dll] を選択し、 [OK] をクリックします。Select MyControls.dll, and then click OK.

  4. 次のアセンブリへの参照を追加します。Add references to the following assemblies.

    • PresentationCorePresentationCore

    • PresentationFrameworkPresentationFramework

    • System.XamlSystem.Xaml

    • WindowsBaseWindowsBase

    • WindowsFormsIntegrationWindowsFormsIntegration

アプリケーションのユーザー インターフェイスの実装Implementing the User Interface for the Application

Windows フォーム アプリケーションの UI には、WPF 複合コントロールを操作するいくつかのコントロールが含まれています。The UI for the Windows Form application contains several controls to interact with the WPF composite control.

  1. Windows フォーム デザイナーで、Form1 を開きます。Open Form1 in the Windows Form Designer.

  2. コントロールを配置するためにフォームを拡大します。Enlarge the form to accommodate the controls.

  3. フォームの右上隅に、 System.Windows.Forms.Panel WPFWPF複合コントロールを保持するコントロールを追加します。In the upper-right corner of the form, add a System.Windows.Forms.Panel control to hold the WPFWPF composite control.

  4. System.Windows.Forms.GroupBoxのコントロールをフォームに追加します。Add the following System.Windows.Forms.GroupBox controls to the form.

    名前Name テキストText
    groupBox1groupBox1 背景色Background Color
    groupBox2groupBox2 前景色Foreground Color
    groupBox3groupBox3 フォント サイズFont Size
    groupBox4groupBox4 フォント ファミリFont Family
    groupBox5groupBox5 [スタイル]Font Style
    groupBox6groupBox6 フォントの太さFont Weight
    groupBox7groupBox7 コントロールからのデータData from control
  5. コントロールに次System.Windows.Forms.RadioButtonのコントロールを追加します。 System.Windows.Forms.GroupBoxAdd the following System.Windows.Forms.RadioButton controls to the System.Windows.Forms.GroupBox controls.

    GroupBoxGroupBox 名前Name テキストText
    groupBox1groupBox1 radioBackgroundOriginalradioBackgroundOriginal Original
    groupBox1groupBox1 radioBackgroundLightGreenradioBackgroundLightGreen ライトグリーンLightGreen
    groupBox1groupBox1 radioBackgroundLightSalmonradioBackgroundLightSalmon ライトサーモンLightSalmon
    groupBox2groupBox2 radioForegroundOriginalradioForegroundOriginal Original
    groupBox2groupBox2 radioForegroundRedradioForegroundRed Red
    groupBox2groupBox2 radioForegroundYellowradioForegroundYellow Yellow
    groupBox3groupBox3 radioSizeOriginalradioSizeOriginal Original
    groupBox3groupBox3 radioSizeTenradioSizeTen 1010
    groupBox3groupBox3 radioSizeTwelveradioSizeTwelve 1212
    groupBox4groupBox4 radioFamilyOriginalradioFamilyOriginal Original
    groupBox4groupBox4 radioFamilyTimesradioFamilyTimes MS PゴシックTimes New Roman
    groupBox4groupBox4 radioFamilyWingDingsradioFamilyWingDings WingDingsWingDings
    groupBox5groupBox5 radioStyleOriginalradioStyleOriginal 標準Normal
    groupBox5groupBox5 radioStyleItalicradioStyleItalic [斜体]Italic
    groupBox6groupBox6 radioWeightOriginalradioWeightOriginal Original
    groupBox6groupBox6 radioWeightBoldradioWeightBold [太字]Bold
  6. System.Windows.Forms.Labelのコントロールを最後System.Windows.Forms.GroupBoxのに追加します。Add the following System.Windows.Forms.Label controls to the last System.Windows.Forms.GroupBox. これらのコントロールはWPFWPF 、複合コントロールによって返されるデータを表示します。These controls display the data returned by the WPFWPF composite control.

    GroupBoxGroupBox 名前Name テキストText
    groupBox7groupBox7 lblNamelblName 名前:Name:
    groupBox7groupBox7 lblAddresslblAddress 番地:Street Address:
    groupBox7groupBox7 lblCitylblCity 市区町村:City:
    groupBox7groupBox7 lblStatelblState 都道府県:State:
    groupBox7groupBox7 lblZiplblZip 郵便番号:Zip:

フォームの初期化Initializing the Form

通常、フォームのLoadイベントハンドラーにホストコードを実装します。You generally implement the hosting code in the form's Load event handler. 次のコードは、 Loadイベントハンドラー、 WPFWPF複合コントロールのLoadedイベントのハンドラー、および後で使用されるいくつかのグローバル変数の宣言を示しています。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.

Windows フォームデザイナーで、フォームをダブルクリックしてイベントハンドラーをLoad作成します。In the Windows Forms Designer, double-click the form to create a Load event handler. Form1.cs の先頭に、次usingのステートメントを追加します。At the top of Form1.cs, add the following using statements.

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

既存Form1のクラスの内容を次のコードに置き換えます。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;
}

Form1_Loadのコードのメソッドは、コントロールをホストするWPFWPFための一般的な手順を示しています。The Form1_Load method in the preceding code shows the general procedure for hosting a WPFWPF control:

  1. 新しいElementHostオブジェクトを作成します。Create a new ElementHost object.

  2. コントロールのDockプロパティをにDockStyle.Fill設定します。Set the control's Dock property to DockStyle.Fill.

  3. コントロールをコントロールのControlsコレクションに追加します。 Panel ElementHostAdd the ElementHost control to the Panel control's Controls collection.

  4. WPFWPFコントロールのインスタンスを作成します。Create an instance of the WPFWPF control.

  5. コントロールをElementHostコントロールのChildプロパティに割り当てることによって、フォーム上で複合コントロールをホストします。Host the composite control on the form by assigning the control to the ElementHost control's Child property.

Form1_Loadメソッドの残りの2行は、次の2つのコントロールイベントにハンドラーをアタッチします。The remaining two lines in the Form1_Load method attach handlers to two control events:

  • OnButtonClickは、ユーザーが [OK] または [キャンセル] ボタンをクリックしたときに、複合コントロールによって起動されるカスタムイベントです。OnButtonClick is a custom event that is fired by the composite control when the user clicks the OK or Cancel button. このイベントを処理してユーザーの応答を取得し、ユーザーが指定したデータをすべて収集します。You handle the event to get the user's response and to collect any data that the user specified.

  • Loadedは、 WPFWPFコントロールが完全に読み込まれたときにコントロールによって発生する標準イベントです。Loaded is a standard event that is raised by a WPFWPF control when it is fully loaded. ここでこのイベントを使用するのは、この例ではこのコントロールからのプロパティを使用して複数のグローバル変数を初期化する必要があるからです。The event is used here because the example needs to initialize several global variables using properties from the control. フォームのLoadイベントの時点では、コントロールは完全には読み込まれず、これらの値はまだnullに設定されています。At the time of the form's Load event, the control is not fully loaded and those values are still set to null. これらのプロパティにアクセスするにはLoaded 、コントロールのイベントが発生するまで待機する必要があります。You need to wait until the control’s Loaded event occurs before you can access those properties.

イベントLoadedハンドラーは、前のコードに示されています。The Loaded event handler is shown in the preceding code. このOnButtonClickハンドラーについては、次のセクションで説明します。The OnButtonClick handler is discussed in the next section.

OnButtonClick の処理Handling OnButtonClick

イベントOnButtonClickは、ユーザーが [OK] または [キャンセル] ボタンをクリックしたときに発生します。The OnButtonClick event occurs when the user clicks the OK or Cancel button.

イベントハンドラーは、イベント引数のIsOKフィールドをチェックして、どのボタンがクリックされたかを判断します。The event handler checks the event argument's IsOK field to determine which button was clicked. lbl データLabel変数は、前に説明したコントロールに対応します。The lbldata variables correspond to the Label controls that were discussed earlier. ユーザーが [OK ] ボタンをクリックすると、コントロールのTextBoxコントロールのデータが対応Labelするコントロールに割り当てられます。If the user clicks the OK button, the data from the control’s TextBox controls is assigned to the corresponding Label control. ユーザーが [キャンセル] をTextクリックした場合、値は既定の文字列に設定されます。If the user clicks Cancel, the Text values are set to the default strings.

次のボタンクリックイベントハンドラーコードをForm1クラスに追加します。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: ";
    }
}

アプリケーションをビルドして実行します。Build and run the application. WPF 複合コントロールにテキストを追加し、[ OK] をクリックします。Add some text in the WPF composite control and then click OK. そのテキストがラベルに表示されます。The text appears in the labels. この時点で、オプション ボタンを処理するコードは追加されていません。At this point, code has not been added to handle the radio buttons.

コントロールの外観の変更Modifying the Appearance of the Control

フォーム上のWPFWPF コントロールを使用すると、ユーザーは複合コントロールの前景色と背景色、およびいくつかのフォントプロパティをRadioButton変更できます。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. 背景色は、 ElementHostオブジェクトによって公開されます。The background color is exposed by the ElementHost object. 残りのプロパティは、コントロールのカスタム プロパティとして公開されます。The remaining properties are exposed as custom properties of the control.

フォーム上の各RadioButtonコントロールをダブルクリックしてCheckedChanged 、イベントハンドラーを作成します。Double-click each RadioButton control on the form to create CheckedChanged event handlers. CheckedChangedイベントハンドラーを次のコードに置き換えます。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;
}

アプリケーションをビルドして実行します。Build and run the application. 別のオプション ボタンをクリックして、WPF 複合コントロール上の影響を確認します。Click the different radio buttons to see the effect on the WPF composite control.

関連項目See also