チュートリアル: WPF での Windows フォーム コントロールの配置

  • [アーティクル]

更新 : 2010 年 8 月

このチュートリアルでは、WPF レイアウト機能を使用して、ハイブリッド アプリケーションで Windows Forms コントロールを配置する方法を示します。

このチュートリアルでは、以下のタスクを行います。

  • プロジェクトの作成。

  • 既定のレイアウト設定の使用。

  • コンテンツに合わせたサイズの変更。

  • 絶対配置の使用。

  • サイズの明示的な指定。

  • レイアウト プロパティの設定。

  • z オーダーの制限の理解。

  • ドッキング。

  • 可視性の設定。

  • 伸縮しないコントロールのホスト。

  • スケーリング。

  • 回転。

  • パディングとマージンの設定。

  • 動的レイアウト コンテナーの使用。

このチュートリアルで示すタスクの完全なコード一覧については、WPF での Windows フォーム コントロールの配置のサンプルを参照してください。

終了すると、WPF ベースのアプリケーションにおける Windows Forms レイアウトの機能を理解できます。

必須コンポーネント

このチュートリアルを実行するには、次のコンポーネントが必要です。

  • Visual Studio 2010

プロジェクトの作成

プロジェクトを作成し、設定するには

  1. WpfLayoutHostingWf という名前の WPF アプリケーション プロジェクトを作成します。

  2. ソリューション エクスプローラーで、次のアセンブリへの参照を追加します。

    • WindowsFormsIntegration

    • System.Windows.Forms

    • System.Drawing

  3. MainWindow.xaml をダブルクリックして、XAML ビューで開きます。

  4. Window 要素に、次の Windows Forms 名前空間の割り当てを追加します。

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

  5. Grid 要素で、ShowGridLines プロパティを true に設定し、5 つの行と 3 つの列を定義します。

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

  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

既定のレイアウト設定の使用

既定では、WindowsFormsHost 要素が、ホストされている Windows Forms コントロールのレイアウトを処理します。

既定のレイアウト設定を使用するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 Windows Forms System.Windows.Forms.Button コントロールが Canvas に表示されます。 ホストされているコントロールはそのコンテンツに基づいてサイズ設定され、WindowsFormsHost 要素はホストされているコントロールが収まるようにサイズ変更されます。

コンテンツに合わせたサイズの変更

WindowsFormsHost 要素を使用すると、ホストされているコントロールのサイズは、そのコンテンツが正しく表示されるように変更されます。

コンテンツに合わせてサイズ変更するには

  1. 次の XAML を Grid 要素にコピーします。

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

<Canvas Grid.Row="2" Grid.Column="0">
  <WindowsFormsHost FontSize="24" Background="Yellow">
    <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
  </WindowsFormsHost>
</Canvas>

  2. F5 キーを押してアプリケーションをビルドし、実行します。 長くなったテキスト文字列および大きくなったフォント サイズが正しく表示されるように 2 つの新しいボタン コントロールのサイズが変更され、ホストされているコントロールが収まるように WindowsFormsHost 要素のサイズが変更されます。

絶対配置の使用

絶対配置を使用して、ユーザー インターフェイス (UI) の任意の場所に WindowsFormsHost 要素を配置できます。

絶対配置を使用するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素は、グリッド セルの上辺から 20 ピクセル、左辺から 20 ピクセルの位置に配置されます。

サイズの明示的な指定

WindowsFormsHost 要素のサイズは、Width プロパティと Height プロパティを使用して指定できます。

サイズを明示的に指定するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素は、既定のレイアウト設定よりも小さい、幅 50 ピクセル、高さ 70 ピクセルに設定されます。 それに合わせて、Windows Forms コントロールのコンテンツが再配置されます。

レイアウト プロパティの設定

ホストされているコントロールにレイアウト関連のプロパティを設定する場合は、常に WindowsFormsHost 要素のプロパティを使用します。 ホストされているコントロールで直接レイアウト プロパティを設定すると、予期しない結果になります。

XAML でホストされているコントロールにレイアウト関連プロパティを設定しても無効です。

