XamDataGridでセルの値に応じて行全体の色を変えてみましょう。完成イメージはこんな感じになります。

  

手順

 

1. DataRecordCellAreaのBackgroundプロパティにIValueConverterのインスタンスをバインドする。

DataRecordCellAreaをターゲットとするStyleのインスタンスをResourcesに追加し、Backgroundプロパティをセルの在庫数の値にバインドします。さらに、在庫数から色を返すIValueConverter(※手順2でコーディングします)を指定します。

Resourcesに追加したStyleと XamDataGridとの紐づけは、XamDataGridのFieldLayoutSettingsのDataRecordCellAreaStyleプロパティで行います。

<Window.Resources>

    <!-- IValueConverter(※実体は手順2でコーディングします) -->
    <local:StockedAmountToBrushConverter1 x:Key="stockedAmountToBrushConverter1"/>

    <!-- DataRecordCellAreaのStyle -->
    <Style TargetType="{x:Type igDP:DataRecordCellArea}" x:Key="myRecordStyle1">
        <Setter Property="Background" Value="{Binding Cells[StockedAmount].Value, Converter={StaticResource stockedAmountToBrushConverter1}, Mode=OneWay}"/>
    </Style>
</Window.Resources>
...
<igDP:XamDataGrid>
    <igDP:XamDataGrid.FieldLayoutSettings>

        <!-- DataRecordCellAreaStyleプロパティにResourcesのStyleを指定 -->
        <igDP:FieldLayoutSettings DataRecordCellAreaStyle="{StaticResource myRecordStyle1}"/>

    </igDP:XamDataGrid.FieldLayoutSettings>
</igDP:XamDataGrid>

 

2. IValueConverterの実体を作成する。

在庫数から色を返すIValueConverterをコーディングします。

public class StockedAmountToBrushConverter1 : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if(value != null)
        {
            // 渡されてきたvalue(=Cells[StockedAmount].Value(在庫数))を整数値に変換する。
            int stockedAmount = (int)value;
            // 在庫数が20未満ならピンクを返す
            if (stockedAmount < 20) return new SolidColorBrush(Colors.Pink);
            // それ以外は白を返す
            else return new SolidColorBrush(Colors.White);
        }
        return Binding.DoNothing;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

 

以上で完成です。
なお、色を変える範囲が行全体ではなくセルだけでいい場合は、「XamDataGrid セルの値に応じてセルの色を変える」をご覧ください。

 

サンプル

 

Tagged: