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

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) は、アプリケーションの作成に適した環境を提供します。provides a rich environment for creating applications. ただし Windows フォームWindows Forms コードに多大な投資をしている場合は、最初から書き換えるのではなく、少なくともそのコードの一部を WPFWPF アプリケーションで再利用する方が効率的な場合があります。However, when you have a substantial investment in Windows フォームWindows Forms code, it can be more effective to reuse at least some of that code in your WPFWPF application rather than to rewrite it from scratch. 最も一般的なシナリオは、既存の Windows フォームコントロールがある場合です。The most common scenario is when you have existing Windows Forms controls. 場合によっては、これらのコントロールのソースコードにアクセスできないこともあります。In some cases, you might not even have access to the source code for these controls. WPFWPF には、このようなコントロールを WPFWPF アプリケーションでホストするための簡単な手順が用意されています。provides a straightforward procedure for hosting such controls in a WPFWPF application. たとえば、特殊な DataGridView コントロールをホストしているときに、ほとんどのプログラミングで WPFWPF を使用できます。For example, you can use WPFWPF for most of your programming while hosting your specialized DataGridView controls.

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

このチュートリアルは、2 つのセクションに分かれています。The walkthrough is divided into two sections. 最初のセクションでは、Windows フォーム複合コントロールの実装について簡単に説明します。The first section briefly describes the implementation of the Windows Forms composite control. 2番目のセクションでは、WPFWPF アプリケーションで複合コントロールをホストする方法、コントロールからイベントを受信する方法、およびコントロールのプロパティの一部にアクセスする方法の詳細について説明します。The second section discusses in detail how to host the composite control in a WPFWPF application, receive events from the control, and access some of the control's properties.

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

  • Windows フォーム複合コントロールの実装。Implementing the Windows Forms composite control.

  • WPF ホストアプリケーションの実装。Implementing the WPF host application.

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

必要条件Prerequisites

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

Windows フォーム複合コントロールの実装Implementing the Windows Forms Composite Control

この例で使用される複合コントロール Windows フォームは、単純なデータ入力フォームです。The Windows Forms composite control used in this example is a simple data-entry form. このフォームは、ユーザーの名前とアドレスを受け取り、カスタムイベントを使用してその情報をホストに返します。This form takes the user's name and address and then uses a custom event to return that information to the host. 次の図はレンダリングされたコントロールを示しています。The following illustration shows the rendered control.

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

単純な Windows フォームコントロールを示すスクリーンショット。

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

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

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

  2. ウィンドウ カテゴリで、 Windows フォームコントロールライブラリ テンプレートを選択します。In the Window category, select the Windows Forms Control Library template.

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

  4. [場所] には、WpfHostingWindowsFormsControlなど、便利な名前の付いたトップレベルフォルダーを指定します。For the location, specify a conveniently named top-level folder, such as WpfHostingWindowsFormsControl. このフォルダーには後でホスト アプリケーションも配置します。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 the project.

  • システムSystem

  • System.DataSystem.Data

  • System.DrawingSystem.Drawing

  • System.Windows.FormsSystem.Windows.Forms

  • System.XmlSystem.Xml

フォームへのコントロールの追加Adding Controls to the Form

フォームにコントロールを追加するには、次のようにします。To add controls to the form:

  • デザイナーで MyControl1 を開きます。Open MyControl1 in the designer.

上の図に示すように、5つの Label コントロールとそれに対応する TextBox コントロールを、フォームに追加します。Add five Label controls and their corresponding TextBox controls, sized and arranged as they are in the preceding illustration, on the form. この例では、TextBox コントロールにという名前が付けられています。In the example, the TextBox controls are named:

  • txtName

  • txtAddress

  • txtCity

  • txtState

  • txtZip

[OK][キャンセル] というラベルの付いた Button コントロールを2つ追加します。Add two Button controls labeled OK and Cancel. この例では、ボタン名はそれぞれ btnOKbtnCancelます。In the example, the button names are btnOK and btnCancel, respectively.

サポートコードの実装Implementing the Supporting Code

