スプラッシュ スクリーンの表示時間の延長Display a splash screen for more time

重要な APIImportant APIs

アプリに追加スプラッシュ画面を作成すれば、より長い時間、スプラッシュ画面を表示することができます。Display a splash screen for more time by creating an extended splash screen for your app. この追加画面は、アプリを起動したときに表示されるスプラッシュ画面に似ていますが、カスタマイズできます。This extended screen imitates the splash screen shown when your app is launched, but can be customized. 読み込み状況をリアルタイムにユーザーに表示する場合や、アプリの最初の UI の準備に時間がかかる場合、追加スプラッシュ画面を使って起動時のエクスペリエンスを定義できます。Whether you want to show real-time loading information or simply give your app extra time to prepare its initial UI, an extended splash screen lets you define the launch experience.

注意

このトピックの「拡張されたスプラッシュスクリーン」という語句は、長時間にわたって画面に表示されるスプラッシュスクリーンを指します。The phrase "extended splash screen" in this topic refers to a splash screen that stays on the screen for an extended period of time. SplashScreen クラスを拡張するサブクラスやこのクラスから派生したサブクラスという意味ではありません。It does not mean a subclass that derives from the SplashScreen class.

追加スプラッシュ画面の外観は、次の推奨事項に従って、既定のスプラッシュ画面に厳密に似せるようにしてください。Make sure your extended splash screen accurately imitates the default splash screen by following these recommendations:

  • この追加スプラッシュ画面ページでは、アプリ マニフェスト内でスプラッシュ画面に指定したイメージ (アプリのスプラッシュ画面のイメージ) と一致する 620 x 300 ピクセルのイメージを使います。Your extended splash screen page should use a 620 x 300 pixel image that is consistent with the image specified for your splash screen in your app manifest (your app's splash screen image). Microsoft Visual Studio 2015 では、スプラッシュ画面の設定はアプリ マニフェストの [ビジュアル資産] タブの [スプラッシュ画面] セクション (Package.appxmanifest ファイル) に保存されています。In Microsoft Visual Studio 2015, splash screen settings are stored in the Splash Screen section of the Visual Assets tab in your app manifest (Package.appxmanifest file).
  • 追加スプラッシュ画面では、アプリ マニフェスト内でスプラッシュ画面に指定した背景色 (アプリのスプラッシュ画面の背景) と一致する背景色を使います。Your extended splash screen should use a background color that is consistent with the background color specified for your splash screen in your app manifest (your app's splash screen background).
  • コードでは、SplashScreen クラスを使って、アプリのスプラッシュ画面画像の座標が、既定のスプラッシュ画面と同じになるようにします。Your code should use the SplashScreen class to position your app's splash screen image at the same screen coordinates as the default splash screen.
  • コードでは、SplashScreen クラスを使って追加スプラッシュ画面上の項目を配置し直すことで、ウィンドウ サイズ変更イベント (画面が回転されたり、画面上で次の別のアプリに移動したりするなど) に応答するようにする必要があります。Your code should respond to window resize events (such as when the screen is rotated or your app is moved next to another app onscreen) by using the SplashScreen class to reposition items on your extended splash screen.

次の手順を使うと、既定のスプラッシュ画面とよく似た追加スプラッシュ画面を作成できます。Use the following steps to create an extended splash screen that effectively imitates the default splash screen.

[空白のページ] 項目を既にあるアプリに追加するAdd a Blank Page item to your existing app

また、このトピックでは、C#、Visual Basic、C++ を使って、既にあるユニバーサル Windows プラットフォーム (UWP) アプリ プロジェクト用の追加スプラッシュ画面を作成することを想定しています。This topic assumes you want to add an extended splash screen to an existing Universal Windows Platform (UWP) app project using C#, Visual Basic, or C++.

  • Visual Studio でアプリを開きます。Open your app in Visual Studio.
  • メニュー バーから [プロジェクト] を開き、[新しい項目の追加] をクリックします。Press or open Project from the menu bar and click Add New Item. [新しい項目の追加] ダイアログ ボックスが表示されます。An Add New Item dialog box will appear.
  • このダイアログ ボックスから新しい空白のページをアプリに追加します。From this dialog box, add a new Blank Page to your app. このトピックでは、追加スプラッシュ画面ページの名前を "ExtendedSplash" とします。This topic names the extended splash screen page "ExtendedSplash".

[空白のページ] 項目を追加すると、2 つのファイルが生成されます。1 つはマークアップ用 (ExtendedSplash.xaml)、もう 1 つはコード用 (ExtendedSplash.xaml.cs) です。Adding a Blank Page item generates two files, one for markup (ExtendedSplash.xaml) and another for code (ExtendedSplash.xaml.cs).

追加スプラッシュ画面の基本的な XAMLEssential XAML for an extended splash screen

次の手順に従って、追加スプラッシュ画面にイメージやプログレス コントロールを追加します。Follow these steps to add an image and progress control to your extended splash screen.

ExtendedSplash.xaml ファイルで次の操作を行います。In your ExtendedSplash.xaml file:

  • 既定の Grid 要素の Background プロパティを変更して、アプリ マニフェスト (Package.appxmanifest ファイルの [ビジュアル資産] セクション) でアプリのスプラッシュ画面に設定した背景色に合わせます。Change the Background property of the default Grid element to match the background color you set for your app's splash screen in your app manifest (in the Visual Assets section of your Package.appxmanifest file). 既定のスプラッシュスクリーンの色は薄い灰色 (16 進値 # 464646) です。The default splash screen color is a light gray (hex value #464646). 新しい空白のページを作成すると、この Grid 要素が既定で使われることに注意してください。Note that this Grid element is provided by default when you create a new Blank Page. 必ずしも Grid を使う必要はありません。追加スプラッシュ画面を作り始めるときに便利なだけです。You don't have to use a Grid; it's just a convenient base for building an extended splash screen.
  • GridCanvas 要素を追加します。Add a Canvas element to the Grid. この Canvas を使って追加スプラッシュ画面にイメージを配置します。You'll use this Canvas to position your extended splash screen image.
  • Image 要素を Canvas に追加します。Add an Image element to the Canvas. 既定のスプラッシュ画面用に選んだ同じ 600 × 320 ピクセルの画像を追加スプラッシュ画面に使います。Use the same 600 x 320 pixel image for your extended splash screen that you chose for the default splash screen.
  • (省略可能) アプリが読み込み中であることをユーザーに示すにはプログレス コントロールを追加します。(Optional) Add a progress control to show users that your app is loading. このトピックでは、確定または不定の ProgressBar ではなく、ProgressRing を追加します。This topic adds a ProgressRing, instead of a determinate or indeterminate ProgressBar.

次の例は、これらの追加と変更を含む グリッド を示しています。The following example demonstrates a Grid with these additions and changes.

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"></ProgressRing>
        </Canvas>
    </Grid>

注意

この例では、進行中の リング の幅を20ピクセルに設定します。This example sets the width of the ProgressRing to 20 pixels. この幅はアプリに合わせて手動で設定できますが、20 ピクセル未満の幅ではコントロールがレンダリングされません。You can manually set its width to a value that works for your app, however, the control will not render at widths of less than 20 pixels.

追加スプラッシュ画面クラスの基本的なコードEssential code for an extended splash screen class

追加スプラッシュ画面はウィンドウのサイズ (Windows のみ) や向きの変更に応答する必要があります。Your extended splash screen needs to respond whenever the window size (Windows only) or orientation changes. ウィンドウのサイズがどのように変更されても追加スプラッシュ画面が適切に表示されるように、使う画像の位置は更新される必要があります。The position of the image you use must be updated so that your extended splash screen looks good no matter how the window changes.

これらの手順を使って、追加スプラッシュ画面を正しく表示するためのメソッドを定義します。Use these steps to define methods to correctly display your extended splash screen.

  1. 必要な名前空間を追加するAdd required namespaces

    SplashScreenクラス、 Rect構造体、および ExtendedSplash.xaml.cs イベントにアクセスするには、次の名前空間をExtendedSplash.xaml.csに追加する必要があります。You'll need to add the following namespaces to ExtendedSplash.xaml.cs to access the SplashScreen class, the Rect struct, and the Window.SizeChanged events.

    using Windows.ApplicationModel.Activation;
    using Windows.Foundation;
    using Windows.UI.Core;
    
  2. 部分クラスを作成し、クラス変数を宣言するCreate a partial class and declare class variables

    次のコードを ExtendedSplash.xaml.cs に挿入して、追加スプラッシュ画面を表す部分クラスを作成します。Include the following code in ExtendedSplash.xaml.cs to create a partial class to represent an extended splash screen.

    partial class ExtendedSplash : Page
    {
        internal Rect splashImageRect; // Rect to store splash screen image coordinates.
        private SplashScreen splash; // Variable to hold the splash screen object.
        internal bool dismissed = false; // Variable to track splash screen dismissal status.
        internal Frame rootFrame;
    
       // Define methods and constructor
    }
    

    これらのクラス変数は、複数のメソッドで使われます。These class variables are used by several methods. splashImageRect は、アプリのスプラッシュ画面のイメージが表示された座標を格納する変数です。The splashImageRect variable stores the coordinates where the system displayed the splash screen image for the app. splashSplashScreen オブジェクトを格納する変数であり、dismissed は表示されたスプラッシュ画面が閉じられたかどうかを追跡する変数です。The splash variable stores a SplashScreen object, and the dismissed variable tracks whether or not the splash screen that is displayed by the system has been dismissed.

  3. 画像を正しく配置するクラスのコンストラクターを定義するDefine a constructor for your class that correctly positions the image

    次のコードでは、ウィンドウ サイズ変更イベントをリッスンする追加スプラッシュ画面クラスのコンストラクターを定義し、追加スプラッシュ画面にイメージ (必要に応じてプログレス コントロール) を配置し、ナビゲーション用のフレームを作成し、保存済みのセッションを復元する非同期メソッドを呼び出しています。The following code defines a constructor for the extended splash screen class that listens for window resizing events, positions the image and (optional) progress control on the extended splash screen, creates a frame for navigation, and calls an asynchronous method to restore a saved session state.

    public ExtendedSplash(SplashScreen splashscreen, bool loadState)
    {
        InitializeComponent();
    
        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This ensures that the extended splash screen formats properly in response to window resizing.
        Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);
    
        splash = splashscreen;
        if (splash != null)
        {
            // Register an event handler to be executed when the splash screen has been dismissed.
            splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);
    
            // Retrieve the window coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
    
            // If applicable, include a method for positioning a progress control.
            PositionRing();
        }
    
        // Create a Frame to act as the navigation context
        rootFrame = new Frame();            
    }
    

    アプリが追加スプラッシュ画面でイメージを正しく配置できるように、クラス コンストラクターに Window.SizeChanged ハンドラー (この例の ExtendedSplash_OnResize) を登録します。Make sure to register your Window.SizeChanged handler (ExtendedSplash_OnResize in the example) in your class constructor so that your app positions the image correctly in your extended splash screen.

  4. 追加スプラッシュ画面にイメージを配置するクラスのメソッドを定義するDefine a class method to position the image in your extended splash screen

    次のコードでは、splashImageRect クラス変数を使って追加スプラッシュ画面ページにイメージを配置する方法を示しています。This code demonstrates how to position the image on the extended splash screen page with the splashImageRect class variable.

    void PositionImage()
    {
        extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
        extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
        extendedSplashImage.Height = splashImageRect.Height;
        extendedSplashImage.Width = splashImageRect.Width;
    }
    
  5. (省略可能) 追加スプラッシュ画面にプログレス コントロールを配置するクラスのメソッドを定義する(Optional) Define a class method to position a progress control in your extended splash screen

    ProgressRing を追加スプラッシュ画面に追加する場合、スプラッシュ画面のイメージに相対的に配置します。If you chose to add a ProgressRing to your extended splash screen, position it relative to the splash screen image. ExtendedSplash.xaml.cs で、ProgressRing をイメージの 32 ピクセル下の中央に配置する次のコードを追加します。Add the following code to ExtendedSplash.xaml.cs to center the ProgressRing 32 pixels below the image.

    void PositionRing()
    {
        splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
        splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
    }
    
  6. クラス内で Dismissed イベントのハンドラーを定義するInside the class, define a handler for the Dismissed event

    ExtendedSplash.xaml.cs で、dismissed クラス変数を true に設定することで、SplashScreen.Dismissed イベントが発生したときに応答するようにします。In ExtendedSplash.xaml.cs, respond when the SplashScreen.Dismissed event occurs by setting the dismissed class variable to true. アプリにセットアップ操作がある場合は、それらの操作をこのイベント ハンドラーに追加します。If your app has setup operations, add them to this event handler.

    // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
    void DismissedEventHandler(SplashScreen sender, object e)
    {
        dismissed = true;
    
        // Complete app setup operations here...
    }
    

    アプリのセットアップが完了したら、追加スプラッシュ画面から移動するようにします。After app setup is complete, navigate away from your extended splash screen. 次のコードでは、アプリの MainPage.xaml ファイルで定義されている MainPage に移動する DismissExtendedSplash というメソッドを定義しています。The following code defines a method called DismissExtendedSplash that navigates to the MainPage defined in your app's MainPage.xaml file.

    async void DismissExtendedSplash()
      {
         await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() =>            {
              rootFrame = new Frame();
              rootFrame.Content = new MainPage(); Window.Current.Content = rootFrame;
            });
      }
    
  7. クラス内で Window.SizeChanged イベントのハンドラーを定義するInside the class, define a handler for Window.SizeChanged events

    ユーザーによってウィンドウのサイズが変更された場合にその要素を配置し直すように、追加スプラッシュ画面を準備します。Prepare your extended splash screen to reposition its elements if a user resizes the window. このコードでは、新しい座標を取得してイメージを配置し直すことで、Window.SizeChanged イベントが発生したときに応答するようにしています。This code responds when a Window.SizeChanged event occurs by capturing the new coordinates and repositioning the image. 追加スプラッシュ画面にプログレス コントロールを追加した場合は、同様に、このイベント ハンドラー内でそのコントロールを配置し直すようにします。If you added a progress control to your extended splash screen, reposition it inside this event handler as well.

    void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
    {
        // Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window.
        if (splash != null)
        {
            // Update the coordinates of the splash screen image.
            splashImageRect = splash.ImageLocation;
            PositionImage();
    
            // If applicable, include a method for positioning a progress control.
            // PositionRing();
        }
    }
    

    注意

     イメージの場所を取得する前に、 splash 次の例に示すように、クラス変数 () に有効な SplashScreen オブジェクトが含まれていることを確認してください。 Before you try to get the image location make sure the class variable (splash) contains a valid SplashScreen object, as shown in the example.

     

  8. (省略可能) クラス メソッドを追加して保存済みのセッション状態を復元する(Optional) Add a class method to restore a saved session state

    手順 4「起動アクティブ化ハンドラーの変更」で OnLaunched メソッドに追加したコードにより、アプリでは起動時に追加スプラッシュ画面が表示されます。The code you added to the OnLaunched method in Step 4: Modify the launch activation handler causes your app to display an extended splash screen when it launches. 拡張されたスプラッシュスクリーンクラスでアプリの起動に関連するすべてのメソッドを統合するには、ExtendedSplash.xaml.cs ファイルにメソッドを追加してアプリの状態を復元することを検討してください。To consolidate all methods related to app launch in your extended splash screen class, you could consider adding a method to your ExtendedSplash.xaml.cs file to restore the app's state.

    void RestoreState(bool loadState)
    {
        if (loadState)
        {
             // code to load your app's state here
        }
    }
    

    App.xaml.cs ファイルで起動アクティブ化ハンドラーを変更するときは、アプリの以前の ApplicationExecutionStateTerminated だった場合にも loadstate を true に設定します。When you modify the launch activation handler in App.xaml.cs, you'll also set loadstate to true if the previous ApplicationExecutionState of your app was Terminated. その場合、RestoreState メソッドは、アプリを前の状態に復元します。If so, the RestoreState method restores the app to its previous state. アプリの起動、中断、終了の概要については、「アプリのライフサイクル」をご覧ください。For an overview of app launch, suspension, and termination, see App lifecycle.

