次の方法で共有

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

  • [アーティクル]

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

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

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

  • データ ソースを準備する。

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

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

  • ListView コントロールを追加し、構成する。

  • XAML で GridView コントロールを追加し、構成する。

  • Button コントロールを追加し、構成する。

  • データ バインディング コードを追加する。

  • アプリケーションをテストする。

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

データ ドリブン動的レイアウト

注意

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

必須コンポーネント

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

  • Visual Studio 2010

データ ソースの準備

このチュートリアルでは、バインド先となるサンプル データ ソースが必要です。 ここでは、単純な CSV ファイル データ ソースを作成します。

データ ソースを準備するには

  1. 新しいフォルダーを作成し、Data という名前を付けます。

  2. Data フォルダーで、新しいテキスト ファイルを作成し、 employees.csv という名前を付けます。

    注意

    ファイルの作成には、メモ帳など、任意のテキスト エディターを使用できます。

  3. 次の内容をテキスト ファイルに追加します。

    LastName,FirstName,Title
Davis,Sara,Sales Representative
Funk,Don,Vice President, Sales
Levin,Danny,Sales Representative
Penor,Lori,Sales Representative
Buschmann,Monika,Sales Manager
Suominen,Ari,Sales Representative
King,Russell,Sales Representative
Cameron,Maria,Inside Sales Coordinator
Doyle,Patricia,Sales Representative

  4. ファイルを保存して閉じます。

    ヒント

    Excel でファイルを開き、コンマで区切られたデータがそれぞれ別の列に配置されていることを確認してください。

  5. Data フォルダーで、新しいテキスト ファイルを作成し、schema.ini という名前を付けます。 スキーマ ファイルは、Data フォルダー内のテキスト ファイルの形式を記述します。

  6. 次の内容をテキスト ファイルに追加します。

    [employees.csv]
Format=CSVDelimited
ColNameHeader=True

    ヒント

    このチュートリアルでは、CSV ファイルに列見出しが含まれています。 列見出しがない CSV ファイルにバインドする場合は、ColNameHeader=True を ColNameHeader=False に変更してください。

  7. ファイルを保存して閉じます。

プロジェクトの作成

次に、アプリケーション用に Visual Studio プロジェクトを作成します。

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

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

    WPF デザイナーで MainWindow.xaml が開きます。

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

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

既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれています。 この手順では、グリッドに 2 つの行を追加します。 1 つの行では、内容に合わせてサイズが変わるように高さを Auto に設定します。 もう一つの行では、残ったスペースを使用するように高さを * に設定します。

既定のグリッド パネル コントロールを構成するには

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

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

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

  3. 2 つの行に対して [追加] をクリックし、その 2 つの行を追加します。

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

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

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

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

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

ListView の追加と構成

ここでは、ListView を追加します。 分離コード ファイルから参照できるように、ListView に名前を付けます。 レイアウト プロパティを構成します。

ListView を追加し構成するには

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

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

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

    プロパティ

    値

    名前

    lvEmployees

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    0

    Grid.RowSpan

    1

    幅

    Auto

    高さ

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    0

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

GridView の追加と構成

ここでは、テキスト ファイルのデータを表示する 3 つの例を持つ GridView を追加します。 分離コード ファイルから参照してデータと列を個別にバインドできるように、列に名前を付けます。 詳細については、「方法 : GridView を使用して ListView コンテンツを表示する」を参照してください。

GridView を追加し構成するには

  1. XAML エディターで、ListView 要素を探します。 コードは次のようになります。

    <ListView <ATTRIBUTES> />

    ヒント

    XAML ビューで簡単に要素を強調表示するには、デザイン ビューでコントロールをクリックするか、[ドキュメント アウトライン] ウィンドウを使用します。

  2. ListView 要素を次のコードに置き換えます。

    <ListView x:Name="lvEmployees">
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
            <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
            <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

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

ボタンの追加と構成

ここでは、Button を追加し、その Click イベントを指定します。

ボタンを追加し構成するには

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

    ヒント

    Grid 上に ListView があるため、Grid を選択するのが難しい場合もあります。 Tab キーを使用するか、[ドキュメント アウトライン] ウィンドウを使用すると、Grid を簡単に選択できます。

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

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

    プロパティ

    値

    名前

    btnGetData

    Content

    Get Data

    Grid.Column

    0

    Grid.ColumnSpan

    1

    Grid.Row

    1

    Grid.RowSpan

    1

    幅

    75

    高さ

    23

    HorizontalAlignment

    Right

    VerticalAlignment

    Bottom

    Margin

    5

  4. XAML エディターで、Button 要素を探します。 コードは次のようになっています。

    <Button <ATTRIBUTES>>Button</Button>

    ヒント

    XAML ビューで簡単に要素を強調表示するには、デザイン ビューでコントロールをクリックするか、[ドキュメント アウトライン] ウィンドウを使用します。

  5. XAML を編集して Click イベント属性を追加します。 結果は次のようになります。

    <Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>

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

データ バインディング コードの追加

ここでは、Button の Click イベントにコードを追加します。 実行時にボタンをクリックすると、データを取得し、これを ListView と GridView にバインドします。

データ バインディング コードを追加するには

  1. 分離コード ファイルを開きます。分離コード ファイルは、プロジェクトに対して選択した言語に応じて、MainWindow.xaml.cs または MainWindow.xaml.vb になります。

  2. コード エディターの一番上で、次のコードを追加します。 データをバインドするには、System.Data 名前空間と System.Data.OleDb 名前空間にアクセスする必要があります。

    Imports System.Data              'DataTable
Imports System.Data.OleDb        'OleDbDataAdapter
Imports System.Windows           'RoutedEventArgs
Imports System.Windows.Data      'Binding
Imports System.Windows.Controls  'ListView

    using System;                   //Exception