コードビューでフォームを開きます。Open the form in code view. コントロールは、カスタム OnButtonClick イベントを発生させることによって、収集されたデータをホストに返します。The control returns the collected data to its host by raising the custom OnButtonClick event. データは、イベント引数オブジェクトに格納されます。The data is contained in the event argument object. 次のコードは、イベントとデリゲート宣言を示しています。The following code shows the event and delegate declaration.

MyControl1 クラスに次のコードを追加します。Add the following code to the MyControl1 class.

public delegate void MyControlEventHandler(object sender, MyControlEventArgs args);
public event MyControlEventHandler OnButtonClick;
Public Delegate Sub MyControlEventHandler(ByVal sender As Object, ByVal args As MyControlEventArgs)
Public Event OnButtonClick As MyControlEventHandler

MyControlEventArgs クラスには、ホストに返される情報が含まれています。The MyControlEventArgs class contains the information to be returned to the host.

次のクラスをフォームに追加します。Add the following class to the form.

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; }
    }
}
Public Class MyControlEventArgs
    Inherits EventArgs
    Private _Name As String
    Private _StreetAddress As String
    Private _City As String
    Private _State As String
    Private _Zip As String
    Private _IsOK As Boolean
    
    
    Public Sub New(ByVal result As Boolean, ByVal name As String, ByVal address As String, ByVal city As String, ByVal state As String, ByVal zip As String) 
        _IsOK = result
        _Name = name
        _StreetAddress = address
        _City = city
        _State = state
        _Zip = zip
    
    End Sub
    
    
    Public Property MyName() As String 
        Get
            Return _Name
        End Get
        Set
            _Name = value
        End Set
    End Property
    
    Public Property MyStreetAddress() As String 
        Get
            Return _StreetAddress
        End Get
        Set
            _StreetAddress = value
        End Set
    End Property
    
    Public Property MyCity() As String 
        Get
            Return _City
        End Get
        Set
            _City = value
        End Set
    End Property
    
    Public Property MyState() As String 
        Get
            Return _State
        End Get
        Set
            _State = value
        End Set
    End Property
    
    Public Property MyZip() As String 
        Get
            Return _Zip
        End Get
        Set
            _Zip = value
        End Set
    End Property
    
    Public Property IsOK() As Boolean 
        Get
            Return _IsOK
        End Get
        Set
            _IsOK = value
        End Set
    End Property
End Class

ユーザーが [OK] または [キャンセル] ボタンをクリックすると、Click イベントハンドラーによって、データを含む MyControlEventArgs オブジェクトが作成され、OnButtonClick イベントが発生します。When the user clicks the OK or Cancel button, the Click event handlers create a MyControlEventArgs object that contains the data and raises the OnButtonClick event. 2つのハンドラーの唯一の違いは、イベント引数の IsOK プロパティです。The only difference between the two handlers is the event argument's IsOK property. このプロパティを使用すると、ホストはどのボタンがクリックされたかを判断できます。This property enables the host to determine which button was clicked. [OK ] ボタンの true に設定され、 [キャンセル] ボタンの false ます。It is set to true for the OK button, and false for the Cancel button. 次のコードは、2つのボタンハンドラーを示しています。The following code shows the two button handlers.

MyControl1 クラスに次のコードを追加します。Add the following code to the MyControl1 class.

private void btnOK_Click(object sender, System.EventArgs e)
{

    MyControlEventArgs retvals = new MyControlEventArgs(true,
                                                         txtName.Text,
                                                         txtAddress.Text,
                                                         txtCity.Text,
                                                         txtState.Text,
                                                         txtZip.Text);
    OnButtonClick(this, retvals);
}

private void btnCancel_Click(object sender, System.EventArgs e)
{
    MyControlEventArgs retvals = new MyControlEventArgs(false,
                                                         txtName.Text,
                                                         txtAddress.Text,
                                                         txtCity.Text,
                                                         txtState.Text,
                                                         txtZip.Text);
    OnButtonClick(this, retvals);
}
Private Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click

    Dim retvals As New MyControlEventArgs(True, txtName.Text, txtAddress.Text, txtCity.Text, txtState.Text, txtZip.Text)
    RaiseEvent OnButtonClick(Me, retvals)

