かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

3の倍数と3のつくデータの時に背景が緑色になるDataGrid

しょうもないプログラムですが、DataGridの背景をデータに応じて変えるというプログラムのサンプルになればと思って書きます。
まずたたき台となるプログラムを作ります。



WpfDataGridSampleというプロジェクトを作ってから単純な従業員クラスを作成します。

namespace WpfDataGridSample
{
    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Kana { get; set; }
        public string Address { get; set; }
    }
}

こいつを、MainWindowのDataContextに突っ込みます。

using System.Linq;
using System.Windows;

namespace WpfDataGridSample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = Enumerable.Range(1, 10000)
                .Select(i =>
                    new Employee
                    {
                        ID = i,
                        Name = "田中 太郎" + i,
                        Kana = "たなか たろう" + i,
                        Address = "東京都調布市げげげの女房の舞台"
                    })
                .ToList();
        }
    }
}

そして画面にDataGridを置いて、適当に表示させます。

<Window x:Class="WpfDataGridSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DataGrid IsReadOnly="True" AutoGenerateColumns="False" FrozenColumnCount="1"
                  ItemsSource="{Binding}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Margin="2.5" Text="名前" />
                                <TextBlock Margin="2.5" Text="かな" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Margin="2.5" Text="{Binding Name}" />
                                <TextBlock Margin="2.5" Text="{Binding Kana}" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="住所" Binding="{Binding Address}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

実行するととりあえず表示されます。無駄に、1セルに2行のデータ出したりするような色気を出していますが、それ以外は普通です。

本題!データによって背景を変える

ここでは、IDの値が3の倍数か3がつく数字のときだけ、背景を変えようと思います。
とりあえず、その判定をするためのプロパティをEmployeeに追加します。(これがあると簡単だから)

namespace WpfDataGridSample
{
    public class Employee
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Kana { get; set; }
        public string Address { get; set; }

        public bool IsAho
        {
            get
            {
                // 3の倍数?
                if (ID % 3 == 0) return true;
                // 3のつく数字?
                if (ID.ToString().IndexOf('3') != -1) return true;
                // そうじゃないので違う
                return false;
            }
        }
    }
}

下準備が出来ました。次にDataGridのItemContainerStyleを設定します。ここのTriggersでDataTriggerを使ってIsAhoプロパティがTrueのときだけ背景色を設定しています。

<Window x:Class="WpfDataGridSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <DataGrid IsReadOnly="True" AutoGenerateColumns="False" FrozenColumnCount="1"
                  ItemsSource="{Binding}">
            <DataGrid.ItemContainerStyle>
                <Style TargetType="DataGridRow">
                    <Style.Triggers>
                        <!-- IsAhoがTrueの時だけ背景を設定する -->
                        <DataTrigger Binding="{Binding IsAho}" Value="True">
                            <Setter Property="Background" Value="LimeGreen" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataGrid.ItemContainerStyle>
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Margin="2.5" Text="名前" />
                                <TextBlock Margin="2.5" Text="かな" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Margin="2.5" Text="{Binding Name}" />
                                <TextBlock Margin="2.5" Text="{Binding Kana}" />
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="住所" Binding="{Binding Address}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

実行すると以下のようになります。

とまぁこんな風に色々なことがXAMLで出来ますよ!というサンプルでした。
コードは以下からダウンロードできます。
http://cid-c0989b857f2f850c.skydrive.live.com/self.aspx/%e5%85%ac%e9%96%8b/samples/WpfDataGridSample.zip