チュートリアル : 動的レイアウトの構築

  • [アーティクル]

[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]

動的配置では、親要素を基準として配置方法と折り返し方法を指定することによって子要素を配置します。 また、コンテンツが拡大されたときにウィンドウやコントロールが自動的に拡張されるように設定することもできます。 詳細については、「絶対配置と動的配置によるレイアウト」を参照してください。

WPF Designer for Visual Studio には、動的配置をサポートする Panel コントロールが数多く用意されています。 パネル コントロールを別のパネル コントロールの子コントロールとして追加することにより、複数のパネル コントロールを組み合わせることができます。 以下のパネル コントロールを使用して、アプリケーション内で要素を動的に配置することができます。

重要

可能な限り動的レイアウトを使用することをお勧めします。動的レイアウトは、最も柔軟性が高く、ローカリゼーションなどのコンテンツの変更に適応でき、エンド ユーザーのユーザー環境に対する制御レベルも最も高くなります。絶対レイアウトの例については、「チュートリアル : 絶対配置に基づくレイアウトの構築」を参照してください。

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

  • WPF アプリケーションを作成する。

  • 既定の Grid パネル コントロールを構成する。

  • パネルにコントロールを追加する。

  • レイアウトをテストする。

最終的なアプリケーションを次の図に示します。

動的レイアウト

注意

実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

必須コンポーネント

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

  • Visual Studio 2012 RC

プロジェクトの作成

まず、アプリケーションのプロジェクトを作成します。

プロジェクトを作成するには

  1. Visual Basic または Visual C# で DynamicLayout という名前の新しい WPF アプリケーション プロジェクトを作成します。 詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。

    注意

    このチュートリアルではコードは作成しません。プロジェクト用に選択した言語がアプリケーションの分離コード ページで使用される言語となります。

    WPF Designerで MainWindow.xaml が開きます。

  2. デザイン ビューでウィンドウを選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。

  3. [プロパティ] ウィンドウで、Window に対して次のプロパティを設定します。

    プロパティ

    値

    幅

    400

    高さ

    200

    SizeToContent

    WidthAndHeight

    ヒント

    サイズ変更ハンドルを使用して、デザイン ビューでウィンドウのサイズを変更することもできます。

  4. [ファイル] メニューの [すべてを保存] をクリックします。

既定のグリッド パネル コントロールの構成

既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれています。 この手順では、グリッドに 4 つの行と列を追加します。 各列の幅を * に設定することにより、与えられた幅を 4 つの列として均等に分割します。 3 つの行については、コンテンツに合わせてサイズが調整されるように、高さを Auto に設定します。 1 つの行では、残ったスペースを使用するように高さを * に設定します。

