方法 : データ ドリブン動的レイアウトを構築する

WPF (Windows Presentation Foundation) には、データ ドリブン動的レイアウトをサポートするコントロールが用意されています。 WPF デザイナーでこれらのコントロールを使用すると、それぞれ対応するレイアウトを簡単に作成できます。 アプリケーション内で、次のコントロールを使用できます。

• ListView

• GridView

ListView コントロールは、一連のデータ項目を異なるレイアウトで表示するためのインフラストラクチャを提供します。 通常、GridView は ListView コントロールと共に使用し、データを列形式で表示します。 詳細については、「ListView の概要」および「GridView の概要」を参照してください。

ListView の追加と構成

ListView を追加し構成するには

1. ツールボックスの [コントロール] グループから、ListView コントロールを Grid などのパネルにドラッグします。

2. [プロパティ] ウィンドウで、動的動作が最大になるように ListView コントロールに対して次のプロパティを設定します。

   プロパティ	推奨値
   幅	Auto
   高さ	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	0

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

GridView の追加と構成

GridView を追加し構成するには

1. XAML ビューで、ListView 要素を見つけます。 コードは次のようになります。

   <ListView <ATTRIBUTES> />
   

2. ListView 要素を次のマークアップに置き換えます。 必要に応じて、名前と、複数の列を追加します。

   注意

   ListView 要素と GridViewColumn 要素を分離コードから参照する場合は、各要素に明示的な名前を付ける必要があります。 たとえば、データ バインディング コードから参照する場合は、明示的な名前が必要です。

   <ListView x:Name="LISTVIEWNAME">
       <ListView.View>
           <GridView AllowsColumnReorder="True">
               <GridViewColumn x:Name="<COLUMNNAME>" Header="<COLUMNHEADER>"></GridViewColumn>
               Add more columns as necessary.
           </GridView>
       </ListView.View>
   </ListView>
   

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

サイズを動的に変更するウィンドウの設定

SizeToContent プロパティは、コンテンツのサイズが変わったときに Window のサイズを変更する方法を指定します。 既定では、このプロパティは Manual に設定されています。これは、コンテンツに合わせてユーザーが手動でウィンドウのサイズを変更できるということです。 このプロパティを WidthAndHeight に設定すると、コンテンツの変更に応じて、ウィンドウ サイズも動的に変更されます。

サイズが動的に変更されるようにウィンドウを設定するには

1. デザイナーで、MainWindow.xaml を開きます。

2. デザイン ビューで、Window を選択します。

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

   プロパティ	値
   SizeToContent	WidthAndHeight
   幅	Auto
   高さ	Auto

   ヒント

   Width プロパティと Height プロパティを Auto に設定すると、ウィンドウ サイズは現在のコントロールとコンテンツに合わせて変更されます。 そのため、ウィンドウにすべてのコントロールと内容を追加した後で、これらのプロパティを設定する必要があります。

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

参照

処理手順

チュートリアル : データ ドリブン動的レイアウトの構築

方法 : GridView を使用して ListView コンテンツを表示する

概念

レイアウト システム

その他の技術情報

WPF デザイナーの操作