GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

「WPF/XAML」開発に重宝する、プロパティによるスタイル設定

最強の表計算・グリッドコントロールとして多くの開発現場で採用されてきたSPREAD(スプレッド)。この記事ではWPFプラットフォームに対応した「SPREAD for WPF 2.0J」の機能を紹介します。

XAMLをカスタマイズする課題

WPFの特徴の一つでもあるXAMLによるスタイルやテンプレートの編集は、大胆なUIのカスタマイズを実現する強力な機能です。
一方、些細な外観の変更のはずが、気が付くと結構な分量のXAMLを記述することになったという経験はありませんか。

SPREAD for WPFのようなUIコントロールの場合、アクティブセルの背景色など、初期設定を変更したいケースは少なくありません。こうした「ちょっとした」変更に、XAMLによるスタイルやテンプレートの大掛かりな編集を要することは、WPF開発とはいえ億劫なものです。

こうした課題を解決するために、プロパティで外観が変更できる方法を提供しています。
XAMLを編集することなく以下の設定が可能です。

アクティブセルの外観

アクティブセルに、初期設定と異なる文字色や背景色を設定できます。

初期設定

アクティブセルの文字色と背景色の初期状態

アクティブセルの文字色と背景色を変更

アクティブセルの文字色と背景色を変更

以下はXAMLで記述した場合の設定方法です。スタイルを編集することで実現します。

<!--従来の設定方法-->
<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>

SPREAD for WPF 2.0J以降では、以下のプロパティを提供しています。

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

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

以下のようにプロパティに設定するだけで実現します。

<!--プロパティを使用した設定方法-->
<sg:GcSpreadGrid 
    ActiveCellForeground="Blue" 
    ActiveCellBackground="AliceBlue" />

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

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

ヘッダのマウスオーバー時の色を変更できます。

初期設定

初期設定

マウスオーバー時の文字色と背景色を変更

マウスオーバー時の文字色と背景色を変更

また、SPREADではアクティブセルのヘッダがハイライトされますが、このハイライトにマウスオーバーした時の色もプロパティで設定できます。

初期設定

ハイライトにマウスオーバー時の背景色の初期状態

ハイライトにマウスオーバー時の背景色を変更

ハイライトにマウスオーバー時の背景色を変更

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

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

<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>

セル選択時の外観

セル範囲を選択すると、アクティブセルを除く選択範囲に半透明の背景色が設定されます。 この選択範囲の外観を、初期設定と異なるものに変更できます。

初期設定

セル選択時の外観の初期状態

選択範囲の文字色/背景色/罫線を変更

選択範囲の文字色/背景色/罫線を変更

初期バージョンかた提供していた、選択範囲の文字色/背景色/罫線を変更するプロパティに加え、背景色の透け具合を変更する設定するプロパティが利用して、不透明度を指定できます。

不透明度を設定

SelectionBackgroundOpacityの初期値は"0.1"で、デフォルトはかなり透明に近い透け具合です。プロパティの値を以下のように変更することで、この透け具合を調整できます。詳しくは、製品ヘルプ「選択範囲の外観」に記載があります。

  • 0に変更(つまり透明)
    title=0に変更

  • 0.5に変更
    title=0.5に変更

  • 1.0に変更(つまり不透明)
    title=1.0に変更

SPREAD for WPFの機能を体感

.NET FrameworkのClick Once機能を利用したデモを公開しています。
Windows PCにWebサイトからインストールして、SPREAD for WPFの機能を実際にお試しいただけます。