適切なマージンを持った GridView のスタイル定義 (2)

Metro Style App

　※Release Preview での状況は以下の記事を参照してください。
　Release Preview における GridView の問題点 (1) - rebuild

　前回スタイル定義を行う事で適切なマージンを持った GridView が動作するようにしましたが、ポートレート表示においてマージンが適切に設定されない問題が残ってしまいました。
　今回はポートレート表示での問題を解決したいと思います。

　ポートレート表示での問題は、本来ポートレート表示になった時にマージンを変更しなければならないのにもかかわらず、スタイルに直接定義しているために変更が行われないために発生しています。
　解決方法としてはいくつか考えられると思いますが、今回はポートレート表示用のスタイルを定義して切り替える事で対応してみたいと思います。

　ポートレート表示用のスタイルは、先に作成したランドスケープ表示用のスタイルをそのままコピーして名前を変更し、ItemsPresenter のマージンをポートレート表示用の値に変更するだけです。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="GridView">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                <ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                    <ItemsPresenter Margin="96,0,10,56"/>
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

　次にポートレート表示に変わったときにこのスタイルが使われるようにページの VisualState の記述を変更します。
　元々 GridView の Margin を変更するようになっていた箇所を、 Style を変更するように変えます。

<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="Style">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitGridViewStyle}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

　これで、ポートレート表示でも適切なマージンが設定されるようになります。

　実際にアプリを作成する場合は、さらにスナップ表示時の ListView についても同様にスタイル定義を行う必要があります。

　次回、まとめとしてスナップ表示時も含んだスタイル定義を示します。