ホストされているコントロールでプロパティを設定した場合の結果を確認するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. ソリューション エクスプローラーで、MainWindow.xaml. vb または MainWindow.xaml.cs をダブルクリックして、コード エディターで開きます。

  3. 次のコードを MainWindow クラス定義にコピーします。

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

    b.Top = 20
    b.Left = 20

End Sub

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

    b.Top = 20;
    b.Left = 20;
}

  4. F5 キーを押してアプリケーションをビルドし、実行します。

  5. [Click me] ボタンをクリックします。 button1_Click イベント ハンドラーは、ホストされているコントロールで Top プロパティと Left プロパティを設定します。 これにより、ホストされているコントロールは、WindowsFormsHost 要素内で再配置されます。 ホストは同じ画面領域を維持しますが、ホストされているコントロールはクリップされます。 代わりに、ホストされているコントロールは、常に WindowsFormsHost 要素全体を占めます。

z オーダーの制限の理解

表示される WindowsFormsHost 要素は常に他の WPF 要素の上に描画され、z オーダーの影響を受けません。

z オーダーの制限を確認するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素がラベル要素の上に描画されます。

ドッキング

WindowsFormsHost 要素は、WPF のドッキングをサポートします。 ホストされているコントロールを DockPanel 要素にドッキングするように、Dock 添付プロパティを設定します。

ホストされているコントロールをドッキングするには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素が DockPanel 要素の右側にドッキングされます。

可視性の設定

Windows Forms コントロールを非表示にしたり、折りたたむには、WindowsFormsHost 要素で Visibility プロパティを設定します。 コントロールを非表示にすると、そのコントロールは表示されませんが、レイアウト空間は使用されます。 コントロールを折りたたむと、そのコントロールは表示されず、レイアウト空間も使用されません。

ホストされているコントロールの可視性を設定するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. MainWindow.xaml.vb または MainWindow.xaml.cs で、次のコードをクラス定義にコピーします。

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


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

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

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

  3. F5 キーを押してアプリケーションをビルドし、実行します。

  4. WindowsFormsHost 要素を非表示にするには、[Click to make invisible] ボタンをクリックします。

  5. レイアウト全体から WindowsFormsHost 要素を非表示にする場合は、[Click to collapse] ボタンをクリックします。 Windows Forms コントロールが折りたたまれ、周りの要素が再配置されて、そのスペースが使用されます。

伸縮しないコントロールのホスト

一部の Windows Forms コントロールは、サイズが固定され、レイアウト内の使用可能なスペースに合わせて伸縮しません。 たとえば、MonthCalendar コントロールでは、固定されたスペースに月が表示されます。

伸縮しないコントロールをホストするには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素はグリッド行で中央揃えになりますが、使用可能なスペースに合わせて伸縮されることはありません。 ウィンドウが十分に大きい場合は、ホストされている MonthCalendar コントロールによって 2 か月以上の月が表示される場合もありますが、これらは行内で中央揃えになります。 WPF レイアウト エンジンは、使用可能なスペースに合わせたサイズ変更ができない要素を中央揃えにします。

スケーリング

WPF 要素と異なり、Windows Forms コントロールは継続的にスケーリングすることはできません。 WindowsFormsHost 要素は、可能であれば、ホストされているコントロールをスケーリングします。

ホストされているコントロールをスケーリングするには

  1. 次の XAML を Grid 要素にコピーします。

    <!-- Scaling transformation. -->
<StackPanel Grid.Row="0" Grid.Column="2">

  <StackPanel.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.5" ScaleY="0.5" />
  </StackPanel.RenderTransform>

  <Label Content="A WPF UIElement" Background="OrangeRed"/>

  <WindowsFormsHost Background="Yellow">
    <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
  </WindowsFormsHost>

  <Label Content="Another WPF UIElement" Background="OrangeRed"/>

</StackPanel>

  2. F5 キーを押してアプリケーションをビルドし、実行します。 ホストされているコントロールとその周りの要素は、ファクター 0.5 でスケーリングされますが、 ホストされているコントロールのフォントはスケーリングされません。

回転

WPF 要素とは異なり、Windows Forms コントロールは回転をサポートしません。 回転変換が適用されても、WindowsFormsHost 要素は、他のWPF 要素と共に回転することはありません。 回転値が 180 度の場合を除き、LayoutError イベントが発生します。

