眠るシーラカンスと水底のプログラマー

　Windows8のメトロスタイルアプリケーションは基本一画面に一つのアプリが全画面表示されて起動します。

　ただし解像度が一定以上（1366×768）あればsnap app(昔はside by sideって言ってたよね)という機能が利用でき、画面を分割して表示できます。

楽天レシピとIEを表示しているところ

　デスクトップも表示できます。

　楽天レシピなどsnap appに対応しているアプリケーションはsnap app機能を利用した状態にするとそれに合わせたレイアウトになります。

　その仕組みはどうなっているんでしょうか？

通常の表示グリッドビューで表示されています。snap appだと・・・

リストビュー表示になる

　Windows8のアプリを作成する際のデフォルトテンプレートでもsnap appに対応したものがあります。

　分割アプリケーションなどがそうです。

分割アプリケーションは最初からsnapp app対応している

　ItemsPage.xamlの以下の部分がsnap app対応部分です。

                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

　VisualStateManagerで状態がSnappedの場合にListViewを内包したScrollViewerを表示して、もともとのGridViewを内包したScrollViewerを非表示（Collapsed）にしています。

　仕組みは非常に簡単ですね。

　（デザインする手間とかは発生するので、やろうとすると簡単ではないでしょうが）

　前述のセマンティックズームも合わせてWindows8のメトロスタイルアプリを作ろうと思うと、いろいろ見せ方に工夫ができそうですね。

Tweet