WPFアプリの「条件付き書式」をBindingでより簡潔に実現する

１．C1.WPF.Binding.4.dllアセンブリの参照

ソリューションエクスプローラ上の「参照設定」を右クリックし、コンテキストメニューから「参照の追加」を選択します。「参照マネージャー」にて[アセンブリ]-[拡張]を選択し、一覧から「C1.WPF.Binding.4.dll」を選択しOKをクリックします。

２．Weight2列の追加

カスタムコンバーターを使用した場合の結果と比較するため、Weight列の次にWeight2列を追加します。MainWindow.xaml上のWeight列の定義部分をコピー＆貼り付けし、Headerプロパティを加えて、Weight2列を追加します。

<c1:Column Binding="{Binding Weight}">
<c1:Column.CellTemplate>
<DataTemplate>
<TextBloc
Text="{Binding Weight, StringFormat=n0}"
HorizontalAlignment="Right"
Foreground="{Binding Weight,
          Converter={StaticResource ForegroundConverter},
          ConverterParameter={StaticResource WeightRange} }"
FontWeight="{Binding Weight,
          Converter={StaticResource FontWeightConverter},
          ConverterParameter={StaticResource WeightRange} }"
      />
</DataTemplate>
</c1:Column.CellTemplate>
</c1:Column>
<c1:Column Binding="{Binding Weight}"  Header="Weight2">
<c1:Column.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Weight, StringFormat=n0}"
HorizontalAlignment="Right"
Foreground="{Binding Weight,
          Converter={StaticResource ForegroundConverter},
          ConverterParameter={StaticResource WeightRange} }"
FontWeight="{Binding Weight,
          Converter={StaticResource FontWeightConverter},
          ConverterParameter={StaticResource WeightRange} }"
      />
</DataTemplate>
</c1:Column.CellTemplate>
</c1:Column>

３．Foregroundプロパティの設定内容を変更

Foregroundプロパティの定義部分を以下のコードに置き換えます。

Foreground="{c1:C1Binding
Expression='if(Weight < 200, |red|, if(Weight > 1000, |green|, |black|))'}"

Bindingステートメントの代わりにC1Bindingを使用し、そのExpressionプロパティにインライン構文を記述するのがポイントです。

このインライン構文では、if関数を使用し、Weightフィールドの値が200より小さければ赤色、1000より大きければ緑色、それ以外は黒色を前景色として設定することを示しています。

C1Bindingでは"とパイプ文字（|）の２つの形式のインライン引用符をサポートしており、「|green|」は「’green’」と同義となります。これにより、XAMLを崩すことなく連結式で引用符を使用できます。

なお、リテラル内には不等号（<、>）を直接記述することができないため、それぞれ<、>として記述しています。

４．FontWeightプロパティの設定内容を変更

同様に、FontWeightプロパティの定義部分を以下のコードに置き換えます。

FontWeight="{c1:C1Binding
Expression='if(OR(Weight < 200, Weight > 1000), |bold|, |normal|)'}"

このインライン構文では、if関数とOR関数を使用し、Weightフィールドの値が200より小さいか1000より大きければ太字、それ以外は標準のフォントスタイルを設定することを示しています。

ここまで完了すると、Weight2列の定義は以下のようになるはずです。

<c1:Column Binding="{Binding Weight}"  Header="Weight2">
<c1:Column.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Weight, StringFormat=n0}"
HorizontalAlignment="Right"
Foreground="{c1:C1Binding
          Expression='if(Weight &lt; 200, |red|, if(Weight &gt; 1000, |green|, |black|))'}"
FontWeight="{c1:C1Binding
          Expression='if(OR(Weight &lt; 200, Weight &gt; 1000), |bold|, |normal|)'}" />
</DataTemplate>
</c1:Column.CellTemplate>
</c1:Column>

Bindingによる定義とは異なり、Converterプロパティの設定はありません。また、Expressionプロパティにインラインで構文が記述されていることで、ここでどういった処理が実行されるかかXamlコード上で理解しやすくなっているかと思います。また、わずかではありますが、XAMLコード自体も短くなりました。

実行してみる

ここまで完了したら、デバッグ実行して結果を確認してみましょう。設定等に誤りがなければ、添付画像のように、Weight列とWeight2列が同じ条件に基づいて書式設定されていることが確認できます。