本記事の概要
過去記事「データグリッドにデータを表示する方法」では、DataGrid にデータを表示する方法について説明しました。
この記事では、複数のデータを連結して１つのセルに表示する方法について説明します。
公式サイト情報はコチラを参照してください。
複数のデータを１つにまとめるための基本方法
１つのデータを表示する際は、<DataGridTextColumn> を使用しますが、複数のデータを１つにまとめて表示する場合は <DataGridTemplateColumn> を使用します。
以下に、複数データを１つにまとめる時のテンプレを示します。
まずは、１つの列の中に複数データを表示できるようにするため <DataGridTemplateColumn> を使用します。このときヘッダーに表示する文字列は Header プロパティを使用します。
次に、複数のデータを表示するためのセルを作成するために <DataGridTemplateColumn.CellTemplate> を使用します。この内側には <DataTemplate> を置き、さらにその内側には、複数のコントロールを配置できるコンテナコントロールを置きます。この例では、<StackPanel> を配置して、複数のコントロールが横方向になるよう、Orientation プロパティを Horizontal に設定しています。ここでは、<TextBlock> を２つ配置して、テキストデータを２つ表示できるようにしています。
<DataGridTemplateColumn Header="ヘッダーに表示する文字列">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding 連結するデータ}" />
<TextBlock Text="{Binding 連結するデータ}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
実例
上記を踏まえた上で、実例を見ていきましょう。
ここでは、住所録のデータ一覧を表示する例を示します。
DataGrid にバインド（ItemsSource に連結）するデータクラスを作成します。あとでこのクラスの Prefecture と City を１つのセルに表示します。
namespace WpfSample
{
public class AddressData
{
// Id
public string Id { get; set; }
// 氏名
public string Name { get; set; }
// 年齢
public int Age { get; set; }
// 郵便番号
public string ZipCode { get; set; }
// 県
public string Prefecture { get; set; }
// 市町村
public string City { get; set; }
}
}
XAML は以下の通りです。
16 〜 25行目が、セルに複数のデータを表示する箇所です。先ほど作成した AddressData クラスの Prefecture と City をそれぞれの <TextBlock> に表示しています。
MainWindow.xaml の例
<Window x:Class="WpfSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfSample"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
<DataGridTextColumn Header="氏名" Binding="{Binding Name}"/>
<DataGridTextColumn Header="年齢" Binding="{Binding Age}"/>
<DataGridTextColumn Header="郵便番号" Binding="{Binding ZipCode}"/>
<DataGridTemplateColumn Header="住所">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Prefecture}" />
<TextBlock Text="{Binding City}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
最後にデータを表示するコードを示します。
using System.Collections.ObjectModel;
using System.Windows;
namespace WpfSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
dataGrid.ItemsSource = new ObservableCollection<AddressData>
{
new AddressData { Id= "1", Name="山田 棟上", Age=14, ZipCode="037-9950", Prefecture="京都府", City="京都市" },
new AddressData { Id= "2", Name="梶 朱莉", Age=36, ZipCode="736-9872", Prefecture="群馬県", City="高崎市" },
new AddressData { Id= "3", Name="砂田 正浩", Age=38, ZipCode="220-9735", Prefecture="鳥取県", City="鳥取市" },
new AddressData { Id= "4", Name="宇都宮 修司",Age= 22, ZipCode="286-1928", Prefecture="新潟県" ,City="新潟市" },
new AddressData { Id= "5", Name="寺崎 尚生", Age=15, ZipCode="382-2430",Prefecture= "愛媛県", City="松山市" }
};
}
}
}
実行例は以下の通りです。
実行例
コメント