Windows 8 で解像度に対応すること 【Snap対応編】


#win8dev_jp

さて、これまでの経緯はこの流れで。今回は7回目になります。

  1. Windows 8 で解像度に対応すること 【考え方編】
  2. Windows 8 で解像度に対応すること 【横画面実装編】
  3. Windows 8 で解像度に対応すること 【縦画面回避編】
  4. Windows 8 で解像度に対応すること 【縦画面対応編】
  5. Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】
  6. Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】

さて、Windows 8 で対応しなければならない画面サイズに、もう一つ Snap View があります。横320x画面の縦サイズのViewです。

実は、これまでの対応でもうSnapView には対応済みになっています。というのもこのように実装済みなので、SnapView も極度に細長い縦画面として扱われ、縦画面用のViewState が適応されます。

if (w > h)

    :
}
else

    grid.Height = 768 * h / w; 
    grid.Width = 768;
    VisualStateManager.GoToState(this, "FullScreenPortrait", false);
}

ただ、1366x768の画面の場合、1843x768 の画面が構成され、これが ViewBox によって約40%のサイズ(768→320)まで縮小されます。実はけっこうこれでうまくいくケースもあるんですけどね。

SnapView用もきちんと定義したい

極度に縦長画面なので、やはりきちんとレイアウトしなおしたい場合もあるでしょう。そのためには 縦画面と同じ処理をします。

  1. ViewState の定義
  2. 画面サイズに合わせてGrid のリサイズと、ViewState の切り替え

では、まずViewStateの定義から。

SnapView にも定義された ViewState の名前があります。Snapped です。ということでViewState に追加です。画面幅を640にする理由は後述するとして、こうしておけば実際のデザインは楽になります。

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Snapped">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames
                    
Storyboard.TargetProperty="(FrameworkElement.Width)"
                     Storyboard.TargetName="grid">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <x:Double>640</x:Double>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>       

            </Storyboard>

        </VisualState>
        <VisualState x:Name="FullScreenPortrait">

これを定義するだけで、デバイスタブをスナップ(右から2番目のアイコン)にすると自動的に VisualStudioのデザイン画面は Snapped に切り替えてくれます。

image

スナップでの画面設定は、「状態記録の有効化」にチェックを入れ画面を設定し、終わったらチェックを外しましょう。

 

スナップ時の画面幅の数値に注意

あとは、画面サイズの設定とステートの変更処理です。縦画面判定の前に、スナップを先にチェックします。画面の幅が 320 なら w==320 と判定してもいいんじゃない?と思われるかもしれませんが、140%拡大、180%拡大処理の場合、それぞれ 228、 177 といった幅が返ってきます。そのため320以下という判定が必要です。

 

if ((w > 0) && (h > 0))
{
    if (w > h)
    {
        grid.Width = 1366;
        grid.Height = 1366 * h / w;
        VisualStateManager.GoToState(this, "FullScreenLandscape", false);
    }

    else if (w <= 320)
    {
        grid.Height = 640 * h / w;
        grid.Width = 640;
        VisualStateManager.GoToState(this, "Snapped", false);
    }

    else
    {
        grid.Height = 768 * h / w;
        grid.Width = 768;
        VisualStateManager.GoToState(this, "FullScreenPortrait", false);
    }

尚、ちなみに、GridTemplate などの LayoutAwarePage には Snapped へのViewState への切り替え処理が入っているので、必要ありません。

今回は、640幅の画面サイズにしてみました。320x縦サイズ にすると、極端に画面幅が小さくなり、デザインがしづらくなります。ですので縦横倍サイズの画面を作りVIewBoxで50%のサイズで表示してます。

image

うん。めーにあっく!

Comments (0)

Skip to main content