【WPF】はてなアイコンを設置してツールチップでヘルプを表示する

2018年8月8日C#, 開発

おはようございます。

今回はツールチップによってヒントを表示するサンプルです。

本当は何も説明しなくてもいいユーザーインターフェースを目指すべきなんですが、
なかなかそうもいかない場合もありますよね。

まあプラスアルファで付けるとそれはそれで喜ばれるものかもしれません。

プログラムは前回のものを流用します。

スポンサーリンク

画面の修正

MainWindow.xaml

抜粋

Imageタグの中に、ToolTipServiceのToolTipタグを入れ、更にテキストブロックでヒントを表示するようにしました。
また、文言自体はリソースファイルから取得するようになっています。
リソースを利用するために宣言部分に「xmlns:p」という属性を追加してあります。

画像の追加

はてなアイコン
はてなアイコン

 

 

 

 

 

 

 

ハテナマークの画像を作成し、プロジェクト直下の「Resource」ディレクトリに追加します。
(Inkscape というドローソフトでサクッと作りました)

スタイル定義の追加

StyleDic.xaml(抜粋)

リソースの追加

ヒントで表示する文言をリソースに追加します。

Resources.resx

リソースの追加
リソースの追加

文言を追加し、xamlからアクセスするためにアクセス修飾子を「public」に変更します。

起動してみる

ツールチップ1
ツールチップ1

 

 

 

 

 

 

 

 

名前ラベルの横にあるハテナマークをマウスオーバーした表示です。

ツールチップ2
ツールチップ2

 

 

 

 

 

 

 

 

こちらは種別ラベルの横のハテナマークをマウスオーバーした表示となります。

ツールチップ3
ツールチップ3

 

 

 

 

 

 

 

 

ついでにボタンにもつけてみました。

まとめ

簡単に実装できるうえ、スタイルを変更したり、表示時間を変更したりもできます。
表示するコンポーネントをテキストブロック以外にも出来そうなので、カスタマイズ性抜群ですね。

興味のある方は色々試してみてください。

ではでは。

 

スポンサーリンク


関連するコンテンツ

2018年8月8日C#, 開発C#, ToolTip, WPF, プログラミング

Posted by doradora