第3回 画面は「XAML」で作る(後編)連載:Windowsストア・アプリ開発入門(7/7 ページ)

» 2013年10月11日 14時55分 公開
[山本康彦(http://www.bluewatersoft.jp/),BluewaterSoft]
前のページへ 1|2|3|4|5|6|7       

テストする

 これでメインの画面が完成した(ただし、検索ボックスは第10回で説明予定)。テストしてみよう。

 VS 2013のツールバーに[ローカル コンピューター]と表示されているドロップダウンがある。これを[シミュレーター]に切り替える(次の画像)。これでデバッグ実行すると、シミュレータが立ち上がって、そこで実行される。

シミュレータでデバッグ実行する シミュレータでデバッグ実行する

 シミュレータでは、さまざまなサイズの画面を試せる。いろいろ切り替えて試してみよう(次の画像)。

シミュレータで画面サイズを変えてみる
シミュレータで画面サイズを変えてみる
シミュレータで画面サイズを変えてみる
シミュレータで画面サイズを変えてみる
シミュレータで画面サイズを変えてみる シミュレータで画面サイズを変えてみる
上から、1366×768(初期表示)、1366×768(右端)、1024×768、768×1024(縦置き)、約500×768(横置きでほかのアプリと並列表示)

 構想図で検討したとおりの画面が仕上がった。今回はこれで完成である。

まとめ

 今回は、前編でXAMLの基礎を学び、後編ではこれから作っていくアプリの画面を作成した。

  • XAMLの基礎知識と、コントロールの位置決め方法を学んだ
  • アプリのメインとなる画面のスペックを検討した
  • 「ハブ・アプリ」プロジェクトを作った
  • タイルやスプラッシュ・スクリーンの画像を作り、マニフェストに設定した
  • メイン画面をXAMLで実装した
    その際、テーマ/文字列リソース/スタイル・リソースの使い方も学んだ
  • シミュレータを使っていろいろな画面サイズでの見え方を確認した

 次回は「画面を構成するさまざまなコントロールと画面遷移」。コントロールの種類は今回使った以外にもたくさんあるので、それらを紹介する。また、1つの記事を表示する画面を作り、今回のメイン画面からの画面遷移も実装する予定だ。期待してほしい。

「連載:Windowsストア・アプリ開発入門」のインデックス

連載:Windowsストア・アプリ開発入門

前のページへ 1|2|3|4|5|6|7       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。