ハイブリッド アプリケーションでの回転の結果を確認するには

  1. 次の XAML を Grid 要素にコピーします。

    <!-- Rotation transformation. -->
<StackPanel Grid.Row="1" Grid.Column="2">

  <StackPanel.RenderTransform>
    <RotateTransform CenterX="200" CenterY="50" Angle="180" />
  </StackPanel.RenderTransform>

  <Label Content="A WPF element" Background="OrangeRed"/>

  <WindowsFormsHost Background="Yellow">
    <wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
  </WindowsFormsHost>

  <Label Content="Another WPF element" Background="OrangeRed"/>

</StackPanel>

  2. F5 キーを押してアプリケーションをビルドし、実行します。 ホストされているコントロールは回転しませんが、その周りの要素は 180 度の角度で回転します。 要素を表示するためにウィンドウのサイズを変更することが必要になる場合があります。

パディングとマージンの設定

WPF レイアウトのパディングとマージンは、Windows Formsのパディングとマージンに似ています。 WindowsFormsHost 要素で Padding プロパティと Margin プロパティを設定するだけです。

ホストされているコントロールのパディングとマージンを設定するには

  1. 次の XAML を Grid 要素にコピーします。

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


...


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

  2. F5 キーを押してアプリケーションをビルドし、実行します。 パディングとマージンの設定が、Windows Formsで適用される場合と同じように、ホストされている Windows Forms コントロールに適用されます。

動的レイアウト コンテナーの使用

Windows Formsは、2 つの動的レイアウト コンテナー、FlowLayoutPanel と TableLayoutPanel を提供します。 これらのコンテナーは、WPF レイアウトで使用することもできます。

動的レイアウト コンテナーを使用するには

  1. 次の XAML を Grid 要素にコピーします。

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

  2. MainWindow.xaml.vb または MainWindow.xaml.cs で、次のコードをクラス定義にコピーします。

    Private Sub InitializeFlowLayoutPanel()
    Dim flp As System.Windows.Forms.FlowLayoutPanel = Me.flowLayoutHost.Child

    flp.WrapContents = True

    Const numButtons As Integer = 6

    Dim i As Integer
    For i = 0 To numButtons
        Dim b As New System.Windows.Forms.Button()
        b.Text = "Button"
        b.BackColor = System.Drawing.Color.AliceBlue
        b.FlatStyle = System.Windows.Forms.FlatStyle.Flat

        flp.Controls.Add(b)
    Next i

End Sub

    private void InitializeFlowLayoutPanel()
{
    System.Windows.Forms.FlowLayoutPanel flp =
        this.flowLayoutHost.Child as System.Windows.Forms.FlowLayoutPanel;

    flp.WrapContents = true;

    const int numButtons = 6;

    for (int i = 0; i < numButtons; i++)
    {
        System.Windows.Forms.Button b = new System.Windows.Forms.Button();
        b.Text = "Button";
        b.BackColor = System.Drawing.Color.AliceBlue;
        b.FlatStyle = System.Windows.Forms.FlatStyle.Flat;

        flp.Controls.Add(b);
    }
}

  3. コンストラクターに InitializeFlowLayoutPanel メソッドの呼び出しを追加します。

    Public Sub New()
    InitializeComponent()

    Me.InitializeFlowLayoutPanel()

End Sub

    public MainWindow()
{
    InitializeComponent();

    this.InitializeFlowLayoutPanel();
}

  4. F5 キーを押してアプリケーションをビルドし、実行します。 WindowsFormsHost 要素は DockPanel 全体を占め、FlowLayoutPanel はその子コントロールを既定の FlowDirection に配置します。

参照

参照

ElementHost

WindowsFormsHost

概念

WindowsFormsHost 要素のレイアウトに関する考慮事項

チュートリアル: WPF での Windows フォーム複合コントロールのホスト

チュートリアル: Windows フォームでの WPF 複合コントロールのホスト

その他の技術情報

WPF デザイナー

WPF での Windows フォーム コントロールの配置のサンプル

履歴の変更

日付

履歴

理由

2010 年 8 月

Visual Studio 2010 用に更新。

カスタマー フィードバック