WP TIPS に戻る

ページトランジションの合間にメッセージを表示する

サンプルプロジェクト RootFrameBackGround.zip

PhoneApplicationPage に様々なコントロールやビヘイビア、ストーリーボードなどを追加していくと、だんだん重くなってページを開くまでに時間がかかるようになります。Silverlight Toolkit のページトランジションを使用すると、次のページに遷移する間、真っ黒な(もしくは真っ白な) 画面が表示されます。

次へのページ遷移が遅くなってしまった場合、この動画のようにメッセージを表示してみたらどうでしょうか？

↑

PhoneApplicationFrame クラスについて

WP7 での画面は PhoneApplicationPage クラスですが、これは PhoneApplicationFrame クラスの上に乗っかったコントロールとして動作していて、ページの遷移というのは PhoneApplicationFrame クラス上で PhoneApplicationPage が入れ替わっているだけです。
※ ページの遷移を行う NavigationService.Navigate メソッドなども PhoneApplicationFrame クラスのメンバとして用意されていて、PhoneApplicationFrame で画面の遷移をしている事が分かります。

と言うわけで例えばすべてのPhoneApplicationPage 背景色を統一したい場合などは、PhoneApplicationFrame.Background プロパティに色を設定しておくとすべてのページで統一した色を設定することが出来ます。

↑

PhoneApplicationFrame.Background に画像を表示する

トランジションの合間の真っ黒な(もしくは真っ白な) 画面 == ページが表示されていない、と言うことは PhoneApplicationFrame が表示されているわけです。
ですので上記の動画のようにするには、PhoneApplicationFrame.Background に「ロード中画像」を設定し、PhoneApplicationPage.Background を設定すれば OK です。

  1. PhoneApplicationFrame.Backgroud の設定
    まず App.xaml.cs 内で PhoneApplicationFrame(RootFrame) のインスタンスかが行われているので、ここに以下のようにコードを追加します。
    このコードは、ページが遷移する直前に PhoneApplicationFrame 背景画像を表示するようにし、ページ遷移が終了したら透明色に変更して背景画像を消しています。
    また戻る場合のページ遷移は高速に行われるので、この場合は背景画像を設定していません(ちらつき防止)。

    // フレームを作成しますが、まだ RootVisual に設定しないでください。これによって、アプリケーションがレンダリングできる状態になるまで、
// スプラッシュ スクリーンをアクティブなままにすることができます。
//RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

RootFrame.Navigating += (s, args) =>
{
   if (args.NavigationMode != NavigationMode.Back)
   {
       RootFrame.Background = 
           new ImageBrush
           {
               ImageSource = new BitmapImage { UriSource = new Uri("frameinterval.jpg", UriKind.Relative) } 
           };
   }
};
RootFrame.Navigated += (s, args) =>
{
   if (args.NavigationMode != NavigationMode.Back)
   {
       RootFrame.Background = new SolidColorBrush(Colors.Transparent);
   }
};

// ナビゲーション エラーを処理します
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

  2. PhoneApplicationPage.Backgroud の設定
    次に PhoneApplicationPage.Background に Transparent 以外の色を設定しておいて下さい。
    というのも PhoneApplicationPage.Background はデフォルト が Transparent になっているため、以下の画像のように PhoneApplicationPage の背景にある PhoneApplicationFrame が透けてしまいます。
    透け防止のために PhoneApplicationPage.Backgroud に PhoneBackGroundBrush を設定しておけば良いかと思います。

    rootframebackground-01.jpg