チュートリアル : データ ドリブン動的レイアウトの構築
WPF (Windows Presentation Foundation) には、データ ドリブン動的レイアウトをサポートするコントロールが用意されています。 WPF Designer for Visual Studio でこれらのコントロールを使用すると、それぞれ対応するレイアウトを簡単に作成できます。 アプリケーション内で、次のコントロールを使用できます。
ListView コントロールは、一連のデータ項目を異なるレイアウトで表示するためのインフラストラクチャを提供します。 通常、GridView は ListView コントロールと共に使用し、データを列形式で表示します。 詳細については、「ListView の概要」および「GridView の概要」を参照してください。
このチュートリアルでは次のタスクを行います。
データ ソースを準備する。
WPF アプリケーションを作成する。
既定の Grid パネル コントロールを構成する。
ListView コントロールを追加し、構成する。
XAML で GridView コントロールを追加し、構成する。
Button コントロールを追加し、構成する。
データ バインディング コードを追加する。
アプリケーションをテストする。
最終的なアプリケーションを次の図に示します。
注意
実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。 設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。 詳細については、「設定の操作」を参照してください。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
- Visual Studio 2010
データ ソースの準備
このチュートリアルでは、バインド先となるサンプル データ ソースが必要です。 ここでは、単純な CSV ファイル データ ソースを作成します。
データ ソースを準備するには
新しいフォルダーを作成し、Data という名前を付けます。
Data フォルダーで、新しいテキスト ファイルを作成し、 employees.csv という名前を付けます。
注意
ファイルの作成には、メモ帳など、任意のテキスト エディターを使用できます。
次の内容をテキスト ファイルに追加します。
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
ファイルを保存して閉じます。
ヒント
Excel でファイルを開き、コンマで区切られたデータがそれぞれ別の列に配置されていることを確認してください。
Data フォルダーで、新しいテキスト ファイルを作成し、schema.ini という名前を付けます。 スキーマ ファイルは、Data フォルダー内のテキスト ファイルの形式を記述します。
次の内容をテキスト ファイルに追加します。
[employees.csv] Format=CSVDelimited ColNameHeader=True
ヒント
このチュートリアルでは、CSV ファイルに列見出しが含まれています。 列見出しがない CSV ファイルにバインドする場合は、ColNameHeader=True を ColNameHeader=False に変更してください。
ファイルを保存して閉じます。
プロジェクトの作成
次に、アプリケーション用に Visual Studio プロジェクトを作成します。
プロジェクトを作成するには
Visual Basic または Visual C# で DataDrivenLayout という名前の新しい WPF アプリケーション プロジェクトを作成します。 詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。
WPF デザイナーで MainWindow.xaml が開きます。
[ファイル] メニューの [すべてを保存] をクリックします。
既定のグリッド パネル コントロールの構成
既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれています。 この手順では、グリッドに 2 つの行を追加します。 1 つの行では、内容に合わせてサイズが変わるように高さを Auto に設定します。 もう一つの行では、残ったスペースを使用するように高さを * に設定します。
既定のグリッド パネル コントロールを構成するには
デザイン ビューで、Grid を選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
[プロパティ] ウィンドウで RowDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。
[コレクション エディター] が表示されます。
2 つの行に対して [追加] をクリックし、その 2 つの行を追加します。
最初の行の Height プロパティを * に設定します。
2 つ目の行の Height プロパティを Auto に設定します。
[OK] をクリックして [コレクション エディター] を閉じ、WPF デザイナーに戻ります。
グリッドには 2 つの行がありますが、現在は 1 つしか表示されていません。 Height プロパティを Auto に設定した行は、内容が含まれていないため、一時的に非表示となっています。 このチュートリアルでは、このままで問題ありません。 これ以降、このような動作を回避するには、作業中はスター サイズ変更を使用し、作業の終了時に Auto に変更します。
[ファイル] メニューの [すべてを保存] をクリックします。
ListView の追加と構成
ここでは、ListView を追加します。 分離コード ファイルから参照できるように、ListView に名前を付けます。 レイアウト プロパティを構成します。
ListView を追加し構成するには
デザイン ビューで、Grid を選択します。
[プロパティ] ウィンドウで、ListView に対して次のプロパティを設定します。
プロパティ
値
名前
lvEmployees
Grid.Column
0
Grid.ColumnSpan
1
Grid.Row
0
Grid.RowSpan
1
幅
Auto
高さ
Auto
HorizontalAlignment
Stretch
VerticalAlignment
Stretch
Margin
0
[ファイル] メニューの [すべてを保存] をクリックします。
GridView の追加と構成
ここでは、テキスト ファイルのデータを表示する 3 つの例を持つ GridView を追加します。 分離コード ファイルから参照してデータと列を個別にバインドできるように、列に名前を付けます。 詳細については、「方法 : GridView を使用して ListView コンテンツを表示する」を参照してください。
GridView を追加し構成するには
XAML エディターで、ListView 要素を探します。 コードは次のようになります。
<ListView <ATTRIBUTES> />
ヒント
XAML ビューで簡単に要素を強調表示するには、デザイン ビューでコントロールをクリックするか、[ドキュメント アウトライン] ウィンドウを使用します。
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>
[ファイル] メニューの [すべてを保存] をクリックします。
ボタンの追加と構成
ここでは、Button を追加し、その Click イベントを指定します。
ボタンを追加し構成するには
デザイン ビューで、Grid を選択します。
[プロパティ] ウィンドウで、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
XAML エディターで、Button 要素を探します。 コードは次のようになっています。
<Button <ATTRIBUTES>>Button</Button>
ヒント
XAML ビューで簡単に要素を強調表示するには、デザイン ビューでコントロールをクリックするか、[ドキュメント アウトライン] ウィンドウを使用します。
XAML を編集して Click イベント属性を追加します。 結果は次のようになります。
<Button Click="btnGetData_Click" <ATTRIBUTES>>Button</Button>
[ファイル] メニューの [すべてを保存] をクリックします。
データ バインディング コードの追加
ここでは、Button の Click イベントにコードを追加します。 実行時にボタンをクリックすると、データを取得し、これを ListView と GridView にバインドします。
データ バインディング コードを追加するには
分離コード ファイルを開きます。分離コード ファイルは、プロジェクトに対して選択した言語に応じて、MainWindow.xaml.cs または MainWindow.xaml.vb になります。
コード エディターの一番上で、次のコードを追加します。 データをバインドするには、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
MainWindow クラスに次のコードを追加します。 DataTable を使用してデータを格納します。
Dim dtEmployees As DataTable
DataTable dtEmployees;
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(); }
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; }
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"); }
[ファイル] メニューの [すべてを保存] をクリックします。
サイズが動的に変更されるようにウィンドウを設定する
SizeToContent プロパティは、コンテンツのサイズが変わったときに Window のサイズを変更する方法を指定します。 既定では、このプロパティは Manual に設定されています。つまり、内容に合わせてユーザーが手動でウィンドウのサイズを変更できるということです。 ここでは、このプロパティを WidthAndHeight に設定します。つまり、内容のサイズに応じて、ウィンドウ サイズが動的に変更されるようにします。
サイズが動的に変更されるようにウィンドウを設定するには
デザイナーで、MainWindow.xaml を開きます。
デザイン ビューで、Window を選択します。
[プロパティ] ウィンドウで、Window に対して次のプロパティを設定します。
プロパティ
値
SizeToContent
WidthAndHeight
幅
Auto
高さ
Auto
[ファイル] メニューの [すべてを保存] をクリックします。
アプリケーションのテスト
アプリケーションをテストするには
[デバッグ] メニューの [デバッグ開始] をクリックします。
アプリケーションが起動し、ウィンドウが表示されます。 SizeToContent プロパティが WidthAndHeight に設定されているため、ウィンドウは、GridView ヘッダーと Button を表示するだけの大きさになっています。
[Get Data] をクリックします。
データが取得され、このデータが GridView にバインドされます。 GridView、ListView、および Window のサイズがすべて、新しい内容に合わせて動的に変わります。
ウィンドウを閉じます。
チュートリアルの完了
完成した 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");