#win8dev_jp

さて、これまでの経緯はこの流れで。今回はちょうど 8回目ということで最終回。

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

これまでのやり方、実装をすべて盛り込み、新しいアプリケーションテンプレートを作成します。これを使えば、自動スケーリング処理を改めて実装する必要はありません。

 

■ 基本のプロジェクトを作る

分割アプリケーションを元に WinApp プロジェクトを作る。テンプレートを作る場合、プロジェクト名がテンプレートのひな形になるのでよく考えて作る。

image

■ MainPage を作って起動画面として設定する

プロジェクトメニューの「新しい項目の追加」から空白のページを作る。名前をMainPage.xaml に設定。

image

App.xaml.cs の OnLaunchded の後半、ItemPage を起動しているところを MainPage に設定する。

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

■ 不要なファイルやフォルダを削除する

不要なファイルやフォルダを削除する。

  • ItemsPage.xaml(ItemsPage.xaml.cs も一緒に削除される)
  • SplitPage.xaml (SplitPage.xaml .cs も一緒に削除される)
  • DataModelフォルダ

F5キーを押して実行する。真っ黒の画面が起動したらOK。

 

■ 自動スケーリング処理追加する

CommonフォルダのLayoutAwarePage.cs を開き、「表示状態の切り替え」を展開する。

image

FitViewboxGrid 関数を追加し、WindowSizeChanged メソッドから呼び出す。

private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
{
    this.InvalidateVisualState();

    FitViewboxGrid(e.Size.Width, e.Size.Height);
}

private async void FitViewboxGrid(double w, double h)
{
    await System.Threading.Tasks.Task.Delay(TimeSpan.FromMilliseconds(1));

 

    if (this.Content.GetType() == typeof(Viewbox))
    {
        Viewbox root = (Viewbox)this.Content;
        UIElement VBContent = ((Viewbox)this.Content).Child;
        if (VBContent.GetType() == typeof(Grid))
        {
            Grid grid = (Grid)VBContent;

 

            if ((w > 0) && (h > 0))
            {
                if (w > h)
                {
                    grid.Width = 1366;
                    grid.Height = 1366 * h / w;
                }
                else if (w <= 320)
                {
                    grid.Width = 640;
                    grid.Height = 640 * h / w;
                }
                else
                {
                    grid.Width = 768;

                    grid.Height = 768 * h / w;
                }
            }
        }
    }
}

■ 自動スケーリング有効化プロパティを追加

この自動スケール処理のためのViewBoxを使うかどうか、ユーザーが設定できるよう AutoScaling のプロパティを追加。

[Windows.Foundation.Metadata.WebHostHidden]
public class LayoutAwarePage : Page
{

    private bool _AutoScaling = true;
    public bool AutoScaling {
        get{return _AutoScaling;}
        set { _AutoScaling = value; }
    }

            :

■ 起動時の処理(自動スケーリングのためのViewBox 自動追加)

そして、LayoutAwarePage のコンストラクタのなかの Loaded イベントの定義(ラムダ式��の最後からも、自動スケール処理を呼び出す。 と同時に ViewBox を自動的に入れる処理を追加(ただし、これを行うのは AutoScaling を ユーザーが True にしたときだけ)

public LayoutAwarePage()
{
    if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) return;

    this.Loaded += (sender, e) =>
    {
        this.StartLayoutUpdates(sender, e);

        //オートスケーリング処理が有効な場合は、UIの最上位にViewBoxを入れる
        UIElement root = this.Content;
        if(AutoScaling && (root.GetType() != typeof(Viewbox)))
        {
            this.Content = new Viewbox();
            (this.Content as Viewbox).Child = root;
        }


        //この時点ではなぜか Width と Height が逆になっている
        FitViewboxGrid(this.ActualWidth, this.ActualHeight);

    };

以上で、ベースとなるプロジェクトは完成。

■ 自動スケーリング処理を有効にするには

MainPage を見てみると、AutoScaling プロパティが追加されている。デフォルトではチェックが入っているが、チェックを外せば、自動スケール処理は行われない。

image

尚、新しいページを追加したときにも、AutoScaling プロパティの設定が可能で、且つ ViewBox の追加処理は不要。

 

■ テストしてみる

試しに、MainPageに四角を追��してみた。右下に 500x500の白い四角。作業はこれだけ。

<Rectangle Fill="White" HorizontalAlignment="Right" Height="500" 
           Grid.Row="1"  VerticalAlignment="Bottom" Width="500"/>

 

実行してみる。左から 1366x768、1920x1080 (100%)

image image 

そして、1920x1080(140%) 、1024x768

imageimage

さらに縦:1366x768、1920x1080 (100%) 1920x1080(140%) 、1024x768

imageimageimageimage

スナップもこの通り。1366x768、1920x1080 (100%)

imageimage

 

ばっちりです。画面作成はあまり気にしなくてすみそうです。

■ テンプレート化する

では、後はこれをテンプレートとして追加しましょう。(テスト用の四角は削除しておきましょう。)

「ファイル」メニューから「テンプレートのエクスポート」をします。そしてプロジェクトのテンプレートの選択を確認して次へ。

image

テンプレートの説明文を入れて、もしあれば画面のスクリーンショットやアイコンを追加して保存します。

image

で、テンプレートの完成。新しいアプリケーションを作成仕様とすると、きちんとテンプレートができていることがわかります。

image

ただし、実際にはこのままテンプレートとして使うには、不十分。GUIDが同じだったりするのでいろいろ処理をしないといけません。

今回は割愛。

■ テンプレートの使い方

テンプレートをダウンロードできるようにしました。

ダウンロードしたら、ドキュメントライブラリのVisual Studio 2012 以下の Template フォルダ下の ProjectTemplates の下においてください(C#の中でもOK)

後はプロジェクトの作成で、言語のところで Windows ストア ではなく、その1つ上の、Visual C# を選べば、真ん中のペインの中から、WinApp テンプレートを選択できるはずです。