End Sub

Private Sub btnCancel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancel.Click
    Dim retvals As New MyControlEventArgs(False, txtName.Text, txtAddress.Text, txtCity.Text, txtState.Text, txtZip.Text)
    RaiseEvent OnButtonClick(Me, retvals)

End Sub

アセンブリに厳密な名前を付け、アセンブリをビルドするGiving the Assembly a Strong Name and Building the Assembly

このアセンブリを WPFWPF アプリケーションで参照するには、厳密な名前を持つ必要があります。For this assembly to be referenced by a WPFWPF application, it must have a strong name. 厳密な名前を作成するには、Sn.exe でキーファイルを作成し、プロジェクトに追加します。To create a strong name, create a key file with Sn.exe and add it to your project.

  1. Visual Studio コマンド プロンプトを開きます。Open a Visual Studio command prompt. これを行うには、 [スタート] メニューをクリックし、すべてのプログラム、Microsoft Visual Studio 2010、Visual Studio Tools、 [Visual Studio コマンドプロンプト] の順に選択します。To do so, click the Start menu, and then select All Programs/Microsoft Visual Studio 2010/Visual Studio Tools/Visual Studio Command Prompt. これにより、環境変数がカスタマイズされたコンソールウィンドウが起動します。This launches a console window with customized environment variables.

  2. コマンドプロンプトで、cd コマンドを使用してプロジェクトフォルダーにアクセスします。At the command prompt, use the cd command to go to your project folder.

  3. 次のコマンドを実行して、Mycontrols.dll という名前のキーファイルを生成します。Generate a key file named MyControls.snk by running the following command.

    Sn.exe -k MyControls.snk
    
  4. キーファイルをプロジェクトに含めるには、ソリューションエクスプローラーでプロジェクト名を右クリックし、 [プロパティ] をクリックします。To include the key file in your project, right-click the project name in Solution Explorer and then click Properties. プロジェクトデザイナーで、 [署名] タブをクリックし、 [アセンブリの署名] チェックボックスをオンにして、キーファイルを参照します。In the Project Designer, click the Signing tab, select the Sign the assembly check box and then browse to your key file.

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

WPF ホストアプリケーションの実装Implementing the WPF Host Application

WPFWPF ホストアプリケーションは、WindowsFormsHost コントロールを使用して MyControl1をホストします。The WPFWPF host application uses the WindowsFormsHost control to host MyControl1. アプリケーションは、コントロールからデータを受信するために OnButtonClick イベントを処理します。The application handles the OnButtonClick event to receive the data from the control. また、WPFWPF アプリケーションからコントロールのプロパティの一部を変更できるようにするオプションボタンのコレクションも用意されています。It also has a collection of option buttons that enable you to change some of the control's properties from the WPFWPF application. 完成したアプリケーションを次の図に示します。The following illustration shows the finished application.

次の図は、WPF アプリケーションに埋め込まれたコントロールを含む、完全なアプリケーションを示しています。The following image shows the complete application, including the control embedded in the WPF application:

WPF ページに埋め込まれたコントロールを示すスクリーンショット。

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

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

  1. Visual Studio を開き、 [新しいプロジェクト] を選択します。Open Visual Studio, and select New Project.

  2. ウィンドウ カテゴリで、 WPF アプリケーション テンプレートを選択します。In the Window category, select the WPF Application template.

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

  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. Windowsフォーム統合アセンブリへの参照を追加します。このアセンブリには、Windowsフォーム統合 dll という名前が付けられています。Add a reference to the WindowsFormsIntegration assembly, which is named WindowsFormsIntegration.dll.

基本レイアウトの実装Implementing the Basic Layout

