导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

如何延长初始屏幕 (XAML)

Applies to Windows and Windows Phone

通过为你的应用创建延长的初始屏幕,使初始屏幕显示的时间更长。此延长的屏幕将模仿你的应用启动时显示的初始屏幕,但是也可以进行自定义。 不论你是要显示实时加载信息还是想要简单地为应用提供更多时间来准备其初始 UI,延长的初始屏幕允许你定义启动体验。要查看完整应用中使用的延长的初始屏幕,请参阅初始屏幕示例

使用 JavaScript 和 HTML? 请参阅 How to extend the splash screen (Windows Store apps using Javascript and HTML)

注意  本主题中的短语"“延长的初始屏幕”"是指在屏幕上保留延长时间的初始屏幕。它不表示从 SplashScreen 类派生的子类。

通过遵循以下建议,确保延长的初始屏幕准确地模仿默认初始屏幕:

  • 你的延长的初始屏幕页面应该使用 620 x 300 像素的图像,与应用清单中为初始屏幕指定的图像(你的应用的初始屏幕图像)一致。在 Microsoft Visual Studio 2013 中,初始屏幕设置存储在你的应用清单(Package.appxmanifest 文件)的“可见资产”选项卡的“初始屏幕”部分中。
  • 你的延长的初始屏幕使用的背景色应该与应用清单中为初始屏幕指定的背景色(你的应用的初始屏幕背景)一致。
  • 你的代码应该使用 SplashScreen 类将你的应用的初始屏幕图像放置在默认初始屏幕的相同屏幕坐标处。
  • 通过使用 SplashScreen 类在你的延长的初始屏幕上重新放置项目,你的代码应该响应窗口调整大小事件(例如,在旋转屏幕时或将应用移动到屏幕上靠近另一个应用的位置时)。

使用以下步骤创建一个延长的初始屏幕,该屏幕可有效地模仿默认初始屏幕。

先决条件

说明

步骤 1: 将“空白页”项目添加到你的现有应用

  • 在 Visual Studio 2013 中打开你的应用。
  • 按 或从菜单栏打开“项目”,然后单击“添加新项”。将出现“添加新项”对话框。
  • 从此对话框,向你的应用添加新的“空白页”。本主题将延长的初始屏幕页命名为 "ExtendedSplash"。

添加“空白页”项目将生成两个文件,一个用于标记 (ExtendedSplash.xaml),另一个用于代码 (ExtendedSplash.xaml.cs)。

步骤 2: 延长的初始屏幕的必需 XAML

请遵循以下步骤将图像和进度控件添加到你的延长的初始屏幕。有关设计延长的初始屏幕的更多指南,请参阅初始屏幕指南和清单

