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

前回は、簡単なブラウザアプリを作る前段階で話が終わってしまいました。今回はその続きで、ブラウザでWebサイトを開くまで行いたいと思います。

ブラウザに必要なコントロールを配置する

前回は、アプリケーションのタイトルなどを編集しました。今回は、ブラウザのアプリケーションで必要なコントロールを配置していきます。
今回必要なコントロールは次のコントロールです。

  • WebBrowserコントロール
  • TextBoxコントロール
  • Buttonコントロール

それぞれを1個ずつContentPanel内に適当に配置します。適当なので、以下のような感じになるかと思います。
WPStudy_Lesson2_0_001

コントロールに名前を付ける

まずは配置した各コントロールに名前を付けたいと思います。
配置したコントロールのどれでも良いのでクリックしてください。すると、プロパティウィンドウの内容が切り替わりますので、その最上部のコントロール名が表示されている横をクリックしてください(下図赤丸で囲っている箇所)
WPStudy_Lesson2_1_001
クリックすると入力できるようになりますので、各コントロールの名前を変更しましょう。この時、そのコントロールにどういう役目を割り当てるのかを考えながら名前を付けるように習慣づけてください。今後開発していく上で大切なことです。
今回は、以下の感じで名前を付けました。

  • WebBrowserコントロール …… webMain
  • TextBoxコントロール …… txtUri
  • Buttonコントロール …… btnGo

コントロールの配置をキレイに並べる

これをもうすこしキレイに並べたいと思います。
ここでは、デザインビューで修正するのもありかと思いますが、XAMLで修正したいと思います。

MianPage.xamlのデザインビューの反対側は、XAMLコードになっているかと思います。その中に以下のようなコードの箇所があるかと思いますので探してください。
以下のソースではClick=”btnGo_Click”の記述がありますが、今の段階ではないと思いますので無視してください。
WPStudy_Lesson2_0_002

これを次のように書き換えてみてください。
主にMargin属性を削除し、StackPanelを利用して、コントロールの並びを整理しています。
WPStudy_Lesson2_0_003

書き換えると、以下のようにデザインが変わるかと思います。
WPStudy_Lesson2_0_004

これで大体のコントロールの配置は完了しました。

イベントを設定する

次に、イベントを設定します。イベントとは、あるボタンをタップしたらメッセージを表示したり、リストボックスなどをタップしたらそのタップされた箇所にあるアイテムを選択状態にするなど、ある処理を行うときのきっかけを設定するモノです。

今回は、ボタンをクリックしたらブラウジングを行うので、ボタンのClickイベント設定します。初めに配置したbtnGoを選択してください。プロパティウィンドウのEventsタグを選択します。するとボタンコントロールに設定されているイベント一覧が表示されます。
WPStudy_Lesson2_1_002
表示されたイベント一覧からClickイベントを選択し、ダブルクリックしてください。
すると、自動的にClickイベント用のメソッドが生成され、MainPage.xamlには、btnGoに先ほど紹介した「Click=”btnGo_Click”」の記述が追加されていると思います。

WPStudy_Lesson2_0_003

また、同様にMainPage.xaml.csには、イベント用のメソッド「btnGo_Click」が追加されているかと思います。
WPStudy_Lesson2_1_003

作成されたbtnGo_Clickメソッドに以下の2行を追加します。
WPStudy_Lesson2_1_004a

追加すると、以下のようになります。
WPStudy_Lesson2_1_004

これでひとまず完成です。

アプリケーションをビルドする

編集したソースを一旦保存し、[Build]->[Build Solution]を選択するかF6キーを押して、アプリケーションのビルドを行います。ビルドを行わないと、アプリケーションとして使えません。コードを編集したら必ず実行しましょう。
WPStudy_Lesson2_2_001

ビルドがすべて正常に終了し、問題がなければ、画面左下のステータスバーに[Build succeeded]と表示されるはずです。
WPStudy_Lesson2_2_002

エミュレーターを使って、デバッグしてみる

その後に、[Debug]->[Start Debugging]を選択するかF5キーを押して正常に動作するか確認しましょう。すると、エミュレーターが起動して作成したアプリケーションがエミュレーターに転送されます。
アプリケーションの転送が完了すると、以下の画面になります。
WPStudy_Lesson2_2_003

今回はエミュレーターでのテストなので、マウスでエミュレーター内のテキストボックスをクリックします。すると、テキスト入力の画面になります。
WPStudy_Lesson2_2_004

テキストボックスに適当なURLを入力して、そのまま「Go」ボタンをクリックしてください。すると、入力したURLのサイトが表示されるかと思います。
今回の例では、モバイル用のIE Test Driveページの「http://ie.microsoft.com/testdrive/mobile/」を指定して、表示しています。
WPStudy_Lesson2_2_005

表示されれば、成功しています。表示されなかった場合、入力したURLが間違っていないか確認してください。合っていても表示されない場合は、MainPage.xaml.csで追加したコードを確認してください。

ここまで問題なく完了したら、晴れて初めてのアプリケーションが正常に実行されたことになります。
おめでとうございます。

次回は、今回記載したコードに関して簡単に解説したいと思います。

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中