KySSTweetソリューションエクスプローラー内のWebBrowser.xamを展開して表示される、WebBrowser.xaml.vbをダブルクリックして、リスト3のコードを記述します。PhoneApplicationPage~コード略~[実行]ボタンがクリックされた時の処理WebBrowser1.NavigateメソッドでuritextBoxに入力されたURIに遷移します。絶対URIで指定します。ClassVS2010メニューから「デバッグ(D)/デバッグ開始(S)」と選択して実行してみましょう。各ボタンをクリックするごとに曲目が変わって再生され、画像も変われば成功です(図3)。図3:ボタンをクリックするごとに画像と曲目が変化する(クリックで拡大)図1と比べるとボタンのUIが異なっています。次にButtonのUIを変えて、ボタンをクリックするとボタンがへこむ処理を追加しましょう。4(日本語版)を起動します。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を持たせます。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。「コンテナ」の概要を知る2020/2/21設計/手法/テスト技術解説データ中心設計(DOA)に基づいたデータモデリング2020/2/20クラウド技術解説Rancherコードリーディング入門(3/3)2020/2/19開発ツールイベントGitHub、エンタープライズ向けのイベントを国内で開催。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。