Share via


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

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

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

Grid は、子要素を列および行に配置できる領域を定義します。 StackPanelWrapPanel は、子要素を自動的に行または列に配置します。 DockPanel は、子要素を自動的にパネルの端に配置します。 各種パネルの詳細については、「絶対配置と動的配置によるレイアウト」を参照してください。

重要

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

動的な動作を可能にするウィンドウのプロパティを設定する

新しいウィンドウを作成したら、動的レイアウトの柔軟性を最大限に高めるためにプロパティを設定できます。

動的な動作を可能にするウィンドウのプロパティを設定するには

  1. デザイン ビューでウィンドウを選択します。

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

    プロパティ

    効果

    ResizeMode

    CanResize

    ユーザーがウィンドウのサイズを変更してコントロールの表示領域を拡大できるようになります。

    SizeToContent

    WidthAndHeight

    これにより、コンテンツが拡大されたときにウィンドウのサイズが自動的に調整されます。

動的な動作を可能にするパネルのプロパティを設定する

新しいパネル (GridDockPanelStackPanel など) をウィンドウや別のパネルに追加したら、動的レイアウトの柔軟性を最大限に高めるためにプロパティを設定できます。

動的な動作を可能にするパネルのプロパティを設定するには

  1. デザイン ビューでパネルを選択します。

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

    プロパティ

    効果

    Width

    Auto

    パネルが親ウィンドウまたは親パネルの幅いっぱいに引き伸ばされます。

    Height

    Auto

    パネルが親ウィンドウまたは親パネルの高さいっぱいに引き伸ばされます。

動的な動作を可能にするグリッドのプロパティを設定する

自動サイズ変更 (Auto) またはスター サイズ変更によって、コンテンツに応じて自動的にサイズが調整されるグリッドを作成できます。 自動サイズ変更では、コンテンツのサイズが変わっても、コンテンツ全体が表示されるようにコントロールのサイズが調整されます。 スター サイズ変更では、使用可能なスペースを加重比率に基づいて配分できます。 詳細については、「Star」を参照してください。

デザイン ビューを使用して行と列を作成した場合、既定では Star サイズ変更が適用されます。 詳細については、「方法 : グリッドに行と列を追加する」を参照してください。

ヒント

[コレクション エディター] で行と列を作成し、XAML エディターで行の高さと列の幅を設定する方が簡単な場合もあります。

動的な動作を可能にするグリッドのプロパティを設定するには

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

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

    [コレクション エディター] が表示されます。

    1. 新しい列定義を選択または追加します。

    2. 自動サイズ変更とスター サイズ変更を使用して列の幅を設定して柔軟性を最大限に高めます。

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

    注意

    Width プロパティを Auto に設定した列は、コンテンツが含まれていないため、一時的に非表示となります。これ以降、このような動作を回避するには、作業中はスター サイズ変更を使用し、作業の終了時に Auto に変更します。

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

    [コレクション エディター] が表示されます。

    1. 新しい行定義を選択または追加します。

    2. 自動サイズ変更とスター サイズ変更を使用して行の高さを設定し、柔軟性を最大限に高めます。

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

    注意

    Height プロパティを Auto に設定した行は、内容が含まれていないため、一時的に非表示となっています。これ以降、このような動作を回避するには、作業中はスター サイズ変更を使用し、作業の終了時に Auto に変更します。

動的な動作を可能にするコントロールのプロパティを設定する

新しいコントロールをウィンドウまたはパネルに追加したら、動的レイアウトの柔軟性を最大限に高めるためにプロパティを設定できます。 ウィンドウまたはコンテンツが変更されたときにコントロールのサイズが動的に調整されるようにするためには、コントロールのサイズを明示的に設定しないことが必要です。

動的な動作を可能にするコントロールのプロパティを設定するには

  1. デザイン ビューでコントロールを選択します。

  2. [プロパティ] ウィンドウで、ドラッグしたコントロールに対して次のプロパティを設定します。

    プロパティ

    効果

    Width

    Auto

    コンテンツの全体が表示されるように、コントロールが水平方向に拡張されます。

    Height

    Auto

    コンテンツの全体が表示されるように、コントロールが垂直方向に拡張されます。

    MinWidth

    0

    コントロールが水平方向に必要な量だけ短縮されます。

    MinHeight

    0

    コントロールが垂直方向に必要な量だけ短縮されます。

    MaxWidth

    Infinity

    コントロールが水平方向に必要な量だけ拡張されます。

    MaxHeight

    Infinity

    コントロールが垂直方向に必要な量だけ拡張されます。

    注意

    表に示した値は既定値です。

参照

処理手順

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

概念

WPF デザイナーでの整列

レイアウト

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

その他の技術情報

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