在你的 ExtendedSplash.xaml 文件中,执行以下操作:

  • 更改默认 Grid 元素的 Background 属性,使其匹配你在应用清单(在 Package.appxmanifest 文件中的“可见资产”部分)中为应用的初始屏幕设置的背景色。默认的初始屏幕颜色为浅灰色(十六进制值为 #464646)。请注意,在你创建新的“空白页”时,将默认提供此 Grid 元素。你不必使用 Grid;它只是为构建延长的初始屏幕提供了一个方便。
  • Canvas 元素添加到 Grid。你将使用此 Canvas 来放置你的延长的初始屏幕图像。
  • Image 元素添加到 Canvas。将你为默认初始屏幕选择的 600 x 320 像素图像用于延长的初始屏幕。
  • (可选)添加一个进度控件,以向用户显示正在加载的应用。此主题添加了一个 ProgressRing,而非一个确定或不确定的 ProgressBar。要了解如何将 ProgressBar 添加到你的应用,请参阅添加进度控件。请参阅 Guidelines for progress controls 获取可用控件和使用建议的概述。

添加以下代码以在 ExtendedSplash.xaml 中定义 CanvasImage 元素以及 ProgressRing 控件:


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

注意  此代码将 ProgressRing 的宽度设置为 20 像素。你可以将其宽度手动设置为对你的应用有效的值,但是,该控件无法以小于 20 像素的宽度呈现。

步骤 3: 延长的初始屏幕类的必需代码

你的延长的初始屏幕需要在每次窗口大小(仅限 Windows)或方向发生更改时作出响应。你使用的图像的位置必须进行更新,这样你的延长的初始屏幕将看起来很好,而不管窗口大小如何改变。

使用以下步骤定义方法以正确地显示你的延长的初始屏幕。

  1. 添加所需的命名空间

    你需要将以下命名空间添加到 ExtendedSplash.xaml.cs 以访问 SplashScreen 类、Window.SizeChanged 事件(仅限 Windows)和 SuspensionManager 类(在“空白应用程序”、“网格应用”或“拆分应用”项目模板中的“通用”文件夹中提供)。

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

    注意  使用你的 Windows 运行时应用项目的名称替换行 using SplashScreenExample.Common; 中的 "SplashScreenExample"。

    注意  本主题中的代码将你的应用从延长的初始屏幕类还原到之前的会话状态。此操作将合并 ExtendedSplash.xaml.cs 中的应用启动任务。请记住,如果你愿意的话,可以改为将会话状态直接从 App.xaml.cs 中的 OnLaunched 处理程序还原。

  2. 创建部分类并声明类变量

    将以下代码包括在 ExtendedSplash.xaml.cs 中,以创建一个部分类来代表延长的初始屏幕。

    
    
    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
    }
    
    

    这些类变量由多个方法使用。splashImageRect 变量存储系统为应用显示初始屏幕图像所在位置的坐标。splash 变量存储一个 SplashScreen 对象,而 dismissed 变量跟踪是否已解除系统所显示的初始屏幕。

  3. 为正确放置图像的类定义一个构造函数

    以下代码为延长的初始屏幕类定义了一个构造函数,用于侦听窗口调整大小事件、将图像和(可选)进度控件放置在延长的初始屏幕上、为导航创建一个框架,以及调用异步方法来还原保存的会话状态。

    
    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();
                
        // Restore the saved session state if necessary
        RestoreStateAsync(loadState);
    }
    
    

    确保在你的类构造函数中注册 Window.SizeChanged 处理程序(示例中为 ExtendedSplash_OnResize),以便你的应用在延长的初始屏幕中正确放置图像。

  4. 定义一个类方法以将图像放置在你的延长的初始屏幕中

    此代码演示了如何使用 splashImageRect 类变量将图像放置在延长的初始屏幕页面上。

    
    void PositionImage()
    {
        extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
        extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
        extendedSplashImage.Height = splashImageRect.Height;
        extendedSplashImage.Width = splashImageRect.Width;
    }
    
    
  5. (可选)定义一个类方法以将进度控件放置在你的延长的初始屏幕中

    如果你选择将 ProgressRing 添加到你的延长的初始屏幕,请将它放置在与初始屏幕图像相对的位置。将以下代码添加到 ExtendedSplash.xaml.cs 以将 ProgressRing 32 像素居中放置在图像的下方。

    
    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 事件定义一个处理程序

    在 ExtendedSplash.xaml.cs 中,通过将 dismissed 类变量设置为 true,在发生 SplashScreen.Dismissed 事件时进行响应。如果你的应用包含安装操作,请将它们添加到事件处理程序。

    
    // 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...
    }
    
    

    完成应用安装后,导航离开你的延长的初始屏幕。以下代码定义了一个称为 DismissExtendedSplash 的方法,可用于导航至应用的 MainPage.xaml 文件中定义的 MainPage

    
    void DismissExtendedSplash()
    {
        // Navigate to mainpage
        rootFrame.Navigate(typeof(MainPage));
        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }
    
    
  7. 在该类内,为 Window.SizeChanged 事件定义一个处理程序

    在用户调整窗口大小时,准备你的延长的初始屏幕以重新放置其元素。当 Window.SizeChanged 事件发生时,此代码将通过捕获新坐标和重新放置图像来进行响应。如果你已将进度控件添加到延长的初始屏幕,同样将它重新放置在该事件处理程序内。

    
    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 对象,如该示例中所示。

  8. 添加类方法以还原保存的会话状态

    在步骤 4 中你添加到 OnLaunched 方法中的代码:修改启动激活处理程序,将导致你的应用在启动时显示延长的初始屏幕。 要合并你的延长初始屏幕类中与应用启动相关的所有方法,请将以下异步方法添加到你的 ExtendedSplash.xaml.cs 文件。

    
    async void RestoreStateAsync(bool loadState)
    {
        if (loadState)
            await SuspensionManager.RestoreAsync();
    }
    
    

    在你修改 App.xaml.cs 中的启动激活处理程序时,如果应用之前的 ApplicationExecutionStateTerminated,你还需要将 loadstate 设置为 true。如果出现这种情况,RestoreStateAsync 方法将调用 SuspensionManager 以将应用还原到它之前的状态。有关应用启用、挂起和终止的概述,请参阅应用生命周期

步骤 4: 修改启动激活处理程序

启动应用时,系统将初始屏幕信息传递给应用的启动激活事件处理程序。你可以使用该信息将图像正确放置在延长的初始屏幕页面上。你可以从传递给你的应用的 OnLaunched 处理程序的激活事件参数获取此初始屏幕信息(请参阅以下代码中的 args 变量)。

如果你尚未为你的应用替代 OnLaunched 处理程序,请参阅如何激活应用以了解如何处理激活事件。

在 App.xaml.cs 中,添加以下代码以创建和显示延长的初始屏幕。


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();
}


步骤 5: 完成代码

注意  以下代码与之前步骤中显示的代码段稍有不同。

  • ExtendedSplash.xaml 包括一个 DismissSplash 按钮。单击此按钮时,事件处理程序 DismissSplashButton_Click 将调用 DismissExtendedSplash 方法。在你的应用中,在应用完成资源加载或初始化其 UI 后调用 DismissExtendedSplash
  • 此应用还会使用 Windows 运行时应用项目模板(使用 Frame 导航)。因此,在 App.xaml.cs 中,启动激活处理程序 (OnLaunched) 将定义一个 rootFrame 并使用它来设置应用窗口的内容。

ExtendedSplash.xaml:此示例包含一个 DismissSplash 按钮,因为它没有要加载的应用资源。在你的应用中,如果你的应用已完成资源加载或已准备好其初始 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.cs:请注意 DismissExtendedSplash 方法将从 DismissSplash 按钮的单击事件处理程序中调用。在你的应用中,你将不需要 DismissSplash 按钮。而是,在资源加载完成后以及在你想要导航到其主页面时调用 DismissExtendedSplash


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 http://go.microsoft.com/fwlink/?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
            RestoreStateAsync(loadState);
        }

        async void RestoreStateAsync(bool loadState)
        {
            if (loadState)
                await SuspensionManager.RestoreAsync();
        }

        // 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.cs:此项目是使用 Visual Studio 2013 中的 Windows 运行时应用“空白应用 (XAML)”项目模板创建的。OnNavigationFailedOnSuspending 事件处理程序均自动生成并且无需进行任何更改即可实现延长的初始屏幕。此主题将仅修改 OnLaunched

如果你没有为应用使用项目模板,请参见步骤 4:为没有使用 Frame 导航的已修改 OnLaunched 处理程序的示例,修改启动激活处理程序


using SplashScreenExample.Common;
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 http://go.microsoft.com/fwlink/?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()
        {
            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>
        async private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            await SuspensionManager.SaveAsync();
            deferral.Complete();
        }
    }
}


备注

提示  如果你已遵循这些说明并在转换到延长的初始屏幕期间发现有闪烁,请参阅初始屏幕指南和清单中的疑难解答部分以获取帮助。

相关主题

初始屏幕指南和清单
如何激活应用
应用生命周期(概述)
初始屏幕示例
How to extend the splash screen (Windows Store apps using Javascript and HTML)
参考
Windows.ApplicationModel.Activation namespace
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.ImageLocation property
Windows.ApplicationModel.Core.CoreApplicationView.Activated event

 

 

显示:
© 2014 Microsoft