スプラッシュスクリーンの作り方

Silverlightアプリ起動時にくるくる回ってロード状況をお知らせしてくれる、あの画面をスプラッシュスクリーンと呼ぶらしいのですが、その作り方。
オフィシャルな説明はこちらに載っていますが、実際に真似してやろうとして少しハマったので、覚え書きってことで。

以下、やらなければいけないことを順を追って説明していきます。
全てコンテナ用のWebプロジェクトに対する作業となりますので、Silverlightプロジェクト側に手を入れる必要はありません。

1. スプラッシュスクリーンの作成

• コンテナ用のWebプロジェクトに新しい項目として「Silverlight 1.0 JScript ページ」を追加します。これにより、「xxxxx.xaml」と「xxxxx.js」の2ファイルがプロジェクトに追加されます。(xxxxxはお好きな名前でどうぞ)
• 「xxxxx.xaml」を以下の要領で編集します。(既定のコードは全削除)
  XHTML

  <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="parentCanvas"> <!-- ここに表示したいXAMLコードを記述します (ただし、Silverlight 1.0 ベース) --> <!-- ルート要素のCanvasは変更できませんが、ここには Grid なども書けます --> <!-- Blendを使いたい場合は、いったん別のXAMLを作って、そこからコピペしてください --> <!-- 以下はサンプル --> <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center"> <Border Width="100" Height="20" Background="White" BorderBrush="#FFFFB023" BorderThickness="2" CornerRadius="2"> <Grid> <Rectangle x:Name="rectProgress" HorizontalAlignment="Left"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White"/> <GradientStop Color="#FFFFB023" Offset="0.5"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock x:Name="tbProgress" Text="" Foreground="#FF304269" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Border> </Grid> </Canvas>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

  <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="parentCanvas">   <!-- ここに表示したいXAMLコードを記述します (ただし、Silverlight 1.0 ベース) --> <!-- ルート要素のCanvasは変更できませんが、ここには Grid なども書けます --> <!-- Blendを使いたい場合は、いったん別のXAMLを作って、そこからコピペしてください --> <!-- 以下はサンプル --> <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center"> <Border Width="100" Height="20" Background="White" BorderBrush="#FFFFB023" BorderThickness="2" CornerRadius="2"> <Grid> <Rectangle x:Name="rectProgress" HorizontalAlignment="Left"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White"/> <GradientStop Color="#FFFFB023" Offset="0.5"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock x:Name="tbProgress" Text="" Foreground="#FF304269" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Border> </Grid>   </Canvas>

• 「xxxxx.js」を以下の要領で編集します。(既定のコードは全削除)
  JavaScript

  var isFirstCall = true; function onSourceDownloadProgressChanged(sender, eventArgs) { //レイアウト設定(初回のみ) //ページ中央にコントロールが配置されるように調整しています if (isFirstCall) { isFirstCall = false; var winW = 100, winH = 100; if (parseInt(navigator.appVersion) > 3) { if (navigator.appName == "Netscape") { winW = window.innerWidth; winH = window.innerHeight; } if (navigator.appName.indexOf("Microsoft") != -1) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } } var parentCanvas = sender.getHost().content.findName("parentCanvas"); parentCanvas.Width = winW; parentCanvas.Height = winH; var layoutRoot = sender.getHost().content.findName("LayoutRoot"); layoutRoot.Width = winW; layoutRoot.Height = winH; } //プログレスバー制御 sender.getHost().content.findName("tbProgress").Text = Math.round(eventArgs.progress * 100) + "%"; sender.getHost().content.findName("rectProgress").Width = 100 * eventArgs.progress; }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

  var isFirstCall = true;   function onSourceDownloadProgressChanged(sender, eventArgs) {   //レイアウト設定(初回のみ) //ページ中央にコントロールが配置されるように調整しています if (isFirstCall) { isFirstCall = false; var winW = 100, winH = 100;   if (parseInt(navigator.appVersion) > 3) { if (navigator.appName == "Netscape") { winW = window.innerWidth; winH = window.innerHeight; } if (navigator.appName.indexOf("Microsoft") != -1) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } }   var parentCanvas = sender.getHost().content.findName("parentCanvas"); parentCanvas.Width = winW; parentCanvas.Height = winH;   var layoutRoot = sender.getHost().content.findName("LayoutRoot"); layoutRoot.Width = winW; layoutRoot.Height = winH; }   //プログレスバー制御 sender.getHost().content.findName("tbProgress").Text = Math.round(eventArgs.progress * 100) + "%"; sender.getHost().content.findName("rectProgress").Width = 100 * eventArgs.progress;   }

• ここまでやってビルドするとエラーが出ますので、不足している参照設定をWebプロジェクトに追加します。前述のXAMLの内容によりますが、基本的には「PresentationCore」、「PresentationFramework」、「WindowsBase」の3点を追加すればいけると思います。

2. コンテナHTMLの編集

• 上記で作成したスプラッシュスクリーンが表示されるようにするために、コンテナとなるHTMLファイルに以下の記述を追加します。
  
  <!-- HEADブロックに追加 --> <script type="text/javascript" src="xxxxx.js"></script>

  1 2	<!-- HEADブロックに追加 --> <script type="text/javascript" src="xxxxx.js"></script>

  <!-- Silverlightアプリのパラメータ記述部に追加 --> <param name="splashscreensource" value="xxxxx.xaml"/> <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

  1 2 3

  <!-- Silverlightアプリのパラメータ記述部に追加 --> <param name="splashscreensource" value="xxxxx.xaml"/> <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

xxxxx.js 内のCanvasレイアウトのくだりは海外サイトからのパクリですｗ
静的サイズのアプリならば不要なのですが、Silverlightでサイズ固定のアプリというのは如何なものかと思いますので、動的なポジション/サイズ調整は必須と思うのですが、いかんせんコードビハインドの代わりにjavascriptで記述しなければいけないので、まどろっこしいことになっています。

あとは、あくまでSilverlight 1.0ベースということなので、普通にBlendで書いたXAMLを貼るとエラーが多発する可能性があります。
画像利用も極力避けるようにオフィシャル説明では書かれていますので、スプラッシュスクリーンで出来ることはわりと限られてくる印象です。(あまり凝るところではないかも、ですが)

それと、小さいXAPファイルの場合は、スプラッシュ表示が一瞬で終わってしまう(あるいは表示されない)ので、開発時は一時的に大きめの動画ファイルなどをSilverlightプロジェクトに混ぜておくと、じっくり確認できて具合がよろしいようです。

まぁ、そんなわけで、デフォルトの起動画面に見飽きた方はトライしてみてください。
ちなみに、全くもって存在感のない「ロムった～」にも一応装備してみましたが、一瞬で消えちゃいますｗ