Comments
Description
Transcript
4.4 コントロール - Microsoft
Chapter 4 Silverlight アプリケーション開発 基本編
4.4 コントロール
図 4-18 コンテンツの切り替え後
4.4 コントロール
ユーザー インターフェイスとコントロール
Silverlight アプリケーションのユーザー インターフェイスは、「3.1 最初に作るアプリケー
ション」（⇒ p. 30）で説明したように、コントロールを配置して、コントロールのイベント
ハンドラーを作成し、そのイベント ハンドラーにコードを記述して作成します。見た目を変
［バージョン情報］の部分は HyperlinkButton コントロールで、NavigateUri プロパ
ティにバージョン情報のページへの URI が設定されています。
ナビゲーション フレームワークの仕組みは、図 4-19 のようになっています。アプリケーショ
ンの中にフレームがあり、そのフレーム内にページを表示させます。ページを複数用意してい
ると、表示させるページを変えることにより見た目を変えることができます。
ページ1
(Page1. xaml)
ユーザー インターフェイスを構築するために必要なことは、どのようなコントロールがあ
るか、そのコントロールがどのような機能を持っているか、そしてどのようなイベントに対応
したイベント ハンドラーを作成できるかを知ることです。作りたいアプリケーションの仕様
にしたがい、適切なコントロールを選んで配置します。
構築するユーザー インターフェイスの仕様に合わせてどのようなコントロールを選ぶべき
かを列挙し、主なプロパティとイベントについても説明しています。
図 4-19 ナビゲーション フレームワークの仕組み
フレーム
えるときは、プロパティを変更します。
ページ2
(Page2. xaml)
テキスト表示
文字を表示させるときは、Label コントロールまたは TextBlock コントロールを使用し
ます。どちらも任意の文字列を任意のフォントおよびフォント サイズで表示させることがで
きます。Label コントロールは、背景に特定の色や画像を貼り付けることができるなど、
ページ3
(Page3. xaml)
ページ 4
(Page4. xaml)
TextBlock コントロールと比べて機能が豊富です。一方、TextBlock の利点は、軽量で
あるということと、改行ができるということです。改行するには、TextWrapping プロパティ
を「Wrap」に変更します。
表示させたい文字は、Label コントロールの場合は Content プロパティ、TextBlock
コントロールの場合は Text プロパティに代入します。どちらのコントロールも、FontSize
プロパティで文字の大きさを変えたり、Foreground プロパティで文字色を変えられます。
テキスト入力
文字の入力には、TextBox コントロールを使用します。入力した文字は、Text プロパティ
に入ります。Text プロパティにあらかじめ文字列を代入していると、その文字が TextBox
の中に表示されます。TextBlock コントロールと同様に、FontSize プロパティや Fore
ground プロパティで文字の大きさや色を変えることもできます。複数行の文字列を入力さ
せるときは、AcceptsReturn プロパティを「true」に変更します。デフォルトでは、1
行の文字列しか入力できません。
60
61
Chapter 4 Silverlight アプリケーション開発 基本編
4.4 コントロール
TextBox コントロールに文字を入力すると、TextChanged イベントが発生します。グ
配がありません。入力された文字列は、Password プロパティに入ります。
ラフィカル デザイン ビュー上に表示されている TextBox コントロールをダブル クリックす
入力中の文字列を隠すために表示されるキャラクターは、PasswordChar プロパティに
ると、TextChanged イベントに対応したイベント ハンドラーが生成されます。TextBox
よって変更できます。
コントロールに表示されている文字列が変更されるたびに何らかの処理を行いたいときは、こ
PasswordBox コントロールはデフォルトの状態ではツールボックスに表示されていませ
のイベント ハンドラーを使用します。
んので、使用するときはツールボックスのコントロールの上で右クリックし、
［アイテムの選択］
RichTextBox コ ン ト ロ ー ル を 使 用 し て も、 文 字 の 入 力 お よ び 表 示 が で き ま す。
をクリックして、
［Silverlight コンポーネント］タブにある［PasswordBox］にチェックを入れま
RichTextBox コントロールは、個別の文字の色やフォントを変えることができる書式付き
す。
テキストを表示できます。
数値の変更
入力候補の表示
こ の よ う な 場 合 に は、AutoComplete
数値の変更をマウスで行いたいような場合
図 4-20 AutoCompleteBox コントロール
Box コントロールを使用します。入力候補
テキストボックス
の情報は、ItemsSource プロパティに設
定します。ItemsSource プロパティへの
ドロップダウン
設定はプロパティ ウィンドウで行わず、 リ
選択アダプター
図 4-22 NumericUpDown コントロール
には、NumericUpDown コントロールを使
用します。 図 4-22 の右側にある三角の印が
ついたボタンをクリックすることにより、値
が変化します。値は Value プロパティに格納されます。
値が変更されたときには、ValueChanged イベントが発生します。Minimum プロパティ
スト 4-13 のようなコードを用意します。こ
で最小値、Maximum プロパティで最大値を設定できます。Increment プロパティによって、
のコードを実行し、AutoCompleteBox コ
クリックしたときに変化する値を変えられます。
ントロールに「a」と入力すると、図 4-20 のように表示されます。
AutoCompleteBox コントロールは、通常はテキスト ボックスの部分しか表示されてい
ません。文字を入力することにより、候補となる文字列がドロップ ダウンとして表示されます。
ドロップ ダウンに表示されている部分を選択アダプターと呼びます。
ボタン
ボタンを配置するには、Button コントロールまたは RepeatButton コントロールを使
用します。Button コントロールおよび RepeatButton をクリックしたときには Click
リスト 4-13 ● AutoCompleteBox の入力候補の設定
イベントが発生しますので、対応したイベント ハンドラーを用意することで、ボタンをクリッ
List<string> itemList = new List<string>();
itemList.Add("abcdef");
itemList.Add("abcddd");
itemList.Add("abbbbb");
itemList.Add("aaaaaa");
itemList.Add("bcdefg");
autoCompleteBox1.ItemsSource = itemList;
クしたときに用意したコードを実行できます。Button コントロールをクリックしたときは、
クリックするたびに Click イベントが発生します。RepeatButton の場合は、クリックし
たあとボタンを押しっぱなしにしていると、連続して Click イベントが発生します。クリッ
クした直後に Click イベントが発生し、次の Click イベントは Delay プロパティで設定
しているミリ秒後に発生します。その後は、Interval プロパティで設定しているミリ秒ご
とに Click イベントが発生します。デフォルトでは、Delay プロパティに 500 ミリ秒、
Interval プ ロ パ テ ィ に 33 ミ リ 秒 が 設 定 さ れ て い ま す。 ど ち ら の コ ン ト ロ ー ル も、
パスワード
パスワードの入力には、PasswordBox
62
Content プロパティに設定した文字列をボタンの上に表示します。
図 4-21 PasswordBox コントロール
RepeatButton コントロールは、デフォルトの状態ではツールボックスに表示されていな
コントロールを使用します。PasswordBox
いので、使用するときはツールボックス中のコントロールの上で右クリックし、
［アイテムの選
コントロールは、入力中の文字が自動的に隠
択］をクリックして、
［Silverlight コンポーネント］タブにある［RepeatButton］にチェックを入れ
されるため、入力している文字を見られる心
ます。
63
Chapter 4 Silverlight アプリケーション開発 基本編
4.4 コントロール
例では、
［選択肢 その 1］が選ばれています。
［選択肢 その 2］をクリックすると、
［選択肢 その 1］
ハイパーリンク
ハイパーリンクを配置するには、Hyper
に入っているチェックがなくなり、
［選択肢 その 2］にチェックが付きます。
図 4-23 HyperlinkButton
Content プロパティには、表示させたい文字列を入れます。GroupName プロパティに値
linkButton コントロールを使用します。
を設定すると、同じ GroupName を持つ RadioButton コントロールがグループ化されます。
このコントロールは、特定の Web ページに
RadioButton コントロールをクリックすると、Click イベントが発生します。
ジャンプできますし、普通のボタンのよう
RadioButton コントロールは、選択肢が比較的少ないときで、選択肢の数が変わらない
に特定のコードを実行させるときにも使用できます。
ときに使用します。
HyperlinkButton コントロールは、実行時には単に文字列が表示されているだけですが、
ListBox コントロールは、いくつかの選
マウスをコントロール上に移動させると図 4-23 のように下線が表示されます。表示させる文
択肢の中から選ぶことができるコントロール
字列を変えるには、Content プロパティを変更します。クリックすると、Click イベント
です。 図 4-26 のように、選択肢をリスト形
が発生します。NavigateUri プロパティに特定の URI が指定されていると、クリック時に
式 で 提 示 し ま す。 選 択 肢 の 登 録 に は、
そのページに移動します。
Items プロパティを使用します。
図 4-26 ListBox コントロール
プロパティ ウィンドウの Items と書かれ
たところの右側にある
チェックボックス
二者選択の状況があり、ユーザーにどちら
ボタンをクリックすると、 図 4-27 のように［コレクション エディ
ター］ダイアログが表示されます。
図 4-24 CheckBox
ここで［追加］ボタンをクリックして、ListBox コントロールに追加する項目を指定します。
の 状 態 か を 選 択 し て も ら い た い と き は、
［追加］ボタンをクリックして Content
ListBox コントロールに表示させる項目の数だけ、
CheckBox コ ン ト ロ ー ル を 使 用 し ま す。
プロパティに表示させたい文字列を入力します。選択肢の登録には、ItemsSource プロパ
CheckBox コントロールをクリックするこ
ティを使用することもできます。
とにより、チェックが入っていない状態と
ListBox コントロール上で選択した項目は、SelectedItem プロパティで取得できます。
入っている状態を切り替えられます。
SelectedIndex プロパティには、選択された項目の番号が入ります。選択している項目が
図 4-24 は、チェックされていない状態とチェックされている状態を表しています。チェッ
変わった場合は、SelectionChanged イベントが発生します。
ク さ れ て い る か ど う か は、IsChecked プ ロ パ テ ィ に 反 映 さ れ ま す。 中 間 状 態 は、
ListBox コントロールは、選択肢の数が多い場合や、選択肢の数が変わる可能性がある場
IsThreeState プロパティを「True」に設定したときに現れる状態です。Content プロ
合に使用します。
パティには、表示させたい文字列を入れます。
チェックの状態を変更すると、Checked イベントが発生します。
図 4-27 コレクション エディター
項目の選択
いくつかの選択肢から 1 つを選択させた
図 4-25 RadioButton
いような場合には、RadioButton コント
ロールか ListBox コントロール、または
ComboBox コントロールを使用します。
RadioButton コントロールは、 図 4-25
のように複数の選択肢を提示し、そのうちの
どれかにチェックを入れるコントロールです。選択肢のうち、1 つのみを選択できます。この
64
65
Chapter 4 Silverlight アプリケーション開発 基本編
ComboBox コ ン ト ロ ー ル は、ListBox
4.4 コントロール
図 4-28 ComboBox コントロール
TabItem を 追 加 す る と き に は、 プ ロ パ
コントロールと同様に、いくつかの選択肢の
ティ ウィンドウの Items と書かれている部
中から選ぶことができるコントロールです。
分の右側にある
Items プロパティに選択肢のデータを設定
レクション エディター］ダイアログを表示し
します。ListBox コントロールと違うとこ
て、
［追加］ボタンをクリックします。
［追加］ボ
ろは見た目です。ListBox コントロールは、
タンをクリックした回数だけ TabItem が追
表示にある程度の高さが必要です。
加されます。
［コレクション エディター］ダイ
図 4-30 TabControl
ボタンをクリックし、
［コ
ComboBox コントロールは、クリックしたときだけ選択肢を表示しますので、設置するた
アログでは、TabItem のプロパティを変え
めの範囲が ListBox コントロールと比較して小さくなります。選択している項目が変わった
ることもできます。ダイアログの右側には、プロパティ ウィンドウと同じ内容が表示されます。
ときには、SelectionChanged イベントが発生します。
タブの部分に表示する文字列を変更するときは、Header プロパティを変えます。
値の選択
一定の範囲の中から 1 つの値を選択させ
日付選択
図 4-29 Slider コントロール
たいような場合には、Slider コントロー
ルを使用します。Slider コントロールは、
図 4-29 のようにトラックの部分と Thumb の
部分があり、Thumb を動かすことにより、
Thumb
トラック
日付の選択は、Calendar コントロール
図 4-31 Calendar コントロール
または DatePicker コントロールを使用し
ます。
Calendar コントロールは最初からカレ
ンダーが表示され、1 日または複数の日にち
値を決めます。値は Value プロパティに格
を選択できます。デフォルトでは月間カレン
納されます。値が変更されたときには、ValueChanged イベントが発生します。
ダーが表示されます。DisplayMode プロ
Minimum プロパティで最小値、Maximum プロパティで最大値を設定できます。Thumb の
パティを「Year」や「Decade」に変更す
動かし方には、直接マウスで動かす方法のほか、トラックの部分をクリックしたり、カーソル
ることにより、最初に表示するカレンダーの
キーを使う方法があります。トラックの部分をクリックしたときに増減する量は Large
形式を変えられます。日付の選択を 1 日で
Change プ ロ パ テ ィ に よ っ て 変 え ら れ、 カ ー ソ ル キ ー を 使 用 し た と き に 増 減 す る 値 は
は な く 複 数 の 日 に ち を 含 む 範 囲 に 変 更 す る 場 合 は、SelectionMode プ ロ パ テ ィ を
SmallChange プロパティによって変えられます。
図 4-32 DatePicker コントロール
「SingleRange」に変更します。選択した日は、1 日の場合は SelectedDate プロパティ、
Slider コントロールは、Orientation プロパティを「Vertical」に変更することに
複数の日にちの場合は SelectedDates プロパティによって取得できます。選択した日付を
より縦に表示したり、IsDirectionReversed プロパティを「True」に変更することに
変更したときは、SelectedDatesChanged イベントが発生します。
より値の増減の方向を変えることができます。
DatePicker コントロールは、図 4-32 のように Calendar コントロールと比較して、小
さい面積で表示できます。左側のテキスト フィールドに表示されている日付を、直接編集で
タブ インターフェイス
きます。右側にある「15」と書かれた部分をクリックすると、下側に Calendar コントロー
ルが表示され、カレンダーで日付を選択できます。選択した日にちは SelectedDate プロ
タブ形式のユーザー インターフェイスを作る場合には、TabControl コントロールを使用
パティに入ります。複数の日にちの選択はできないので、SelectedDates プロパティはあ
します。TabControl を使用すると、少ないスペースを有効に活用して、
情報を提供できます。
りません。選択した日付を変更した場合は、
SelectedDateChanged イベントが発生します。
TabControl は 1 つ ま た は 複 数 の TabItem に よ っ て 構 成 さ れ ま す。 図 4-30 は、3 つ の
Calendar コントロールのイベント名と少し違うので、注意してください。
TabItem で 構 成 さ れ て い る 例 で す。 複 数 の TabItem が あ っ た 場 合 で も、 表 示 で き る
TabItem は 1 つだけです。表示する TabItem は、上側にあるタブによって切り替えます。
66
67
Chapter 4 Silverlight アプリケーション開発 基本編
4.4 コントロール
進行状況の表示
進行状況を表示するときには、Progress
音声出力
図 4-33 ProgressBar コントロール
音を出力する際にも、MediaElement コントロールを使用できます。動画の音の部分のみ
Bar コントロールを使用します。Minimum
を使用する場合は、Visibility プロパティを「Collapsed」に変更し、動画を表示させ
プロパティに最小値、Maximum プロパティ
ないようにします。
に最大値を設定し、Value プロパティに現在の値を代入することにより、進行状況を図 4-33
のように表示します。
この例では、Minimum プロパティに「0」、Minimum プロパティに「100」が設定されて
いる状態で、Value プロパティに「70」を入れています。
Web サイトの表示
アプリケーションをブラウザー外で実行す
図 4-34 WebBrowser コントロール
るときにかぎり、外部の Web サイトを表示
画像表示
さ せ る こ と が で き ま す。 こ の と き に は、
WebBrowser コントロールを使用します。
ユーザー インターフェイスの一部として画像を使用するときには、Image コントロールを
Source プロパティに表示させたい URL を
使用します。MultiScaleImage コントロールを使用して画像を表示させることもできます。
指定します。
（⇒ p. 242）で説明する Deep Zoom
MultiScaleImage コントロールは、「6.3 Deep Zoom」
ブラウザー外実行については、「6.1 ブラ
で使用します。
ウザー外実行」（⇒ p. 182）で詳しく説明し
Image コントロールで画像を表示させるには、Source プロパティに絶対 URL を指定する
ます。
か、このアプリケーションである .xap ファイルがある位置を起点とした相対 URL を指定し
ます。画像の形式は、JPEG と PNG 形式をサポートしています。
動画表示
図形描画
動画をユーザー インターフェイスとして使用する場合には、MediaElement コントロー
円または楕円を描くときには Ellipse コ
ルを使用します。再生する動画は、Source プロパティに設定します。デフォルトでは、自
ントロール、長方形を描くときには Rectan
動的に動画を再生します。自動的に再生させないときは、AutoPlay プロパティを明示的に
gle コントロールを使用します。線を描く
「False」に変更します。コードで動画を再生させるときには Play メソッド、一時停止する
ときには Line コントロールを使用します。
ときには Pause メソッドを呼び出します。再生を止めて、最初から再生できるようにリセッ
Polygon コ ン ト ロ ー ル で 多 角 形、Poly
トするには Stop メソッドを呼び出します。音量を変えるには、Volume プロパティに値を
line コントロールでつながった数本の直
設定します。再生している位置を知るには、Position プロパティを使用します。
線、Path コントロールでつながった直線や
MediaElement でサポートしているメディアの形式については、MSDN ライブラリ＊ 4-3 を
曲線を描画できますが、Visual Studio でこ
参照してください。
れらのコントロールを使用するときには、
図 4-35 Ellipse，Rectangle，Lineコントロール
Ellipse
Rectangle
Line
XAML を直接書かなければなりません。
Ellipse コントロールと Rectangle コントロールは、ツールボックスからグラフィカ
ル デザイン ビューにドラッグ アンド ドロップすることによって描画できます。
4-3：MSDN ライブラリ：サポートされるメディア形式、プロトコル、およびログ フィールド
http://msdn.microsoft.com/ja-jp/library/cc189080(VS.95).aspx
68
Line コントロールは、デザイン ビュー上にドロップしても描画されません。Line コント
ロールの場合は、プロパティ ウィンドウで描画する線の始点と終点を指定する必要がありま
69
Chapter 4 Silverlight アプリケーション開発 基本編
4.5 コントロールのカスタマイズ 初級編
す。始点の X 座標は X1 プロパティ、Y 座標は Y1 プロパティに指定します。終点は、X2 プ
ロパティと Y2 プロパティに指定します。
4.5 コントロールのカスタマイズ 初級編
これらのコントロールは、線の太さや色を変えることもできます。線の太さは Stroke
Thickness プロパティ、色は Stroke プロパティで指定します。
Silverlight のグラフィックスはベクター グラフィックスを使用していますので、拡大しても
カスタマイズ初級編
見た目がきれいです。
ここでは、既存のコントロールの外観をカスタマイズする手法を解説します。再利用可能な
Line コントロール、Polygon コントロール、Polyline コントロール、Path コントロー
独自の機能を追加した新しいコントロールの作成については第 6 章で解説します。
ルは、デフォルトの状態ではツールボックス上に表示されていませんので、
使用するときはツー
ル ボ ッ ク ス 中 の コ ン ト ロ ー ル の 上 で 右 ク リ ッ ク し、
［ ア イ テ ム の 選 択 ］を ク リ ッ ク し て、
［Silverlight コンポーネント］タブにあるそれぞれのコントロールの欄にチェックを入れます。
プロパティ
既存のコントロールの外観をカスタマイズする最も基本的な方法は、
プロパティの変更です。
Visual Studio でも Expression Blend でも、サイズや位置はマウスを使って拡大 / 縮小 / 回転 /
枠
移動ができますし、そのほかのプロパティもプロパティ ウィンドウに変更可能なプロパティ
コントロールの周りに枠を付けたいときは、Border コントロールを使用します。Border
が表示されているので、変更したいプロパティに値を入力するだけです。
コントロールは、その中に 1 つだけコントロールを配置できます。Grid などのパネルも
Border コ ン ト ロ ー ル に 配 置 で き ま す の で、 複 数 の コ ン ト ロ ー ル を 使 用 し た い と き は、
リスト 4-14 ●プロパティによるコントロールのカスタマイズ
Border コントロールの中にパネルを貼り付け、そのパネル内にコントロールを配置します。
<Button Content=" ボタン " Name="button1"
Height="23" Width="75" Margin="87,103,0,0"
HorizontalAlignment="Left" VerticalAlignment="Top" />
枠の色は、BorderBrush プロパティで変更でき
ます。枠の太さは、BorderThickness プロパティ
で変更できます。CornerRadius プロパティを変
図 4-36 Border コントロール
更することにより、角を丸めることができます。
図 4-36 は、Border コ ン ト ロ ー ル の 中 に Text
Block コントロールを配置し、BorderThickness
を「10」
、CornerRadius を「10」に変更しています。
スクロール
狭い領域に多くの情報を入れたいときなどに、ScrollViewer コントロールを使用するこ
とでスクロール可能な領域を作成することができます。ScrollViewer コントロールは、そ
の中に 1 つだけコントロールを配置できます。長い文章を表示させるために ScrollViewer
コントロールと TextBlock コントロールを組み合わせるということもできますし、Grid
などのパネルを ScrollViewer コントロールの中に配置し、そのパネル内に複数のコント
ロールを貼り付けるという使い方もできます。
70
リソース
リソースは、Silverlight 要素の表示やアニメーションに必要な要素（ブラシ、スタイル、ア
ニメーション、テンプレートなど）を共有可能なリソースとしてあらかじめ宣言しておく仕組
みで、再利用を目的としたコントロールのカスタマイズには必須の機能です。後述のスタイル
をプロジェクト全体に適用する際も必須の機能です。ボタンの Foreground（文字の色）を
リソースで定義する例を紹介します。リソースとして定義することによって、UserControl
内のすべての要素でこの myBrush を利用できるようになります。
リスト 4-15 ●リソースを使ってボタンの文字の色を定義
<UserControl.Resources>
<SolidColorBrush x:Key="myBrush" Color="Red" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" >
<Button Name="button1" Content=" ボタン "
Height="23" Margin="87,103,0,0"
Width="{Binding ElementName=slider1, Path=Value, Mode=OneWay}"
Foreground="{StaticResource myBrush}"
HorizontalAlignment="Left" VerticalAlignment="Top" />
71