起動アクティブ化ハンドラーの変更Modify the launch activation handler

アプリが起動されるとき、スプラッシュ画面の情報がアプリの起動アクティブ化イベント ハンドラーに渡されます。When your app is launched, the system passes splash screen information to the app's launch activation event handler. この情報を使って、追加スプラッシュ画面ページにイメージを適切に配置できます。You can use this information to correctly position the image on your extended splash screen page. このスプラッシュ画面の情報は、アプリの OnLaunched ハンドラーに渡されるアクティブ化イベント引数から取得できます (次のコードの args 変数を参照)。You can get this splash screen information from the activation event arguments that are passed to your app's OnLaunched handler (see the args variable in the following code).

アプリの OnLaunched ハンドラーをまだオーバーライドしていない場合、アクティブ化イベントを処理する方法については、「アプリのライフサイクル」をご覧ください。If you have not already overridden the OnLaunched handler for your app, see App lifecycle to learn how to handle activation events.

App.xaml.cs ファイルで、追加スプラッシュ画面を作成して表示する次のコードを挿入します。In App.xaml.cs, add the following code to create and display an extended splash screen.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }

    Window.Current.Activate();
}

完成したコードComplete code

次のコードは、前の手順で示したスニペットと若干異なります。The following code slightly differs from the snippets shown in the previous steps.

  • ExtendedSplash.xaml には DismissSplash ボタンが含まれています。ExtendedSplash.xaml includes a DismissSplash button. このボタンがクリックされると、イベント ハンドラーである DismissSplashButton_ClickDismissExtendedSplash メソッドを呼び出します。When this button is clicked, an event handler, DismissSplashButton_Click, calls the DismissExtendedSplash method. アプリで、リソースの読み込みまたは UI の初期化の完了時に DismissExtendedSplash を呼び出します。In your app, call DismissExtendedSplash when your app is done loading resources or initializing its UI.
  • このアプリは、Frame ナビゲーションを使う、UWP アプリのプロジェクト テンプレートも使います。This app also uses a UWP app project template, which uses Frame navigation. その結果、App.xaml.cs ファイルで、起動アクティブ化ハンドラー (OnLaunched) は rootFrame を定義し、それを使ってアプリのウィンドウのコンテンツを設定します。As a result, in App.xaml.cs, the launch activation handler (OnLaunched) defines a rootFrame and uses it to set the content of the app window.

ExtendedSplashExtendedSplash.xaml

この例には、読み込むアプリケーションリソースがないため、ボタンが含まれてい DismissSplash ます。This example includes a DismissSplash button because it doesn't have app resources to load. アプリでは、リソースの読み込みまたはその最初の UI の準備の完了時に追加スプラッシュ画面が自動的に閉じられます。In your app, dismiss the extended splash screen automatically when your app is done loading resources or preparing its initial UI.

<Page
    x:Class="SplashScreenExample.ExtendedSplash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SplashScreenExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"/>
        </Canvas>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Button x:Name="DismissSplash" Content="Dismiss extended splash screen" HorizontalAlignment="Center" Click="DismissSplashButton_Click" />
        </StackPanel>
    </Grid>
</Page>

ExtendedSplash.xaml.csExtendedSplash.xaml.cs

この DismissExtendedSplash メソッドは、ボタンの click イベントハンドラーから呼び出されることに注意して DismissSplash ください。Note that the DismissExtendedSplash method is called from the click event handler for the DismissSplash button. アプリでは、DismissSplash ボタンは不要です。In your app, you won't need a DismissSplash button. その代わりに、アプリがリソースの読み込みの完了時に DismissExtendedSplash を呼び出し、そのメイン ページに移動します。Instead, call DismissExtendedSplash when your app is done loading resources and you want to navigate to its main page.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using Windows.ApplicationModel.Activation;
using SplashScreenExample.Common;
using Windows.UI.Core;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234238

