連載
» 2011年01月06日 00時00分 公開

連載:WPF入門:第8回 WPFの「コントロール」を学ぼう (2/2)

[岩永信之(http://ufcpp.net/),著]
前のページへ 1|2       

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

 今度は、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入門」のインデックス

連載:WPF入門

前のページへ 1|2       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。