Windows Phone 7 ことはじめ(6) - 簡単なブラウザアプリケーションを作成してみよう。(1)

今回からアプリケーションを作るところを実際にやっていきたいと思います。今回作成するのは、簡単なブラウザアプリケーションです。
すでに【Microsoft Visual Studio 2010 Express for Windows Phone】(今後、VSEWPと記載したいと思います。)がインストールされていることを前提で話を進めていきます。まだの方は、私の過去記事を参考にインストールしてください。

アプリケーションの動作仕様を決めよう

今回は、次のような動作仕様で作ってみたいと思います。

  • テキストボックスには、URLを入力する。
  • テキストボックスに入力した後、「GO」ボタンを押すと入力されたURLへブラウジングする。

プロジェクトを作成しよう

まずは、必要なプロジェクトを作りたいと思います。VSEWPを起動した後、[File]->[New Project]をクリックしてください。
WPStudy_Lesson1_001

すると、プロジェクトの作成画面になります。今回は簡単なアプリケーションなので、ウィンドウ左の[Installed Templates]から[Silverlight for Windows Phone]を選択して、その項目から[Windows Phone Application]を選択します。
その次にプロジェクト名を入力します。ウィンドウ下にある[Name]のテキストボックスをクリックし、今回は学習という意味もあるので[WPStudy]と入力しておきましょう。別の名前でも問題ありません。皆さんが分かりやすい名前で入力してください。
また、保存されるフォルダを決めておきたい場合はこのときに決めておきましょう。デフォルトは、
C:\Users\[ユーザー名]\Documents\Visual Studio 2010\Projects
の下に保存されます。
私は今回の場合、「C:\work\MyOriginal」という場所の配下に置くことにしました。
これらの入力が完了したら、[OK]ボタンを押します。
WPStudy_Lesson1_002

[OK]ボタンを押すと、[Windows Phone Developer Tools V1]をインストールしている場合は、すぐにプロジェクトが作成されますが、Windows Phone SDK(以降、WPSDKと表記します)をインストールしている場合は、すぐにプロジェクトが作成されず、次に作成するプロジェクトを利用するWindows Phone のバージョンを訊ねられます。
今回は[Windows Phone 7.1]のままで問題ないと思いますので、このまま[OK]ボタンをクリックしてプロジェクト作成します。
WPStudy_Lesson1_003

プロジェクトが作成されると、以下のような画面になるかと思います。
※クリックすれば、大きい画像が見られます。
WPStudy_Lesson1_004

画面構成を把握しよう

コードウィンドウ

まずは、画面構成を把握しておきたいと思います。中央一番広いウィンドウは「コードウィンドウ」になります。Windows Phoneアプリケーションは必ずSilverlightまたはXNAで作成するので、このウィンドウで画面のデザインとか、コード編集とかを行うことになります。
WPStudy_Lesson1_004_c

ソリューションエクスプローラー

画面右には、ソリューションエクスプローラーと呼ばれる、作成したプロジェクトのファイル一覧を見れるウィンドウがあります。
プロジェクトにフォルダやファイルを追加する場合は、このウィンドウを介して行いますので、覚えておきましょう。
WPStudy_Lesson1_004_d

プロパティウィンドウ

また、画面右下にはプロパティウィンドウがあります。このウィンドウは、選択したコントロールの各プロパティ(設定値)を変更するためのウィンドウです。プロパティ設定は、調整等で頻繁に使います。また、後で説明しますが、イベント管理でも使われますので、この画面の存在は覚えておきましょう。
WPStudy_Lesson1_004_j

※プロパティウィンドウは、デフォルトでは開いていません。[View]->[Other Window]->[Properties Window]で、表示するようにしておくと後々楽です。
WPStudy_Lesson1_004_k

ツールボックスなど

画面左には、少しわかりにくいかもしれませんがツールボックスなどのサブウィンドウが最小化されて配置されています。
WPStudy_Lesson1_004_e

ツールボックス

[Toolbox]タブにマウスカーソルを合わせると、次のような表示になり、Windows Phoneアプリで配置できるコントロール(部品)の一覧が表示されます。
WPStudy_Lesson1_004_f

ドキュメントアウトライン

[Document Outline]タブにマウスカーソルを合わせると、次のような表示になります。このウィンドウは、Silverlightの画面をデザインするときに使われるXAMLというマークアップ言語のアウトラインが表示されます。コントロールをまとめるためのコントロールであるStackPanelGridの前後関係などを確認するのに使用します。
WPStudy_Lesson1_004_g

その他

もう1つ[Data Sources]タブもありますが、今回はデータを保存するなどのこともしないので説明は割愛します。

デザインビューを把握する

では、初期のデザイン画面を見てみましょう。デザイン画面では、2つのブロックにコンテンツが分かれているのが分かると思います。上部は、[TitlePanel]と呼ばれるブロックです。主にアプリケーション名やアプリケーションのガイドになるものを表示するエリアです。下部は[ContentPanel]と呼ばれ、アプリケーションのメイン部分になります。Windows Phoneアプリケーションは、主にこのContentsPanelの中身を入れ替えて動かします。
WPStudy_Lesson1_004_h

プロパティを変更する

まずは、アプリケーションのタイトルを変えてみましょう。TitlePanelのブロックで表示されている、[MY APPLICATION]の部分をクリックしてみてください。するとエリアが小さな■に囲まれるかと思います。この■に囲まれているエリアが[MY APPLICATION]と表示しているコントロールTextBlockの有効範囲となります。
WPStudy_Lesson1_004_i

また、よく見ると画面右下にある[Properties]ウィンドウが、選択したTextBlockコントロールのプロパティに変化して、TextBlockコントロールの主要プロパティであるTextプロパティが有効になっているのが分かるかと思います。
WPStudy_Lesson1_004_j

このTextプロパティ値を「WP STUDY」に変更してみましょう。
すると、デザイン画面のタイトル表示も[MY APPLICATION]から[WP STUDY]に変わったのが分かるかと思います。
WPStudy_Lesson1_005_a

これと同じように、[page name]も[web browser]に変更しておきましょう。
WPStudy_Lesson1_006

次回は、各コントロールを配置していきます。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中