パネル コントロールを追加するには

  1. デザイン ビューでグリッドを選択します。

  2. (省略可能) [プロパティ] ウィンドウで ShowGridLines プロパティを見つけ、そのチェック ボックスをオンにします。

    アプリケーションを実行すると、ウィンドウにグリッド線が表示されます。 グリッド線はデバッグには役立ちますが、実行コードでは ShowGridLines プロパティのチェック ボックスをオフにしてください。

  3. [プロパティ] ウィンドウで ColumnDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディター] ダイアログ ボックスが表示されます。

    1. [追加] を 4 回クリックして、4 つの列を追加します。

    2. 最初の行の Width プロパティを Auto に設定します。

    3. 2 つ目の行の Width プロパティを * に設定します。

    4. 3 つ目の行の Width プロパティを Auto に設定します。

    5. 4 つ目の行の Width プロパティを Auto に設定します。

    6. [OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。

      グリッドには 4 つの列がありますが、現在は 1 つしか表示されていません。 Width プロパティを Auto に設定した列は、コンテンツが含まれていないため、一時的に非表示となっています。 このチュートリアルでは、このままで問題ありません。 これ以降、このような動作を回避するには、作業中はスター (アスタリスク) によるサイズ変更を使用し、作業の終了時に Auto に変更します。

  4. [プロパティ] ウィンドウで RowDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディター] ダイアログ ボックスが表示されます。

    1. [追加] を 4 回クリックして、4 つの行を追加します。

    2. 最初の行の Height プロパティを Auto に設定します。

    3. 2 つ目の行の Height プロパティを Auto に設定します。

    4. 3 つ目の行の Height プロパティを * に設定します。

    5. 4 つ目の行の Height プロパティを Auto に設定します。

    6. [OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。

      グリッドには 4 つの行がありますが、現在は 1 つしか表示されていません。 Height プロパティを Auto に設定した行は、コンテンツが含まれていないため、一時的に非表示となっています。 このチュートリアルでは、このままで問題ありません。 これ以降、このような動作を回避するには、作業中はスター (アスタリスク) によるサイズ変更を使用し、作業の終了時に Auto に変更します。

  5. [ファイル] メニューの [すべてを保存] をクリックします。

パネルへのコントロールの追加

次に、パネルにコントロールを追加し、Grid の添付プロパティである Column と Row を使用してコントロールを動的に配置します。

パネルにコントロールを追加するには

  1. [ツールボックス] の [共通] グループから Label コントロールを Grid にドラッグします。

  2. [プロパティ] ウィンドウで、Label に対して次のプロパティを設定します。

    プロパティ

    値

    Content

    名前:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Top

    Margin

    20,20,10,10

  3. [ツールボックス] の [共通] グループから Label コントロールを Grid にドラッグします。

  4. [プロパティ] ウィンドウで、Label に対して次のプロパティを設定します。

    プロパティ

    値

    Content

    Password:

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Top

    Margin

    20,10,10,10

  5. [ツールボックス] の [共通] グループから TextBox コントロールを Grid にドラッグします。

  6. [プロパティ] ウィンドウで、TextBox に対して次のプロパティを設定します。

    プロパティ

    値

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    0

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,20,20,10

  7. [ツールボックス] の [共通] グループから TextBox コントロールを Grid にドラッグします。

  8. [プロパティ] ウィンドウで、TextBox に対して次のプロパティを設定します。

    プロパティ

    値

    Grid.Column

    1

    Grid.ColumnSpan

    3

    Grid.Row

    1

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,20,10

  9. [ツールボックス] の [共通] グループから Button コントロールを Grid にドラッグします。

  10. [プロパティ] ウィンドウで、Button に対して次のプロパティを設定します。

    プロパティ

    値

    Content

    [OK]

    Grid.Column

    2

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    幅

    75

    高さ

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    10,10,6,20

  11. [ツールボックス] の [共通] グループから Button コントロールを Grid にドラッグします。

  12. [プロパティ] ウィンドウで、Button に対して次のプロパティを設定します。

    プロパティ

    値

    Content

    [キャンセル]

    Grid.Column

    3

    Grid.ColumnSpan

    1

    Grid.Row

    3

    Grid.RowSpan

    1

    幅

    75

    高さ

    23

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    6,10,20,20

  13. [ファイル] メニューの [すべてを保存] をクリックします。

レイアウトのテスト

最後に、アプリケーションを実行し、ユーザーがウィンドウのサイズを変更した場合やコントロールのコンテンツが拡大して入りきらなくなった場合にレイアウトが動的に変更されることを確認します。

レイアウトをテストするには

  1. [デバッグ] メニューの [デバッグ開始] をクリックします。

    アプリケーションが起動し、ウィンドウが表示されます。

  2. [名前] ボックスがいっぱいになるまで任意の文字を入力します。 テキスト ボックスの右端に達すると、テキストのサイズに合わせてテキスト ボックスとウィンドウが拡張されます。

  3. ウィンドウを閉じます。

  4. [デバッグ] メニューの [デバッグ開始] をクリックします。

    アプリケーションが起動し、ウィンドウが表示されます。

  5. ウィンドウのサイズを垂直方向および水平方向に変更します。

    拡大した領域を使用して各列が均等に拡張されます。 拡張された列のサイズに合わせてテキスト ボックスが引き延ばされます。 3 つの行の高さは変わらず、4 つ目の行だけが全体的な領域の拡大に合わせて拡張されます。

  6. ウィンドウを閉じます。

  7. デザイン ビューで Name ラベルを選択します。

  8. [プロパティ] ウィンドウで、Content プロパティを「ここに氏名を入力してください」に変更します。

    デザイン ビューで、テキストの長さに合わせて Name ラベルが拡張されます。

  9. [デバッグ] メニューの [デバッグ開始] をクリックします。

    アプリケーションが起動し、ウィンドウが表示されます。 ラベル コントロールに長いテキストが表示されます。

  10. ウィンドウを閉じます。

チュートリアルの完了

完成した MainWindow.xaml ファイルを次に示します。

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

次の手順

このチュートリアルで使用した Grid パネルの代わりに以下のパネルを使用することにより、動的レイアウトのさまざまな効果を試すことができます。

参照

処理手順

方法 : 動的レイアウトを構築する

チュートリアル : WPF デザイナーによるサイズ変更可能なアプリケーションの作成

概念

WPF デザイナーでの整列

レイアウト

WPF および Silverlight デザイナーの概要

その他の技術情報

レイアウトのチュートリアル