バックグラウンドで音楽を再生する（後編）
ソリューションエクスプローラー内のWebBrowser.xamを展開して表示される、WebBrowser.xaml.vbをダブルクリックして、リスト3のコードを記述します。
ロジックコードを記述する
リスト3 (WebBrowser.xaml.vb)
Option Strict On Partial Public Class WebBrowser Inherits PhoneApplicationPage ～コード略～
[実行]ボタンがクリックされた時の処理
WebBrowser1.NavigateメソッドでuritextBoxに入力されたURIに遷移します。絶対URIで指定します。
Private Sub uriGoButton_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles uriGoButton.Click
WebBrowser1.Navigate(New Uri(uritextBox.Text, UriKind.Absolute))
End Sub
End Class
VS2010メニューから「デバッグ(D)／デバッグ開始(S)」と選択して実行してみましょう。各ボタンをクリックするごとに曲目が変わって再生され、画像も変われば成功です（図3）。
|
|
| 図3：ボタンをクリックするごとに画像と曲目が変化する（クリックで拡大） |
図1と比べるとボタンのUIが異なっています。次にButtonのUIを変えて、ボタンをクリックするとボタンがへこむ処理を追加しましょう。ソリューションエクスプローラーからMainPage.xamlを選択し、マウスの右クリックで表示されるメニューから「Expression Blendを開く(X)」を選択し、Expression Blend 4（日本語版）を起動します。
Expression Blend 4が起動したら、アートボード内のエミュレーターのデザイン画面内に、ツールボックスからGridコントロールを適当な空いた場所に配置します。配置したGridコントロール内にツールボックスから「四角形」を配置します。配置した「四角形」を選択しマウスの右クリックで表示されるメニューから、「コントロールの作成」を選択します（図4）。
|
|
| 図4：Grid内に配置した「四角形」を選択し「コントロールの作成」メニューを選択する（クリックで拡大） |
表示される「コントロールの作成」画面から「コントロールの種類」にButtonを選択します。「名前(キー)」はそのままで、「すべてに適用」にチェックを付けます。「定義先」の「アプリケーション」にチェックを付け[OK]ボタンをクリックします（図5）。
|
|
| 図5：「コントロールの種類」にButtonを選択、「すべてに適用」、「アプリケーション」にチェックを付ける（クリックで拡大） |
Buttonと書かれた四角形のボタンが表示されます。このボタンを選択し、プロパティウィンドウから[外観]パネル内のStrokeThicknessに5を指定して枠線を太くします。[ブラシ]パネル内のFillに青系統色を指定し、Strokeに赤系統色を指定します（図6）。
|
|
| 図6：StrokeThicknessに5を指定し、[ブラシ]パネル内のFillに青系統色を指定し、Strokeに赤系統色を指定する |
アートボードの上方にある[Button]タブをクリックします。すると全てのButtonコントロールが、今デザインした「四角形」に変わっています。Gridの中に配置した「四角形」はGridごと削除してください（図7）。
|
|
| 図7：全てのButtonコントロールが今デザインした「四角形」に変わっている（クリックで拡大） |
このままでもいいのですが、Buttonをクリックした際に、クリックしたというActionがありません。そこで、ストーリーボードを作成してButtonをクリックした時のActionを持たせます。
