[Windows ストア アプリ] 表示状態の切り替え

こんにちは、うりるーです。

今回は表示状態をアプリに設定する方法について書いていきます。
Windows 8 と Windows RT はいままでの Windows とは異なり、タッチ操作に特化した OS となっています。特に Windows ストア アプリでは Surface のようなタブレット端末での操作にも考慮されているようで、横向きに加え縦向き状態にも表示を最適化することができます。また、一定(1366 x 768)以上の解像度があるディスプレイではアプリを横に並べて表示することもできます。

Windows ストア アプリで利用できる表示状態は次の 4つです。

  • 横向き全画面表示
  • 縦向き全画面表示
  • スナップ表示
  • ページ横幅に合わせた表示

表示状態は「ビュー状態」とも表記されています。
この 4つの表示状態は Windows 側で自動的に最適化してくれるものではなく、アプリ側にどのように表示させるかを指定する必要があります。Visual Studio では各状態を「記録していく」という方法で画面ごとの表示を指定することができます。

では表示状態を指定するアプリを開発するために、新しいプロジェクトを作ります。
新しいアプリケーション (XAML) で言語は Visual Basic、名前は App2 とします。


新しいプロジェクトの画面で「OK」をクリックすると App.xaml.vb が表示されます。
いままでと同様、この App.xaml.vb は何も編集せずに閉じます。最初に表示させたいページがあるときは「MainPage」と書かれているところを編集します。


次に「MainPage.xaml」を削除し、もう一度ファイルを作り直します。
MainPage.xaml 右クリックして [ 削除 ] をクリックします。削除する前に確認ダイアログが表示されます。なお、MainPage.xaml に限らず一度削除するとごみ箱で元に戻す操作をしても Visual Studio ではそれを認識しませんので注意が必要です。


では作り直します。App2 を右クリックして [ 追加 ]、[ 新しい項目 ] の順に選択します。


新しい項目の追加ウィンドウが表示されたら「基本ページ」を選んで、名前に「MainPage.xaml」と入力して追加をクリックします。


追加ボタンをクリックすると不足しているファイルを自動的に追加しますか?という確認ダイアログが表示されますので、「はい」をクリックします。


追加の処理が終わると「デザイン ビューを更新するには、プロジェクト をビルドしてください。」と表示されるので、ここでいったんビルドします。(F5キー)



ビルドを停止します。(Shift+F5 キー)停止したら状態を記録するための機能が含まれているウィンドウを表示させるために、メニューバー [ デザイン ] 内にある「デバイス ウィンドウ」をクリックします。


Visual Studio ウィンドウの左側に「デバイス」ウィンドウが表示されます。


次にアプリがどの画面状態と認識しているのかを確認するためにツールボックスから TextBlock を追加します。Text の内容は「横向き全画面表示」とします。


画面を見やすくするためにペインを折りたたみます。


では Visual Studio では各状態を記録していきます。
まず、最初にスナップ表示状態である時の状態を記録しますが、縦向き全画面表示 や ページ横幅に合わせた表示 もこのスナップ表示の設定を参考に設定してください。

デバイス ウィンドウを開き、表示のスナップアイコンを選択し、表示状態を Snapped にします。
次に、「状態記録の有効化」にチェックを入れて状態記録を開始します。
この段階ではこのようになっています。


このときスナップ表示の状態を記録しています。
「状態記録の有効化」のチェックを外さずにスナップ表示のときに変化させたいところを変更します。TextBlock を選択してプロパティの Text の値を「スナップ表示」に変更します。


「示」の文字が切れているので TextBlock 自体を少し左に移動します。


ではスナップ状態で表示させたい画面が完成したので「状態記録の有効化」のチェックを外してビルドします。


ビルドすると、アプリが起動して最初に「横向き全画面表示」が表示されます。


ではスナップしてみます。
スナップすると「横向き全画面表示」の文字が「スナップ表示」に切り替わります。


切り替わったらスナップ状態が正常に記録されたということになります。
状態を記録するというのはなかなか斬新ですが、初めて使う方にとっては把握しづらい仕組みなのではないかと思います。

参考: スナップされたビューとページ横幅に合わせたビューのガイドライン (Windows ストア アプリ) (Windows)

今回で細かい作り方の解説記事は終わりにします。
次回からはプロジェクトの作成から解説していくのではなく、的をしぼった記事にしていくつもりです。

0 件のコメント:

コメントを投稿