2013年07月15日

WPFサンプル:DataTemplateでデータの表示形式を定義する

   このエントリーをはてなブックマークに追加 Clip to Evernote
DataTemplateを使うと、データの視覚的表現を定義することができます。
例えば、あるオブジェクトの表現を数値であらわすか、文字列であらわすか、それともグラフィックスで表すかは、視覚的表現の部分です。DataTemplateを使うことで、このどういった表現で表示するのかを指定できます。

DateTime型のオブジェクトの表示をカスタマイズするサンプルを書いてみました。

まずは、C#のコードから。

using System;
using System.Windows;
namespace DataTemplate1Sample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        private void Window_Loaded_1(object sender, RoutedEventArgs e) {
            label1.Content = DateTime.Now;
        }
    }
}

C#のコードでは、label1.DataContextに DateTime.Nowをセットしているだけです。
つまり、コードでは日付を表示することだけに集中し、どのように表示するかは、XAML側に任せてしまおうということです。

どのように表示するかは、以下に示すように XAMLのDataTemplateで指定します。

<Window x:Class="DataTemplate1Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="150" Width="525" Loaded="Window_Loaded_1">
    <Window.Resources>
        <DataTemplate DataType="{x:Type system:DateTime}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Year}"></TextBlock>
                <TextBlock Text="年"></TextBlock>
                <TextBlock Text="{Binding Path=Month}"></TextBlock>
                <TextBlock Text="月"></TextBlock>
                <TextBlock Text="{Binding Path=Day}"></TextBlock>
                <TextBlock Text="日"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Label Height="40" FontSize="20" Name="label1" Content="{Binding}"/>
    </Grid>
</Window>

Windows.Resources要素に記述した DataTemplateの定義では、DataTypeでDateTime型のDataTemplateであることを指定しています。XAMLにDateTime型を認識させるために、名前空間を利用しています。
そして、DataTemplateの子要素としてどのような表示にするのかを指定しています。ここでは、StackPanelのなかにTextBlockを複数配置し、TextプロパティとDateTimeのYear, Month, Dayプロパティとをバインドさせています。

実行結果を示します。

dataTemplate1

WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52328626