using System.Data;              //DataTable
using System.Data.OleDb;        //OleDbDataAdapter
using System.Windows;           //RoutedEventArgs
using System.Windows.Data;      //Binding
using System.Windows.Controls;  //ListView

  3. MainWindow クラスに次のコードを追加します。 DataTable を使用してデータを格納します。

    Dim dtEmployees As DataTable

    DataTable dtEmployees;

  4. MainWindow クラスに次のコードを追加します。 ユーザーがボタンをクリックすると、データが取得され、このデータが ListView にバインドされます。

    Private Sub btnGetData_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

    dtEmployees = GetData()
    BindData()
End Sub

    private void btnGetData_Click(object sender, RoutedEventArgs e)
{
    dtEmployees = GetData();
    BindData();
}

  5. MainWindow クラスで、次のコードを追加し、Data フォルダーのパスを指定します。 データを取得するには、OleDbDataAdapter を使用します。

    Function GetData() As DataTable

    Dim sConnection As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\Data\;Extended Properties=""text;HDR=yes;FMT=delimited"";"
    Dim sSQL As String = "select * from employees.csv"

    Dim dt As DataTable = New DataTable()
    Dim da As OleDbDataAdapter = New OleDbDataAdapter(sSQL, sConnection)

    Try
        da.Fill(dt)

    Catch ex As Exception
        MessageBox.Show(ex.ToString())

    End Try

    Return dt
End Function

    DataTable GetData()
{
    string sConnection = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=<Your Path>\\Data\\;Extended Properties=\"text;HDR=yes;FMT=delimited\";";
    string sSQL = "select * from employees.csv";

    DataTable dt = new DataTable();
    OleDbDataAdapter da = new OleDbDataAdapter(sSQL, sConnection);

    try
    {
        da.Fill(dt);
    }
    catch (Exception e)
    {
        MessageBox.Show(e.ToString());
    }
    return dt;
}

  6. MainWindow クラスに次のコードを追加します。 データを ListView にバインドするため、DataContext を DataTable に設定します。 GridView の列にデータ列を表示します。

    Sub BindData()
    lvEmployees.DataContext = dtEmployees
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, New Binding())

    c1Employees.DisplayMemberBinding = New Binding("LastName")
    c2Employees.DisplayMemberBinding = New Binding("FirstName")
    c3Employees.DisplayMemberBinding = New Binding("Title")
End Sub

    void BindData()
{
    lvEmployees.DataContext = dtEmployees;
    lvEmployees.SetBinding(ListView.ItemsSourceProperty, new Binding());

    c1Employees.DisplayMemberBinding = new Binding("LastName");
    c2Employees.DisplayMemberBinding = new Binding("FirstName");
    c3Employees.DisplayMemberBinding = new Binding("Title");
}

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

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

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

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

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

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

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

    プロパティ

    値

    SizeToContent

    WidthAndHeight

    幅

    Auto

    高さ

    Auto

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

アプリケーションのテスト

アプリケーションをテストするには

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

    アプリケーションが起動し、ウィンドウが表示されます。 SizeToContent プロパティが WidthAndHeight に設定されているため、ウィンドウは、GridView ヘッダーと Button を表示するだけの大きさになっています。

  2. [Get Data] をクリックします。

    データが取得され、このデータが GridView にバインドされます。 GridView、ListView、および Window のサイズがすべて、新しい内容に合わせて動的に変わります。

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

チュートリアルの完了

完成した 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="Auto" Width="Auto" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="lvEmployees">
            <ListView.View>
                <GridView AllowsColumnReorder="True">
                    <GridViewColumn x:Name="c1Employees" Header="Last Name"></GridViewColumn>
                    <GridViewColumn x:Name="c2Employees" Header="First Name"></GridViewColumn>
                    <GridViewColumn x:Name="c3Employees" Header="Title"></GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Button Click="btnGetData_Click" Name="btnGetData" Margin="5" Height="23" Width="75" HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1">Get Data</Button>
    </Grid>
</Window>

次の手順

このチュートリアルでは、データを表示する 3 つ列で構成される GridView を使用しました。 各列にデータを直接バインドしました。 また、データ テンプレートを使用して、ListView または GridView 内のデータのスタイルを調整することもできます。 詳細については、「データ テンプレートの概要」を参照してください。

このチュートリアルで、データ テンプレートを使用してみることができます。 たとえば、次のようなテンプレートを作成できます。

<Window.Resources>
    <DataTemplate x:Key="templateEmployees">
        <Border BorderBrush="Silver" BorderThickness="1" Padding="5" Margin="5">
            <DockPanel>
                <StackPanel DockPanel.Dock="Left">
                    <TextBlock Text="{Binding Path=LastName}" />
                    <TextBlock Text="{Binding Path=FirstName}" />
                </StackPanel>
                <TextBlock Text="{Binding Path=Title}" DockPanel.Dock="Right" />
            </DockPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

次に、次のようなコードで GridView でデータ テンプレートを使用します。

<ListView.View>
    <GridView>
        <GridViewColumn CellTemplate="{StaticResource templateEmployees}" />
    </GridView>
</ListView.View>

分離コードから次のコードを削除するか、コメント化します。

c1Employees.DisplayMemberBinding = New Binding("LastName")
c2Employees.DisplayMemberBinding = New Binding("FirstName")
c3Employees.DisplayMemberBinding = New Binding("Title")

c1Employees.DisplayMemberBinding = new Binding("LastName");
c2Employees.DisplayMemberBinding = new Binding("FirstName");
c3Employees.DisplayMemberBinding = new Binding("Title");

参照

処理手順

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

概念

レイアウト システム

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

その他の技術情報

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

WPF デザイナーの操作