namespace SplashScreenExample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    partial class ExtendedSplash : Page
    {
        internal Rect splashImageRect; // Rect to store splash screen image coordinates.
        private SplashScreen splash; // Variable to hold the splash screen object.
        internal bool dismissed = false; // Variable to track splash screen dismissal status.
        internal Frame rootFrame;

        public ExtendedSplash(SplashScreen splashscreen, bool loadState)
        {
            InitializeComponent();

            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
            Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

            splash = splashscreen;

            if (splash != null)
            {
                // Register an event handler to be executed when the splash screen has been dismissed.
                splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

                // Retrieve the window coordinates of the splash screen image.
                splashImageRect = splash.ImageLocation;
                PositionImage();

                // Optional: Add a progress ring to your splash screen to show users that content is loading
                PositionRing();
            }

            // Create a Frame to act as the navigation context
            rootFrame = new Frame();

            // Restore the saved session state if necessary
            RestoreState(loadState);
        }

        void RestoreState(bool loadState)
        {
            if (loadState)
            {
                // TODO: write code to load state
            }
        }

        // Position the extended splash screen image in the same location as the system splash screen image.
        void PositionImage()
        {
            extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            extendedSplashImage.Height = splashImageRect.Height;
            extendedSplashImage.Width = splashImageRect.Width;

        }

        void PositionRing()
        {
            splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
            splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
        }

        void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
        {
            // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
            if (splash != null)
            {
                // Update the coordinates of the splash screen image.
                splashImageRect = splash.ImageLocation;
                PositionImage();
                PositionRing();
            }
        }

        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        void DismissedEventHandler(SplashScreen sender, object e)
        {
            dismissed = true;

            // Complete app setup operations here...
        }

        void DismissExtendedSplash()
        {
            // Navigate to mainpage
            rootFrame.Navigate(typeof(MainPage));
            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }

        void DismissSplashButton_Click(object sender, RoutedEventArgs e)
        {
            DismissExtendedSplash();
        }
    }
}

