今度は、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を指定することで、タイトルバーや枠線の太さを気にすることなく、コンテンツのサイズをぴったり指定できる。
ウィンドウでは、以下のような属性を指定することで、ウィンドウの見た目や機能をいろいろとカスタマイズ可能である。
例えば、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>
このようなウィンドウを作った場合、タイトルバーが存在しないため、そのままではドラッグによるウィンドウの移動ができない。ウィンドウの移動を可能にしたければ、以下のように、マウス・クリック・イベントのハンドラに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」を設定することで、スペルチェックが働くようになる。
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入門」
Copyright© Digital Advantage Corp. All Rights Reserved.