CodeZine(コードジン)

特集ページ一覧

GcStylePlusコンポーネントで統一感あるUIを作成しよう

~PlusPakによる外観拡張機能を活用する~

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/02/24 14:00

 今回は、PlusPak for Windows Forms 6.0Jの中から、「StylePlus」コンポーネントを取り上げます。このコンポーネントを使うと、Windowsの標準UIとは異なる動きに対応でき、WindowsフォームアプリのUIを少ない手間で見やすく統一できます。StylePlusを使って、ユーザーが使いやすく、楽しめるUIを作成してみましょう。

 (前回同様、またこの書き出しで申し訳ありませんが)業務システムの開発を行っていると、「どのコントロールにフォーカスがあたっているか分かりづらいからどうにかなりませんか?」「無効時に文字が見づらくなるので背景色をどうにかできませんか?」など、Windowsの標準UIとは異なる動きを要求されることもあります。

 「そういうものなのです。これが標準のもので、Windowsの別のソフトを使う時も同様の使い勝手なので、覚える事が少ないですよ。」と説得することもあります。しかし、実際にシステムを使用するお客様には、ある程度の年齢の方など「老眼などになってくると特にフォーカスがどこに当たっているか分かりづらい」などとお話される方もいます。

 実際、LostFocusイベントやGotFocusイベント(イベント名からわかるように、VB6が最新だった頃の話です)でコントロールのBackColorプロパティを変更し、フォーカスを持っているコントロールを分かりやすくしたシステムを納入したこともあります。この時は、すべてのフォームの中で該当するコントロールのLostFocusイベントとGotFocusイベントに処理を書かなくてはいけなかったので、テストも含めて大変だったと記憶しています。

 今であれば、AddHandleなどを駆使してもう少しスマートに実装できると思いますが、それでもコントロールが増えてくると作業時間への影響は見過ごせないレベルになってしまいます。そんな時に有効なコンポーネントがPlusPakに含まれている「StylePlus」コンポーネントです。このコンポーネントを使えば、前述のような機能を本当に簡単に実装できます。

StylePlusとは?

StylePlusコンポーネントの導入

 StylePlusコンポーネントは、IDEのフォームデザイナにコントロールを貼りつけて利用します。

StylePlusの配置
StylePlusの配置

 PlusPakインストール後にIDEのツールボックスにStylePlusコンポーネントを登録し、そこからWindowsフォームにドラッグ&ドロップします。PlusPakには多数のコントロールが含まれていますが、今回は分かりやすいようにツールボックスにはStylePlusコンポーネントだけを追加しました。

ツールボックスへのStylePlusの登録
ツールボックスへのStylePlusの登録

StylePlusが管理できる状態

 StylePlusが管理できる状態は次の4つです。

  1. フォーカスを持っている状態(ActiveStyle)
  2. 無効な状態(DisableStyle)
  3. マウス通過時(HoverStyle)
  4. マウスが押された状態(PressedStyle)

 StytlePlusはこの4つの状態の時だけ一時的にプロパティ値を変更できます。例えば、ActiveStyleを使うと「フォーカスを得た時はこの処理で、フォーカスを失った時は元に戻す処理」のような記述ではなく「フォーカスを持っている時だけこの値」というシンプルな形でコードが書けるのです。

StylePlusが管理できるプロパティ

 StylePlusが管理できるプロパティは次の6つです。これらの値も個別に設定できます。

  1. BackColor
  2. BackgroundImage
  3. BackgroundImageLayout
  4. Cursor
  5. Font
  6. ForeColor

 それでは、Visual StudioのIDE上でどのように設定できるのか、また、複数のコントロールへの一括設定はどのような操作性になるのか、次ページから具体的に見ていきましょう。

フォーカス取得時の背景色を変更

コントロールのプロパティを変更

 StylePlusをコントロールに適用するには、コントロールのタスクから[スタイルの編集]を選択し、スタイルエディタを開いて設定します。

スタイルエディタの起動
スタイルエディタの起動

 スタイルエディタは左側に4つの状態、右側にそれぞれの状態になっている間の6つのプロパティ値を設定できる分かりやすい画面構成になっています。

 それでは「アクティブ状態の時だけ背景色をLimeに変更」する設定をしてみましょう。

スタイルエディタでの設定
スタイルエディタでの設定

 [すべての拡張スタイル]リストボックスで「アクティブ時のスタイル」を選択し、[ThemaStateStyleの設定]で[BackColor]プロパティに「Lime」を設定します。たったこれだけで設定は完了です。この状態で実行すると、次のように期待通りの動きをしてくれます。

アクティブ状態スタイル適用の実行結果
アクティブ状態スタイル適用の実行結果

同一フォームのコントロールを一気に

 コントロールのタスクからスタイルエディタを起動した場合、StylePlusの適用対象は該当コントロールのみとなります。もし複数のコントロールに同じような設定をしたい場合、フォームデザイナの下部に配置されているStylePlusコンポーネントのタスクから[スタイルの編集]を選択してください。

StylePlusコンポーネントのタスク
StylePlusコンポーネントのタスク

 StylePlusコンポーネントのタスクから起動されたスタイルエディタの画面構成は、コントロールのタスクから起動されたものとは異なり、左にコントロールの一覧、右に状態とプロパティの一覧という構成になります。

