SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(PlusPak)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 (前回同様、またこの書き出しで申し訳ありませんが)業務システムの開発を行っていると、「どのコントロールにフォーカスがあたっているか分かりづらいからどうにかなりませんか?」「無効時に文字が見づらくなるので背景色をどうにかできませんか?」など、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上でどのように設定できるのか、また、複数のコントロールへの一括設定はどのような操作性になるのか、次ページから具体的に見ていきましょう。

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(PlusPak)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6425 2012/02/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング