SilverlightのDataGridのセルの文字列を右寄せ・折り返しにしたり、背景色を変えたりする。

Controls Silverlight

DataGridTextColumnのStyle系のプロパティを使用して、SilverlightのDataGridのセルの文字列を右寄せ・折り返しにしたり、背景色を変えたりする方法を紹介します。

アジェンダ

  • DataGridTextColumnのElementStyleプロパティとCellStyleプロパティ
  • セル内の文字列を右詰め表示
  • セル内の文字列を折り返して表示
  • セルの背景色を変更
  • まとめ

DataGridTextColumnのElementStyleプロパティとCellStyleプロパティ

DataGridTextColumnの場合、その列のセルはTextBlockがセットされます。このTextBlockのStyleを設定できるのがElementStyleプロパティです。
また、セル自身のStyleを設定することができるのがCellStyleプロパティです。
この二つはややこしいですが、区別して使用する必要があります。

セル内の文字列を右詰め表示

//右詰め表示
<sdk:DataGridTextColumn Binding="{Binding BMI}" Header="BMI">
    <sdk:DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>
    </sdk:DataGridTextColumn.ElementStyle>
</sdk:DataGridTextColumn>

セル内の文字列を折り返して表示

//折り返す
<sdk:DataGridTextColumn Binding="{Binding Date}" Header="日付">
    <sdk:DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap"/>
        </Style>
    </sdk:DataGridTextColumn.ElementStyle>
</sdk:DataGridTextColumn>

セルの背景色を変更

セルの背景色を変える場合は、CellStyleプロパティを使いますが、下記のようなXAMLですとイメージの３列目のように文字の背景のみが変更されてしまいます。

//セルの背景色設定失敗バージョン
<sdk:DataGridTextColumn Binding="{Binding Height}" Header="Height" IsReadOnly="True">
    <sdk:DataGridTextColumn.CellStyle>
        <Style TargetType="sdk:DataGridCell">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>
    </sdk:DataGridTextColumn.CellStyle>
</sdk:DataGridTextColumn>


そこで、文字の右寄せ処理は、ElementStyleプロパティで行うようにするとうまくいきます。

// セルの背景色設定成功バージョン
<sdk:DataGridTextColumn Binding="{Binding Height}" Header="Height" IsReadOnly="True">
    <sdk:DataGridTextColumn.CellStyle>
        <Style TargetType="sdk:DataGridCell">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </sdk:DataGridTextColumn.CellStyle>
    <sdk:DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Right"/>
        </Style>
    </sdk:DataGridTextColumn.ElementStyle>
</sdk:DataGridTextColumn>

まとめ

Styleを設定できるプロパティを使用して、データグリッドのセルの文字列を右寄せ・折り返しにしたり、背景色を変えたりする方法を紹介しました。