ホストアプリケーションの ユーザー インターフェイス (UI)user interface (UI) は、Mainwindow.xaml に実装されています。The ユーザー インターフェイス (UI)user interface (UI) of the host application is implemented in MainWindow.xaml. このファイルには、レイアウトを定義し、Windows フォームコントロールをホストする Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) マークアップが含まれています。This file contains Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) markup that defines the layout, and hosts the Windows Forms control. アプリケーションは、次の3つのリージョンに分割されます。The application is divided into three regions:

  • [コントロールのプロパティ] パネル。このパネルには、ホストされているコントロールのさまざまなプロパティを変更するために使用できるオプションボタンのコレクションが含まれています。The Control Properties panel, which contains a collection of option buttons that you can use to modify various properties of the hosted control.

  • コントロールパネルのデータ。ホストされるコントロールから返されたデータを表示する TextBlock 要素がいくつか含まれています。The Data from Control panel, which contains several TextBlock elements that display the data returned from the hosted control.

  • ホストされるコントロール自体。The hosted control itself.

基本的なレイアウトを次の XAML に示します。The basic layout is shown in the following XAML. MyControl1 をホストするために必要なマークアップは、この例では省略されていますが、後で説明します。The markup that is needed to host MyControl1 is omitted from this example, but will be discussed later.

Mainwindow.xaml の XAML を次のように置き換えます。Replace the XAML in MainWindow.xaml with the following. Visual Basic を使用している場合は、クラスを x:Class="MainWindow"に変更します。If you are using Visual Basic, change the class to x:Class="MainWindow".

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="WpfHost.MainWindow"
      xmlns:mcl="clr-namespace:MyControls;assembly=MyControls"
      Loaded="Init">
  <DockPanel>
    <DockPanel.Resources>
      <Style x:Key="inlineText" TargetType="{x:Type Inline}">
        <Setter Property="FontWeight" Value="Normal"/>
      </Style>
      <Style x:Key="titleText" TargetType="{x:Type TextBlock}">
        <Setter Property="DockPanel.Dock" Value="Top"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Margin" Value="10,5,10,0"/>
      </Style>
    </DockPanel.Resources>

    <StackPanel Orientation="Vertical"
                DockPanel.Dock="Left"
                Background="Bisque"
                Width="250">

      <TextBlock  Margin="10,10,10,10"
                  FontWeight="Bold"
                  FontSize="12">Control Properties</TextBlock>
      <TextBlock Style="{StaticResource titleText}">Background Color</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnOriginalBackColor"
                    IsChecked="True"
                    Click="BackColorChanged">Original</RadioButton>
        <RadioButton Name="rdbtnBackGreen"
                    Click="BackColorChanged">LightGreen</RadioButton>
        <RadioButton Name="rdbtnBackSalmon"
                    Click="BackColorChanged">LightSalmon</RadioButton>
      </StackPanel>

      <TextBlock Style="{StaticResource titleText}">Foreground Color</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnOriginalForeColor"
                    IsChecked="True"
                    Click="ForeColorChanged">Original</RadioButton>
        <RadioButton Name="rdbtnForeRed"
                    Click="ForeColorChanged">Red</RadioButton>
        <RadioButton Name="rdbtnForeYellow"
                    Click="ForeColorChanged">Yellow</RadioButton>
      </StackPanel>

      <TextBlock Style="{StaticResource titleText}">Font Family</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnOriginalFamily"
                     IsChecked="True"
                    Click="FontChanged">Original</RadioButton>
        <RadioButton Name="rdbtnTimes"
                    Click="FontChanged">Times New Roman</RadioButton>
        <RadioButton Name="rdbtnWingdings"
                    Click="FontChanged">Wingdings</RadioButton>
      </StackPanel>

      <TextBlock Style="{StaticResource titleText}">Font Size</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnOriginalSize"
                    IsChecked="True"
                    Click="FontSizeChanged">Original</RadioButton>
        <RadioButton Name="rdbtnTen"
                    Click="FontSizeChanged">10</RadioButton>
        <RadioButton Name="rdbtnTwelve"
                    Click="FontSizeChanged">12</RadioButton>
      </StackPanel>

      <TextBlock Style="{StaticResource titleText}">Font Style</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnNormalStyle"
                     IsChecked="True"
                     Click="StyleChanged">Original</RadioButton>
        <RadioButton Name="rdbtnItalic"
                     Click="StyleChanged">Italic</RadioButton>
      </StackPanel>

      <TextBlock Style="{StaticResource titleText}">Font Weight</TextBlock>
      <StackPanel Margin="10,10,10,10">
        <RadioButton Name="rdbtnOriginalWeight"
                     IsChecked="True"
                   Click="WeightChanged">
          Original
        </RadioButton>
        <RadioButton Name="rdbtnBold"
                   Click="WeightChanged">Bold</RadioButton>
      </StackPanel>
    </StackPanel>

    <WindowsFormsHost Name="wfh"
                     DockPanel.Dock="Top"
                     Height="300">
      <mcl:MyControl1 Name="mc"/>
    </WindowsFormsHost>
    
    <StackPanel Orientation="Vertical"
                Height="Auto"
                Background="LightBlue">
      <TextBlock Margin="10,10,10,10"
            FontWeight="Bold"
            FontSize="12">Data From Control</TextBlock>
      <TextBlock Style="{StaticResource titleText}">
        Name: <Span Name="txtName" Style="{StaticResource inlineText}"/>
      </TextBlock>
      <TextBlock Style="{StaticResource titleText}">
        Street Address: <Span Name="txtAddress" Style="{StaticResource inlineText}"/>
      </TextBlock>
      <TextBlock Style="{StaticResource titleText}">
        City: <Span Name="txtCity" Style="{StaticResource inlineText}"/>
      </TextBlock>
      <TextBlock Style="{StaticResource titleText}">
        State: <Span Name="txtState" Style="{StaticResource inlineText}"/>
      </TextBlock>
      <TextBlock Style="{StaticResource titleText}">
        Zip: <Span Name="txtZip" Style="{StaticResource inlineText}"/>
      </TextBlock>
    </StackPanel>
  </DockPanel>
</Window>

最初の StackPanel 要素には、ホストされるコントロールのさまざまな既定のプロパティを変更できるようにする、RadioButton コントロールのセットがいくつか含まれています。The first StackPanel element contains several sets of RadioButton controls that enable you to modify various default properties of the hosted control. その後に、MyControl1をホストする WindowsFormsHost 要素が続きます。That is followed by a WindowsFormsHost element, which hosts MyControl1. 最後の StackPanel 要素には、ホストされるコントロールによって返されるデータを表示するいくつかの TextBlock 要素が含まれています。The final StackPanel element contains several TextBlock elements that display the data that is returned by the hosted control. 要素の順序、および Dock および Height の属性の設定によって、ホストされるコントロールがギャップやひずみなしでウィンドウに埋め込まれます。The ordering of the elements and the Dock and Height attribute settings embed the hosted control into the window with no gaps or distortion.

コントロールのホストHosting the Control

前の XAML の次の編集されたバージョンは、MyControl1をホストするために必要な要素に焦点を当てています。The following edited version of the previous XAML focuses on the elements that are needed to host MyControl1.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="WpfHost.MainWindow"
      xmlns:mcl="clr-namespace:MyControls;assembly=MyControls"
      Loaded="Init">
<WindowsFormsHost Name="wfh"
                 DockPanel.Dock="Top"
                 Height="300">
  <mcl:MyControl1 Name="mc"/>
</WindowsFormsHost>

xmlns 名前空間マッピング属性は、ホストされているコントロールを含む MyControls 名前空間への参照を作成します。The xmlns namespace mapping attribute creates a reference to the MyControls namespace that contains the hosted control. このマッピングにより、XAMLXAMLMyControl1<mcl:MyControl1>として表すことができます。This mapping enables you to represent MyControl1 in XAMLXAML as <mcl:MyControl1>.

