第8回 WPFの「コントロール」を学ぼう：連載：WPF入門（2/2 ページ）

GUIアプリケーション開発の主役である「コントロール」を中心に、WPFのUI要素について説明。コントロールの全体像と基礎を説明し、用途ごとに分類する。

[岩永信之（http://ufcpp.net/），著]

■コントロールを用途ごとに分類

　今度は、WPFが標準提供しているコントロールや関連するUI要素を、用途ごとに分類して見ていこう。

●用途：レイアウト

　前回説明したパネル（＝複数の子要素と協調的にレイアウトを決定するUI要素）以外にも、Table 2に示すように、レイアウトに関係するUI要素がいくつかある。

	分類	UI要素	説明
	レイアウト	Window	ウィンドウ
		StackPanel WrapPanel DockPanel Grid Canvas VirtualizingStackPanel	前回参照
		ScrollViewer	コンテンツが指定サイズに収まらない場合にスクロール可能にする
		GroupBox	グループを表すヘッダと枠線を表示する
		Expander	コンテンツを折りたたんで表示／非表示を切り替える
		Viewbox	コンテンツを指定サイズになるように拡大／縮小する
		TabControl	複数のパネルをタブで切り替える
	レイアウト部品	Separator	メニューなどで使う区切り線
		GridSplitter	<Grid>要素の行や列の幅／高さを調整するためのスプリッタ
		ResizeGrip	ウィンドウのサイズを変更するためのつまみ
		ScrollBar	スクロールバー
		Thumb	スクロールバーのつまみなど、ユーザーがドラッグできる部分
		RepeatButton	マウス・ボタンを押し続けている間中クリック・イベントが発生するボタン。スクロールバーなどの部品として使う
	装飾	Border	UI要素の回りに枠線を表示する
		BulletDecorator	ビュレット（＝個条書き用の中点）を表示する
Table 2: レイアウトに関係するUI要素 ・System.Windows名前空間に所属するクラス： Window ・System.Windows.Controls名前空間に所属するクラス： StackPanel、WrapPanel、DockPanel、Grid、Canvas、VirtualizingStackPanel、ScrollViewer、GroupBox、Expander、Viewbox、TabControl、Separator、GridSplitter、Border ・System.Windows.Controls.Primitives名前空間に所属するクラス： ResizeGrip、ScrollBar、Thumb、RepeatButton、BulletDecorator

○ウィンドウ

　ウィンドウ（＝<Window>要素）もContentControlクラスを継承する一種のレイアウト用コントロールである。ウィンドウのサイズは、<Windows>要素にWidth属性およびHeight属性を用いて明示的に指定するほかに、SizeToContent属性を用いてコンテンツのサイズに合わせることも可能である。SizeToContent属性にWidthAndHeightを指定することで、タイトルバーや枠線の太さを気にすることなく、コンテンツのサイズをぴったり指定できる。

　ウィンドウでは、以下のような属性を指定することで、ウィンドウの見た目や機能をいろいろとカスタマイズ可能である。

• WindowStyle: タイトルなしのウィンドウや、ダイアログ形式（＝固定サイズ）のウィンドウを作れる。
• ResizeMode: リサイズ可能かどうかを指定する。
• AllowsTransparency: ウィンドウの背景色を半透明にする際に、背後のウィンドウやデスクトップが透けて見えるようにするためにはAllowsTransparency属性にTrueを設定する必要がある。

　例えば、List 3に示すようなXAMLコードで、枠線なし、リサイズ可能、半透明のウィンドウを作ることができる。Figure 8に実行結果を示す。

<Window x:Class="atmarkit08.NoneStyleWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    WindowStyle="None"
    ResizeMode="CanResizeWithGrip"
    AllowsTransparency="True"
    Background="#80808080"
    SizeToContent="WidthAndHeight">
  <Grid>
    <TextBlock FontSize="50">半透明ウィンドウ</TextBlock>
  </Grid>
</Window>

List 3: 枠線なし、リサイズ可能、半透明のウィンドウ

Figure 8 : List 3の実行結果
この場合、ウィンドウの背後にVisual StudioのC#コード・エディターが表示されている。

　このようなウィンドウを作った場合、タイトルバーが存在しないため、そのままではドラッグによるウィンドウの移動ができない。ウィンドウの移動を可能にしたければ、以下のように、マウス・クリック・イベントのハンドラにDragMoveメソッドを呼び出すコードを記述する（C#の例）。

this.MouseLeftButtonDown += (sender, e) => { this.DragMove(); };

　ウィンドウを閉じるのも、コンテキスト・メニューやキー入力イベントなどを使うといいだろう。例えば以下のようなコードで（C#の例）、任意のキーが入力されたときにウィンドウを閉じるようにできる。

this.KeyDown += (sender, e) => { this.Close(); };

●用途：ユーザーとの対話

○ボタン

　Table 3にボタンに関連するUI要素を示す。

UI要素	説明
ButtonBase	ボタンの共通基底
Button	通常のボタン
ToggleButton	CheckBoxコントロールなどの、オン／オフを切り替えられるコントロールの基底クラス
Table 3: ボタン要素

　前節で、レイアウト部品として紹介したRepeatButtonコントロールもButtonBaseクラス（System.Windows.Controls.Primitives名前空間）から派生している。

　ButtonBaseクラスのClickModeプロパティを設定することで、Clickイベントが発生するタイミングを「Release」（＝ボタンを押して離したとき）、「Press」（＝ボタンを押したとき）、「Hover」（＝ボタンの上にマウス・カーソルを載せたとき）の3つの中から選べる。

　また、Buttonクラスでは、IsDefaultプロパティに「true」を設定することで、いわゆるデフォルト・ボタン（＝WindowsフォームでいうところのAcceptButton。［Enter］キーを押したときにClickイベントが発生する）に、IsCancelプロパティに「true」を設定することでキャンセル・ボタン（＝同、CancelButton。［Escape］キーを押したときにClickイベントが発生する）にすることができる。

　ToggleButtonクラス（System.Windows.Controls.Primitives名前空間）は、オン／オフの2つの状態を表すクラスであるが、IsThreeStateプロパティがtrueの場合、オン／オフ／未設定の3つの状態（＝IsCheckedプロパティがfalseのときとnullのときで異なる表示が行われる）を表すことも可能である。

○テキスト入力

　Table 4にテキスト入力に関連するUI要素を示す。

UI要素	説明
TextBox	通常のテキストボックス
RichTextBox	リッチ・テキストを編集するためのテキストボックス
PasswordBox	パスワード用のテキストボックス。入力された文字列は伏せ字で表示され、内部的に暗号化される
Table 4: テキスト入力要素

　<TextBox>要素および<RichTextBox>要素では、テキストボックス内で選択されている文字列に関する情報を、SelectionStartプロパティ、SelectionLengthプロパティ、および、SelectedTextプロパティを通して取得できる。また、AutoWordSelectionプロパティに「true」を設定することで、マウスでドラッグした際に単語単位で文字列選択されるよう、選択範囲が自動調整されるようになる。

　<TextBox>要素内で複数行のテキストを表示したい場合には、TextWrappingプロパティに「Wrap」を設定する。複数行テキストを表示する際、MinLinesプロパティおよびMaxLinesプロパティを設定しておくと、実際の行数が変わる場合にも表示上のサイズを固定することができる。また、［Enter］キーで改行を入力したい場合には、AcceptsReturnプロパティに「true」を設定する。

　また、WPFにはスペルチェック機能があり、<TextBox>要素や<RichTextBox>要素のSpellCheck.IsEnabled添付プロパティに「true」を設定することで、スペルチェックが働くようになる。

【コラム】UI要素上の文字がにじんで見える場合の対処法（WPF 4以降）

　WPFアプリケーションでは、UI要素の位置などを浮動小数点精度で計算し、非整数ドットになった場合には補間処理を行っている。この挙動は、アニメーション時に滑らかな表示ができるという利点はあるものの、動きがない場合でフォント・サイズが小さいときに文字がにじんで見えるという問題があった。

　そこで、WPF 4では、TextOptionsクラス（System.Windows.Media名前空間）で定義された添付プロパティを用いて、アニメーションの有無をヒントとして与えたり、ClearTypeフォント表示を行うかどうかを指定したりすることで文字の描画方法を制御できるようになった。

○そのほかの対話要素

　Table 5にそのほかの対話的UI要素を示す。

	分類	UI要素	説明
	データ	DataGrid	グリッド状にデータを表示・編集
		Calendar	カレンダ
		DatePicker	日付を選択
	選択	CheckBox	チェックボックス
		RadioButton	ラジオボタン。パネル内では1つだけがチェック可能*1
		ComboBox	コンボボックス。いわゆるドロップダウン形式で項目を選択する
		ListBox	リストボックス
		TreeView	ツリー形式で項目を表示・選択する
		Slider	つまみをスクロールすることで値を変化させる
	メニュー	Menu	メニュー
		ContextMenu	右クリックで表示するコンテキスト・メニュー
		ToolBar	ツールバー
	情報表示	TextBlock	テキストを表示
		Label	テキストボックスなどに付けるラベル。ショートカット・キーを設定可能
		ToolTip	マウス・カーソルを重ねたときにポップアップ表示されるツールチップ*2
		Popup	ポップアップ。ツールチップと異なり、表示／非表示の切り替えはIsOpenプロパティを用いて明示的に行う
		ProgressBar	処理の進捗（しんちょく）状況を表示する
		StatusBar	ステータスバー
	ナビゲーション	NavigationWindow	「戻る」「進む」などの機能を有するウィンドウ
		Frame	ページを格納するためのフレーム
		Page	ページ
		Hyperlink	ページを遷移するためのリンク
Table 5: そのほかの対話的UI要素 *1　<RadioBox>要素は、GroupNameプロパティを指定することでグループ化できる。同一のグループ内でチェックできるのは1つだけとなる。特にGroupNameプロパティを指定しなかった場合には、同一のパネル（＝Panelクラスを継承する<Grid>などの要素）内でグループ化される。 *2　ツールチップでは、ToolTipServiceクラス（System.Windows.Controls名前空間）で定義された添付プロパティを用いて、表示する位置や時間などの設定が行える。

●用途：そのほか

　Table 6にそのほかのコントロールや関連するUI要素を示す。

	分類	UI要素	説明
	メディア	Image	画像を表示する
		MediaElement	動画などを表示する
	ドキュメント	DocumentViewer FlowDocumentPageViewer FlowDocumentReader FlowDocumentScrollViewer	ドキュメント表示
		StickyNoteControl	付せんのように、付帯情報を表示する
	デジタル・インク	InkCanvas	マウス、タッチ、スタイラスなどの操作でストロークを描画するための領域
Table 6: そのほかのコントロールや関連するUI要素

---

　次回は基本図形や2D描画など、グラフィック関係について説明していく。

「連載：WPF入門」