WinRT/XAML のお勉強 ―― 4つの表示状態

Windows ストアアプリには4つの状態（VisualState）がある

• FullScreenLandscape：全画面表示（横）
• FullScreenPortrait：全画面表示（縦）
• Snapped：端に寄せる（幅300px）
• Filled：ほかのアプリを Snap した残りの領域に表示

これを一つのデザインで対応しようとするととても難しい、という話が前回（WinRT/XAML のお勉強 ―― さまざまな利用シーンに対応する - だるろぐ）だった。あれからいろいろ試したんだけれど、ひとつのデザインですべてをカバーしようとするより、4つの VisualState にそれぞれ個別にデザインを作って割り当てたほうがよさそうだ*1。

じゃぁ、VisualState によってビューを切り替えるのってどうすればいいんだ？　ってのが今日の主題。

<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!– Back button and page title –>
<Grid>
（ヘッダー。内容省略）
</Grid>
<Grid x:Name="FullScreenLandscapeGrid" 
          Grid.Row="1" Background="Blue" />
<Grid x:Name="FullScreenPortraitGrid"
          Grid.Row="1" Background="Yellow" Visibility="Collapsed" />
<Grid x:Name="SnappedGrid"
          Grid.Row="1" Background="Green" Visibility="Collapsed" />
<Grid x:Name="FilledGrid"
          Grid.Row="1" Background="Red" Visibility="Collapsed" />

こうやって VisualState に対応する Grid を用意する（名前でわかるよね！）。わかりやすくセンスの悪い背景色をそれぞれ割り当てておいた。Grid.Row=“1” なのはヘッダー（Grid.Row[0]）の下に表示するためやね。

で、初期状態の FullScreenLandscape 以外は非表示（Visibility=“Collapsed”）にしておく。あとは、最後のほうにある <VisualStateManager.VisualStateGroups> のところで、表示非表示を切り替えるだけ。

<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape">
（初期表示なので別に何もしないでいい感じ）
</VisualState>

<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
// 全画面（横向きになったら……）
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
（関係のないところ省略）

// FullScreenLandscapeGrid を非表示に
<ObjectAnimationUsingKeyFrames
                    Storyboard.TargetName="FullScreenLandscapeGrid"
                    Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame
                        KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>

// FullScreenPortraitGrid を表示に
<ObjectAnimationUsingKeyFrames
                    Storyboard.TargetName="FullScreenPortraitGrid"
                    Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame
                        KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

// Filled になったら……
<VisualState x:Name="Filled">
:
: （以下略）

結果はこんな感じ。