Windows 8 で解像度に対応すること最終回【テンプレート化する】

Article
04/22/2013

#win8dev_jp

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

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

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

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

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

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

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 を開き、「表示状態の切り替え」を展開する。

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 プロパティが追加されている。デフォルトではチェックが入っているが、チェックを外せば、自動スケール処理は行われない。