複数コントロール用スタイルエディタ
複数コントロール用スタイルエディタ

 操作方法は左側でStylePlusを適用したいコントロールを選択し、右側で状態とプロパティを設定します。

 通常、「テキストボックスがフォーカスを得ている間は」といったようにコントロール単位で同じ設定をする場合が多いと思いますが、そのような時はスタイルエディタの左側の上にある[種類別]アイコンをクリックして、コントロール単位でまとまったツリー表示をするとチェックしやすくなります。

コントロールの種類別表示
コントロールの種類別表示

 例えば、テキストボックスであれば[TextBox]チェックボックスにチェックすればその下にあるテキストボックスすべてにチェックが入り、スタイルエディタでのスタイル適用対象として選択できます。

複数フォームのコントロールを一気に

 続いて、複数フォームがあるプロジェクトではどのようにスタイルを適用するか確認してみましょう。

複数フォームのプロジェクト例
複数フォームのプロジェクト例

 繰り返しになりますが、StylePlusコンポーネントはフォームデザイナにコントロールを貼りつけて初めて有効になるコンポーネントです。そのため複数フォームに適用したい場合は、フォームごとにStylePlusコンポーネントの貼り付けが必要です。貼り付けは個々のフォームごとに必要ですが、貼り付けが終わっていればスタイルエディタで一気に複数フォームにまたがってスタイルを設定できます

 どのフォームでもいいので、StylePlusコンポーネントのタスクからスタイルエディタを起動して[開いているフォームをすべて表示]アイコンをクリックすれば、現在、開いているフォームに対するスタイルを設定できます。

開いているフォームをすべて表示
開いているフォームをすべて表示

 後は必要なコントロールに対してチェックし、状態に対するスタイルを設定して[OK]ボタンをクリックすれば、スタイルの設定は完了です。

複数プロジェクトのコントロールを一気に

 複数フォームに対するStylePlusコンポーネントの使い方が分かったので、次は複数プロジェクトにまたがったフォームに対する使い方を確認してみましょう。

 複数プロジェクトにまたがった時のスタイル設定方法も1プロジェクトに複数フォームに対して設定する場合と一緒です。必要なフォームにStylePlusコンポーネントを貼りつけてフォームデザイナで開いておけばスタイルエディタのコンポーネントツリーにコントロールが表示されます。

複数プロジェクトをまたがったスタイル設定
複数プロジェクトをまたがったスタイル設定

 あとは必要なコントロールにチェックをし、状態のプロパティを設定してから[OK]ボタンをクリックすれば設定完了です。

※参考

 複数フォームおよび複数プロジェクトのコントロールの変更は、SP1以降のPlusPak for Windows Forms 6.0Jで利用できる機能です。

コードからStylePlusを制御

 StylePlusコンポーネントで設定するスタイルは、コードからも制御可能です。通常はスタイルエディタで設定した方が生産性は高いと思いますが、例えば各種データの状態やログインした人の好みで状態に対するプロパティ値を設定したい場合などにコードからの設定機能が役に立ちます。

 StylePlusコンポーネントをコードから使う場合、プロジェクトにDLLの参照設定やライセンスファイルの追加が必要です。手動で参照設定と追加を行う方法もありますが、一番簡単なのはStylePlusコンポーネントをフォームに配置して自動的に参照設定とライセンスファイルの追加を行った後、StylePlusコンポーネントを削除する方法です。

 この操作によりそのプロジェクトのすべてのフォームでコードによるStylePlusのスタイル設定が可能になります。

プロジェクトへのライセンスファイル設定
プロジェクトへのライセンスファイル設定
リスト 1 フォーカス取得中の背景色変更コード例
Imports GrapeCity.Win.Components

Public Class CZ120204_Form

    Private GcStylePlus1 As New GcStylePlus

    Private Sub CZ120204_Form_Load(sender As Object,
                                   e As System.EventArgs) Handles Me.Load
        Dim aStyle As New ThemeStateStyle
        aStyle.BackColor = Color.Lime
        For Each cnt As Control In Me.Controls
            If TypeOf cnt Is TextBox Then
                GcStylePlus1.SetActiveStyle(cnt, aStyle)
            End If
        Next
    End Sub
End Class
実行例
実行例

 今回のサンプルではフォームにあるテキストボックスのBackColorに対してフォーカスがある時だけLimeにしています。コードで設定できる状態やプロパティはスタイルエディタで設定できる状態とプロパティと同じものになるので、この他にも無効な状態やマウス通過時のプロパティ値をコードで設定することも可能です。

設定できるプロパティ値
プロパティ 状態
SetActiveStyle フォーカスを持っている状態
SetDisableStyle 無効な状態
SetHoverStyle マウスが通過中の状態
SetPressedStyle マウスが押された状態

まとめ

 StylePlusコンポーネントを使えば、WindowsフォームアプリのUIを少ない手間で見やすくすることが可能です。また、複数プロジェクトにまたがっていても一気に変更ができるので「見てもらって感想をフィードバックして良くする」というプロセスの際も、気軽に変更ができます。さらに一歩進めて、Personalizationを行って各人の好みや見やすさなどを反映できるように設計すれば、費用対効果の高い提案が可能となるかもしれません。

 ぜひ「標準だから」で済ませず、毎日使っていただくアプリだからこそ、ユーザーが疲れず気持ちよく、できれば楽しく使ってもらえるように考えてみませんか。さまざまな理由から、WPFを利用できない状況でも、WPFでなければ実現できないと単純に諦めず、StylePlusを駆使してWindowsフォームでも実現できるよう、挑戦してみてください。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 初音玲(ハツネアキラ)

     国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。  個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。  Microsoft MVP for Windows Development...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5