XAML の2つの要素は、ホストを処理します。Two elements in the XAML handle the hosting:

  • WindowsFormsHost は、WPFWPF アプリケーションで Windows フォームコントロールをホストできるようにする WindowsFormsHost 要素を表します。WindowsFormsHost represents the WindowsFormsHost element that enables you to host a Windows Forms control in a WPFWPF application.

  • MyControl1を表す mcl:MyControl1は、WindowsFormsHost 要素の子コレクションに追加されます。mcl:MyControl1, which represents MyControl1, is added to the WindowsFormsHost element's child collection. その結果、この Windows フォームコントロールは WPFWPF ウィンドウの一部としてレンダリングされ、アプリケーションからコントロールと通信できます。As a result, this Windows Forms control is rendered as part of the WPFWPF window, and you can communicate with the control from the application.

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

分離コードファイル Mainwindow.xaml または MainWindow.xaml.cs には、前のセクションで説明した UIUI の機能を実装する手続き型のコードが含まれています。The code-behind file, MainWindow.xaml.vb or MainWindow.xaml.cs, contains the procedural code that implements the functionality of the UIUI discussed in the preceding section. 主なタスクは次のとおりです。The primary tasks are:

  • イベントハンドラーを MyControl1OnButtonClick イベントにアタッチしています。Attaching an event handler to MyControl1's OnButtonClick event.

  • オプションボタンのコレクションの設定方法に基づいて、MyControl1のさまざまなプロパティを変更します。Modifying various properties of MyControl1, based on how the collection of option buttons are set.

  • コントロールによって収集されたデータを表示します。Displaying the data collected by the control.

アプリケーションの初期化Initializing the Application

初期化コードは、ウィンドウの Loaded イベントのイベントハンドラーに含まれており、コントロールの OnButtonClick イベントにイベントハンドラーをアタッチします。The initialization code is contained in an event handler for the window's Loaded event and attaches an event handler to the control's OnButtonClick event.

Mainwindow.xaml または MainWindow.xaml.cs で、次のコードを MainWindow クラスに追加します。In MainWindow.xaml.vb or MainWindow.xaml.cs, add the following code to the MainWindow class.

private Application app;
private Window myWindow;
FontWeight initFontWeight;
Double initFontSize;
FontStyle initFontStyle;
SolidColorBrush initBackBrush;
SolidColorBrush initForeBrush;
FontFamily initFontFamily;
bool UIIsReady = false;

private void Init(object sender, EventArgs e)
{
    app = System.Windows.Application.Current;
    myWindow = (Window)app.MainWindow;
    myWindow.SizeToContent = SizeToContent.WidthAndHeight;
    wfh.TabIndex = 10;
    initFontSize = wfh.FontSize;
    initFontWeight = wfh.FontWeight;
    initFontFamily = wfh.FontFamily;
    initFontStyle = wfh.FontStyle;
    initBackBrush = (SolidColorBrush)wfh.Background;
    initForeBrush = (SolidColorBrush)wfh.Foreground;
    (wfh.Child as MyControl1).OnButtonClick += new MyControl1.MyControlEventHandler(Pane1_OnButtonClick);
    UIIsReady = true;
}
Private app As Application
Private myWindow As Window
Private initFontWeight As FontWeight
Private initFontSize As [Double]
Private initFontStyle As FontStyle
Private initBackBrush As SolidColorBrush
Private initForeBrush As SolidColorBrush
Private initFontFamily As FontFamily
Private UIIsReady As Boolean = False


Private Sub Init(ByVal sender As Object, ByVal e As RoutedEventArgs)
    app = System.Windows.Application.Current
    myWindow = CType(app.MainWindow, Window)
    myWindow.SizeToContent = SizeToContent.WidthAndHeight
    wfh.TabIndex = 10
    initFontSize = wfh.FontSize
    initFontWeight = wfh.FontWeight
    initFontFamily = wfh.FontFamily
    initFontStyle = wfh.FontStyle
    initBackBrush = CType(wfh.Background, SolidColorBrush)
    initForeBrush = CType(wfh.Foreground, SolidColorBrush)

    Dim mc As MyControl1 = wfh.Child

    AddHandler mc.OnButtonClick, AddressOf Pane1_OnButtonClick
    UIIsReady = True

End Sub

