libro
www.tuyano.com
初心者のためのWindows Phoneプログラミング入門

基本コントロールによるGUI作成 (1/5)

作成:2011-09-05 08:45
更新:2011-09-05 08:45

■Windowsフォームデザイナの基本

Windows Phoneでは、画面表示はxamlファイルとして作成されます。Visual Studioでこれを開くと、ページのレイアウトを作成するための専用エディタが開きます。これは、Visual Studioユーザならおなじみの「Windowsフォームデザイナ(Windows Form Desinger)」というものです。

このWindowsフォームデザイナは、いわゆる「2 way方式」になっています。拓くと中央の仕切りの両側に、ビジュアルなレイアウトを作成するデザインエディタと、ソースコードを直接編集するXAMLエディタが現れます。このどちらを使って編集してもかまいません。内部的には1つのソースコードファイルですから、片方を編集すれば、すぐさまもう片方の表示も更新されます。

この2つの編集画面は、中央のバーを左右にスライドすることで幅を調整できます。またバーの下部にあるアイコンをクリックすることで、左右ではなく上下に分割したり、片方のエディタだけを表示するようにすることもできます。片方だけを表示した場合、バージョの初にあるタブをクリックすることで表示を切り替えることができます。

この編集画面の他に、画面表示の作成編集に必要となるものがいくつかあります。以下に整理しておきましょう。

ツールボックス(Toolbox)
ウインドウの左端にある「ツールボックス」をクリックするとポップアップして現れます。パネルの右上にあるプッシュピンのアイコンをクリックすれば、ポップアップ表示ではなく1つのパネルとしてウインドウ内に組み込まれます。

このツールボックスは、利用可能なGUIコントロールをまとめたものです。ここから使いたいものを選んでデザインエディタにドラッグ&ドロップすれば部品を配置できます。

ドキュメントアウトライン(Document Outline)
配置したコントロール類を構造的に階層表示するものです。ページでは、いくつものコントロール類が内部に組み込まれる形で作成されるため、下にあるコントロールなどを選択しようとしてもうまく選べないことがあります。こうしたとき、ドキュメントアウトラインからコントロールをクリックすれば、自動的にデザインエディタでその項目が選択されます。

プロパティ(Properties)
プロパティ(コントロールに用意されている設定)を編集するためのものです。ツールボックスから配置したコントロール類は、デフォルトのままですべて使えるか?というとそういうわけでもありません。位置や大きさを調整したり、表示フォントやスタイルなどを設定して使いやすく見やすい形に調整をしていくことになります。

プロパティのウインドウは、左右にエリアが分かれており、左側に項目名、右側に値が表示されます。コントロールを選択し、プロパティのウインドウから編集するプロパティ項目の値をクリックして書き換えることで、設定を変えることができます。値によっては、編集エリアの表示はいろいろと変わります。真偽値のプロパティはチェックボックスで設定するようになり、いくつかの値がある場合はメニューやウインドウをポップアップするボタンが表示されたります。

プロパティのウインドウには「プロパティ(Properties)」と「イベント(Events)」という2つのタブが用意されています。通常、コントロールの値を編集するときは「プロパティ」を選択しておきます。「イベント」は、イベント設定を行う際に使います(これについては後述)。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。


※関連コンテンツ

「初心者のためのWindows Phoneプログラミング入門」に戻る