App.xaml.csApp.xaml.cs

このプロジェクトは、Visual Studio の UWP アプリの [ 空のアプリ (XAML) ] プロジェクトテンプレートを使用して作成されました。This project was created using the UWP app Blank App (XAML) project template in Visual Studio. OnNavigationFailedOnSuspending の両方のイベント ハンドラーは自動的に生成され、追加スプラッシュ画面を実装するために変更する必要はありません。Both the OnNavigationFailed and OnSuspending event handlers are automatically generated and don't need to be changed to implement an extended splash screen. このトピックでは、OnLaunched のみを変更します。This topic only modifies OnLaunched.

アプリにプロジェクト テンプレートを使わなかった場合、Frame ナビゲーションを使用しないように変更した OnLaunched の例については、手順 4「起動アクティブ化ハンドラーの変更」をご覧ください。If you didn't use a project template for your app, see Step 4: Modify the launch activation handler for an example of a modified OnLaunched that doesn't use Frame navigation.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Application template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234227

namespace SplashScreenExample
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
            Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
            Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// </summary>
        /// <param name="e">Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                rootFrame.NavigationFailed += OnNavigationFailed;

                //  Display an extended splash screen if app was not previously running.
                if (e.PreviousExecutionState != ApplicationExecutionState.Running)
                {
                    bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated);
                    ExtendedSplash extendedSplash = new ExtendedSplash(e.SplashScreen, loadState);
                    rootFrame.Content = extendedSplash;
                    Window.Current.Content = rootFrame;
                }
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when Navigation to a certain page fails
        /// </summary>
        /// <param name="sender">The Frame which failed navigation</param>
        /// <param name="e">Details about the navigation failure</param>
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender">The source of the suspend request.</param>
        /// <param name="e">Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            // TODO: Save applicaiton state and stop any background activity
            deferral.Complete();
        }
    }
}

リファレンスReference