2017年10月2日
WPF
技術情報

SPREAD for WPF 2.0J 新機能紹介(4)- より便利に – プロパティによるスタイル設定

前回は、「よりWPFらしく」なったセルのバインディングをご紹介しましたが、今回は「より便利に」なった、プロパティによるスタイル設定のご紹介です。

WPFの特徴の一つでもあるXAMLによるスタイルやテンプレートの編集は、大胆なUIのカスタマイズを実現する強力な機能です。一方、些細な外観の変更のはずが、気が付くと結構な分量のXAMLを記述することになったという経験はありませんか。
SPREADのようなUIコントロールの場合、アクティブセルの背景色など、製品の初期設定を変更したいケースは少なくありません。こうした「ちょっとした」変更に、XAMLによるスタイルやテンプレートの大掛かりな編集を要することは、WPF開発とはいえ億劫なものです。

こうした視点に立ち、新バージョンでは、お客様からご要望の多い項目について、プロパティで外観が変更できるようになりました。以下の設定が可能です。

アクティブセルの外観

アクティブセルに、初期設定と異なる文字色や背景色を設定したいというご要望を多くいただきます。

初期設定 アクティブセルの文字色と背景色を変更
 ozu170915_0  ozu170915_1

1.0Jでは、次のようにスタイルを編集することで実現できました。

<!--1.0Jでの設定方法-->
<sg:GcSpreadGrid>
    <sg:GcSpreadGrid.CellStyle>
        <Style TargetType="{x:Type sg:CellPresenter}">
            <Style.Triggers>
                <Trigger Property="IsActiveCell" Value="True">
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="Background" Value="AliceBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </sg:GcSpreadGrid.CellStyle>
</sg:GcSpreadGrid>

一方、2.0Jでは、以下のプロパティが追加されました。

コントロールにフォーカスがある場合の設定:

コントロールにフォーカスが無い場合の設定:

2.0Jでは、上記1.0Jと同じことが、次の記述で実現できます。

<!--2.0Jでの設定方法-->
<sg:GcSpreadGrid ActiveCellForeground="Blue" ActiveCellBackground="AliceBlue"/>

プロパティを使用して、簡潔なXAMLの記述で設定できるようになりました。

ヘッダのマウスオーバー時の外観

ヘッダのマウスオーバー時の色を変更したい、というご要望も多くいただきます。
2.0Jで以下のプロパティが追加されました。

初期設定 マウスオーバー時の文字色と背景色を変更
 ozu170915_3_2  ozu170915_4_20

また、SPREADではアクティブセルのヘッダがハイライトされますが、2.0Jでは、このハイライトにマウスオーバーした時の色を変更するプロパティも追加されました。

初期設定 ハイライトにマウスオーバー時の背景色を変更
 ozu170915_3_1  ozu170915_4_1

これらのプロパティは、列ヘッダの設定を変更する場合は列ヘッダの、行ヘッダのハイライトを変更する場合は行ヘッダのスタイルに設定します。

以下、列ヘッダの設定を変更する例です。

<sg:GcSpreadGrid>
    <sg:GcSpreadGrid.ColumnHeaderStyle>
        <Style TargetType="sg:ColumnHeaderCellPresenter">
            <Setter Property="HighlightMouseOverBackground" Value="Navy"/>
            <Setter Property="MouseOverForeground" Value="WhiteSmoke"/>
            <Setter Property="MouseOverBackground" Value="SeaGreen"/>
        </Style>
    </sg:GcSpreadGrid.ColumnHeaderStyle>
</sg:GcSpreadGrid>

セル選択時の外観

最後にご紹介するのはセル選択時の外観です。セル範囲を選択すると、アクティブセルを除く選択範囲に半透明の背景色が設定されます。
この選択範囲の外観を、初期設定と異なるものに変更したいというご要望も多いです。

初期設定 選択範囲の文字色/背景色/罫線を変更(1.0Jから可能)
 ozu170915_5_0  ozu170915_5_11

1.0Jでは、選択範囲の文字色/背景色/罫線を変更するプロパティは提供されましたが、背景色の透け具合を変更する設定が提供されておらず、この点、お客様からご要望いただくことが少なくありませんでした。
2.0Jでは、不透明度を変更できる以下のプロパティが追加されました。

不透明度を設定(2.0J新機能)
初期値(0.1) 0に変更(つまり透明)
 ozu170915_5_0  ozu170915_5_10
0.5に変更 1.0に変更(つまり不透明)
 ozu170915_5_2  ozu170915_5_3

詳しくは、製品ヘルプ「選択範囲の外観」も併せてご参考いただければと思います。

機会があれば、ぜひご活用ください!