前に説明した XAMLXAMLWindowsFormsHost 要素の子要素コレクションに MyControl1 追加されているため、WindowsFormsHost 要素の Child をキャストして MyControl1への参照を取得できます。Because the XAMLXAML discussed previously added MyControl1 to the WindowsFormsHost element's child element collection, you can cast the WindowsFormsHost element's Child to get the reference to MyControl1. その後、その参照を使用して、OnButtonClickにイベントハンドラーをアタッチできます。You can then use that reference to attach an event handler to OnButtonClick.

コントロール自体への参照を提供するだけでなく、WindowsFormsHost は、アプリケーションから操作できるコントロールのプロパティをいくつか公開します。In addition to providing a reference to the control itself, WindowsFormsHost exposes a number of the control's properties, which you can manipulate from the application. 初期化コードは、これらの値をプライベートグローバル変数に割り当てて、後でアプリケーションで使用できるようにします。The initialization code assigns those values to private global variables for later use in the application.

MyControls DLL の型に簡単にアクセスできるようにするには、ファイルの先頭に次の Imports または using ステートメントを追加します。So that you can easily access the types in the MyControls DLL, add the following Imports or using statement to the top of the file.

Imports MyControls
using MyControls;

OnButtonClick イベントの処理Handling the OnButtonClick Event

ユーザーがコントロールのボタンのいずれかをクリックすると、MyControl1 によって OnButtonClick イベントが発生します。MyControl1 raises the OnButtonClick event when the user clicks either of the control's buttons.

MainWindow クラスに次のコードを追加します。Add the following code to the MainWindow class.

//Handle button clicks on the Windows Form control
private void Pane1_OnButtonClick(object sender, MyControlEventArgs args)
{
    txtName.Inlines.Clear();
    txtAddress.Inlines.Clear();
    txtCity.Inlines.Clear();
    txtState.Inlines.Clear();
    txtZip.Inlines.Clear();

    if (args.IsOK)
    {
        txtName.Inlines.Add( " " + args.MyName );
        txtAddress.Inlines.Add( " " + args.MyStreetAddress );
        txtCity.Inlines.Add( " " + args.MyCity );
        txtState.Inlines.Add( " " + args.MyState );
        txtZip.Inlines.Add( " " + args.MyZip );
    }
}
'Handle button clicks on the Windows Form control
Private Sub Pane1_OnButtonClick(ByVal sender As Object, ByVal args As MyControlEventArgs)
    txtName.Inlines.Clear()
    txtAddress.Inlines.Clear()
    txtCity.Inlines.Clear()
    txtState.Inlines.Clear()
    txtZip.Inlines.Clear()

    If args.IsOK Then
        txtName.Inlines.Add(" " + args.MyName)
        txtAddress.Inlines.Add(" " + args.MyStreetAddress)
        txtCity.Inlines.Add(" " + args.MyCity)
        txtState.Inlines.Add(" " + args.MyState)
        txtZip.Inlines.Add(" " + args.MyZip)
    End If

End Sub

テキストボックス内のデータは、MyControlEventArgs オブジェクトにパックされます。The data in the text boxes is packed into the MyControlEventArgs object. ユーザーが [OK ] ボタンをクリックすると、イベントハンドラーによってデータが抽出され、MyControl1下のパネルに表示されます。If the user clicks the OK button, the event handler extracts the data and displays it in the panel below MyControl1.

コントロールのプロパティの変更Modifying the Control’s Properties

WindowsFormsHost 要素は、ホストされているコントロールの既定のプロパティのいくつかを公開します。The WindowsFormsHost element exposes several of the hosted control's default properties. その結果、アプリケーションのスタイルに合わせてコントロールの外観を変更することができます。As a result, you can change the appearance of the control to match the style of your application more closely. 左側のパネルにあるオプションボタンのセットを使用すると、ユーザーはいくつかの色とフォントのプロパティを変更できます。The sets of option buttons in the left panel enable the user to modify several color and font properties. 各ボタンのセットには、Click イベントのハンドラーがあります。このハンドラーによって、ユーザーのオプションボタンの選択が検出され、コントロールの対応するプロパティが変更されます。Each set of buttons has a handler for the Click event, which detects the user's option button selections and changes the corresponding property on the control.

