分割アプリケーションとグリッドアプリケーション

速習 Windowsストアアプリケーション 第2回

ItemsPage.xaml（およびItemsPage.xaml.cs）

　アプリケーション起動時に最初に表示されるページです。「新しいアプリケーション」プロジェクト同様、「App.xaml.cs」で最初に表示するページが指定されています。

App.xaml.csのページ遷移部分

if (!rootFrame.Navigate(typeof(ItemsPage), "AllGroups"))
{
    throw new Exception("Failed to create initial page");
}

　「ItemsPage.xaml」は通常時（スナップではないすべての状態）表示用のGridViewコントロールと、スナップ状態表示用のListViewを持ちます。

グリッド表示

スナップ時はリスト表示

GridViewとListView

　GridView、ListViewともに複数のデータの集合（コレクション）を表示するのに適したコントロールですが、GridViewは画面下までアイテムが表示されると自動で右の段に折り返して表示を調整してくれます。ListViewは横に流れずに縦方向に延長していくコントロールです。

VisualStateManager

　スナップ時に表示がListViewに切り替わりました。この制御は「VisualStateManager」という仕組みを用いています。

ItemsPage.xamlのVisualStateのコード

<VisualStateManager.VisualStateGroups>

    <!--表示状態には、アプリケーションのビューステートが反映されます -->
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>

        <!-- ページ全体では、縦方向に対して、より狭い 100 ピクセルの余白の規則を優先します -->
        <VisualState x:Name="FullScreenPortrait">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>

        <!--
            スナップの場合、「戻る」ボタンとタイトルには異なるスタイルが使用され、他のすべてのビューステートで表示されるグリッドに対して
            一覧の表現が置き換えられます
        -->
        <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="itemListView" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

　「<VisualState x:Name="Snapped">」の部分がスナップ時の状態の定義です。以下のコードでListView（x:Name属性がitemListView）のVisibilityプロパティ（表示・非表示を制御）をVisible（表示）に、GridView（x:Name属性がitemGridView）のVisibilityプロパティ（表示・非表示を制御）をCollapsed（非表示）に指定しています。

ItemsPage.xamlのVisualStateのコード

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>

　「ItemsPage.xaml」では、スナップ状態の時にどのように表示を行うかを定義しました。「スナップ状態になった」というタイミングで表示を変えてあげる必要があります。「スナップ状態になった」というイベントは、コードビハインドの「ItemsPage.xaml.cs」ファイルで取得します。

　「分割アプリケーション」では、前述のページクラスがLayoutAwarePageを継承しています。LayoutAwarePageがスナップ状態への移行にあわせて「VisualState」を変更する処理を行ってくれます。

「分割プロジェクト」のページクラス。LayoutAwarePageを継承している

public sealed partial class ItemsPage : App3.Common.LayoutAwarePage
{

「新しいプロジェクト」のページクラス。Pageを継承している

public sealed partial class MainPage : Page
{

　「VisualState」を変更するにはVisualStateManager.GoToState()メソッドを利用します。

VisualStateManagerの状態を変える

public void InvalidateVisualState()
{
    if (this._layoutAwareControls != null)
    {
        string visualState = DetermineVisualState(ApplicationView.Value);
        foreach (var layoutAwareControl in this._layoutAwareControls)
        {
            VisualStateManager.GoToState(layoutAwareControl, visualState, false);
        }
    }
}