[Windowsストアアプリ開発]スナップ表示した際にレイアウトを変更する

Windowsストアアプリ開発

#Windowsストアアプリ

#RIA

#Windows

T君

2012.11.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

目次に移動

Windows 8 にはスナップ機能という2つのアプリを1画面に表示する機能があります。
スナップ表示した際にレイアウトを変更する方法を調べました。

準備

まずはプロジェクトを作成します。Visual C#で「新しいアプリケーション」を選択しました。

プロジェクトが作成されたら、ソリューションエクスプローラーでMainPage.xamlというファイルを右クリックで削除します。
MainPage.xamlというのは起動時に開かれる画面です。

次にプロジェクトを右クリックして新しい画面を追加します。

「新しい項目の追加」という画面になるので、「基本ページ」を選択して追加ボタンをクリックします。名前は先ほど削除したファイルと同じ名前(MainPage.xaml)に修正します。
※起動時に最初に表示するページはApp.xaml.cs内で定義されています。そこを修正する場合は別の名前でも問題ありません。

不足しているファイルを自動的に追加するか聞かれるので「はい」を選択します。

Commonフォルダの中にいくつかファイルが出力されていると思います。

ファイルを作り直した理由は元々のMainPage.xamlのスーパークラスはPageクラスになっており、Pageクラスには表示状態の切替処理が実装されていないからです。「新しい項目の追加」の画面で作成した「基本ページ」はスーパークラスがLayoutPageAwareクラスになっています。

デバイスウインドウを開いて見てみましょう。表示状態という項目にFullScreenLandscape、Filled、Snapped、FullScreenPortlaitという4つの状態あり、ビューを変更すると表示状態も紐づいた状態に切り替わります。
この4つの表示状態は「基本ページ」でxamlファイルを作成すると自動的に定義されています。

4つの表示状態はそれぞれ以下のような場合の状態で、ビューの項目と紐づいています。

FullScreenLandscape ：横位置の場合
Filled：他のアプリまたはデスクトップをスナップで表示している場合
Snapped：スナップの場合
FullScreenPortlait：縦位置の場合

FullScreenLandScape

ビューの右から2番目のアイコンをクリックするとスナップされている状態になりますが、表示状態もSnappedに切り替わりレイアウトが変更されるのが分かると思います。

Snapped

実装する

準備ができたのでサンプルを実装していきましょう。スナップ状態の場合のみTextBlockの文字列をSnappedに変更するサンプルです。
まずはビューを横位置(Landscape)に戻して、ツールボックスからTextBlockを追加します。
追加後にプロパティウインドウからTextBlockに表示するの文字列をFullScreenLandscapeに変更します。