MainWindow クラスに次のコードを追加します。Add the following code to the MainWindow class.

private void BackColorChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnBackGreen)
        wfh.Background = new SolidColorBrush(Colors.LightGreen);
    else if (sender == rdbtnBackSalmon)
        wfh.Background = new SolidColorBrush(Colors.LightSalmon);
    else if (UIIsReady == true)
        wfh.Background = initBackBrush;
}

private void ForeColorChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnForeRed)
        wfh.Foreground = new SolidColorBrush(Colors.Red);
    else if (sender == rdbtnForeYellow)
        wfh.Foreground = new SolidColorBrush(Colors.Yellow);
    else if (UIIsReady == true)
        wfh.Foreground = initForeBrush;
}

private void FontChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnTimes)
        wfh.FontFamily = new FontFamily("Times New Roman");
    else if (sender == rdbtnWingdings)
        wfh.FontFamily = new FontFamily("Wingdings");
    else if (UIIsReady == true)
        wfh.FontFamily = initFontFamily;
}
private void FontSizeChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnTen)
        wfh.FontSize = 10;
    else if (sender == rdbtnTwelve)
        wfh.FontSize = 12;
    else if (UIIsReady == true)
        wfh.FontSize = initFontSize;
}
private void StyleChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnItalic)
        wfh.FontStyle = FontStyles.Italic;
    else if (UIIsReady == true)
        wfh.FontStyle = initFontStyle;
}
private void WeightChanged(object sender, RoutedEventArgs e)
{
    if (sender == rdbtnBold)
        wfh.FontWeight = FontWeights.Bold;
    else if (UIIsReady == true)
        wfh.FontWeight = initFontWeight;
}
Private Sub BackColorChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)

    If sender.Equals(rdbtnBackGreen) Then
        wfh.Background = New SolidColorBrush(Colors.LightGreen)
    ElseIf sender.Equals(rdbtnBackSalmon) Then
        wfh.Background = New SolidColorBrush(Colors.LightSalmon)
    ElseIf UIIsReady = True Then
        wfh.Background = initBackBrush
    End If

End Sub

Private Sub ForeColorChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If sender.Equals(rdbtnForeRed) Then
        wfh.Foreground = New SolidColorBrush(Colors.Red)
    ElseIf sender.Equals(rdbtnForeYellow) Then
        wfh.Foreground = New SolidColorBrush(Colors.Yellow)
    ElseIf UIIsReady = True Then
        wfh.Foreground = initForeBrush
    End If

End Sub

Private Sub FontChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If sender.Equals(rdbtnTimes) Then
        wfh.FontFamily = New FontFamily("Times New Roman")
    ElseIf sender.Equals(rdbtnWingdings) Then
        wfh.FontFamily = New FontFamily("Wingdings")
    ElseIf UIIsReady = True Then
        wfh.FontFamily = initFontFamily
    End If

End Sub

Private Sub FontSizeChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If sender.Equals(rdbtnTen) Then
        wfh.FontSize = 10
    ElseIf sender.Equals(rdbtnTwelve) Then
        wfh.FontSize = 12
    ElseIf UIIsReady = True Then
        wfh.FontSize = initFontSize
    End If

End Sub

Private Sub StyleChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If sender.Equals(rdbtnItalic) Then
        wfh.FontStyle = FontStyles.Italic
    ElseIf UIIsReady = True Then
        wfh.FontStyle = initFontStyle
    End If

End Sub

Private Sub WeightChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If sender.Equals(rdbtnBold) Then
        wfh.FontWeight = FontWeights.Bold
    ElseIf UIIsReady = True Then
        wfh.FontWeight = initFontWeight
    End If

End Sub

アプリケーションをビルドして実行します。Build and run the application. Windows フォーム複合コントロールにテキストを追加し、[ OK] をクリックします。Add some text in the Windows Forms composite control and then click OK. そのテキストがラベルに表示されます。The text appears in the labels. さまざまなオプションボタンをクリックして、コントロールの効果を確認します。Click the different radio buttons to see the effect on the control.

関連項目See also