Compartir a través de

Mostrar una pantalla de presentación durante más tiempo

  • Artículo

Muestra una pantalla de presentación más tiempo creando una pantalla de presentación extendida para tu aplicación. Esta pantalla extendida imita la pantalla de presentación que se muestra cuando se inicia la aplicación, pero se puede personalizar. Tanto si quieres mostrar información de carga en tiempo real como si simplemente proporcionas tiempo adicional a la aplicación para preparar su interfaz de usuario inicial, una pantalla de presentación extendida te permite definir la experiencia de inicio.

Nota:

La frase "pantalla de presentación extendida" de este tema hace referencia a una pantalla de presentación que permanece en la pantalla durante un período de tiempo prolongado. No significa una subclase que deriva de la clase SplashScreen .

API importantes

En este tema se usan las SIGUIENTES API:

Recomendaciones de pantalla de presentación predeterminadas

Asegúrese de que la pantalla de presentación extendida imita con precisión la pantalla de presentación predeterminada siguiendo estas recomendaciones:

  • La página de pantalla de presentación extendida debe usar una imagen de 620 x 300 píxeles que sea coherente con la imagen especificada para la pantalla de presentación en el manifiesto de la aplicación (imagen de pantalla de presentación de la aplicación). En Microsoft Visual Studio, la configuración de la pantalla de presentación se almacena en la sección Pantalla de presentación de la pestaña Recursos visuales del manifiesto de la aplicación (archivo Package.appxmanifest).
  • La pantalla de presentación extendida debe usar un color de fondo coherente con el color de fondo especificado para la pantalla de presentación en el manifiesto de la aplicación (fondo de la pantalla de presentación de la aplicación).
  • El código debe usar la clase SplashScreen para colocar la imagen de la pantalla de presentación de la aplicación en las mismas coordenadas de pantalla que la pantalla de presentación predeterminada.
  • El código debe responder a eventos de cambio de tamaño de ventana (por ejemplo, cuando se gira la pantalla o la aplicación se mueve junto a otra aplicación en pantalla) mediante la clase SplashScreen para cambiar la posición de los elementos en la pantalla de presentación extendida.

Siga estos pasos para crear una pantalla de presentación extendida que imita eficazmente la pantalla de presentación predeterminada.

Agregar un elemento página en blanco a la aplicación existente

En este tema se da por supuesto que quiere agregar una pantalla de presentación extendida a un proyecto de aplicación de Plataforma universal de Windows (UWP) existente mediante C#, Visual Basic o C++.

  • Abre la aplicación en Visual Studio.
  • Presione o abra Project en la barra de menús y haga clic en Agregar nuevo elemento. Aparecerá un cuadro de diálogo Agregar nuevo elemento .
  • En este cuadro de diálogo, agregue una nueva página en blanco a la aplicación. En este tema se denomina la página de presentación extendida "ExtendedSplash".

Agregar un elemento Página en blanco genera dos archivos, uno para el marcado (ExtendedSplash.xaml) y otro para el código (ExtendedSplash.xaml.cs).

XAML esencial para una pantalla de presentación extendida

Siga estos pasos para agregar una imagen y un control de progreso a la pantalla de presentación extendida.

En el archivo ExtendedSplash.xaml:

  • Cambie la propiedad Background del elemento Grid predeterminado para que coincida con el color de fondo establecido para la pantalla de presentación de la aplicación en el manifiesto de la aplicación (en la sección Recursos visuales del archivo Package.appxmanifest). El color predeterminado de la pantalla de presentación es un gris claro (valor hexadecimal #464646). Tenga en cuenta que este elemento Grid se proporciona de forma predeterminada al crear una nueva página en blanco. No tienes que usar una cuadrícula; es solo una base cómoda para crear una pantalla de presentación extendida.
  • Agregue un elemento Canvas a grid. Usará este lienzo para colocar la imagen de la pantalla de presentación extendida.
  • Agregue un elemento Image al canvas. Use la misma imagen de 620 x 300 píxeles para la pantalla de presentación extendida que eligió para la pantalla de presentación predeterminada.
  • (Opcional) Agregue un control de progreso para mostrar a los usuarios que la aplicación está cargando. En este tema se agrega una clase ProgressRing, en lugar de una clase ProgressBar determinada o indeterminada.

En el ejemplo siguiente se muestra una cuadrícula con estas adiciones y cambios.

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

Nota:

En este ejemplo se establece el ancho de ProgressRing en 20 píxeles. Puede establecer manualmente su ancho en un valor que funcione para la aplicación; sin embargo, el control no se representará en anchos de menos de 20 píxeles.

Código esencial para una clase de pantalla de presentación extendida

La pantalla de presentación extendida debe responder siempre que cambie el tamaño de la ventana (solo Windows) o la orientación. La posición de la imagen que use debe actualizarse para que la pantalla de presentación extendida se vea bien independientemente de cómo cambie la ventana.

Siga estos pasos para definir métodos para mostrar correctamente la pantalla de presentación extendida.

  1. Adición de espacios de nombres necesarios

    Deberá agregar los siguientes espacios de nombres a ExtendedSplash.xaml.cs para acceder a la clase SplashScreen , la estructura Rect y los eventos Window.SizeChanged .

    using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Core;

  2. Creación de una clase parcial y declaración de variables de clase

    Incluya el código siguiente en ExtendedSplash.xaml.cs para crear una clase parcial para representar una pantalla de presentación extendida.

    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
}

    Estos métodos usan estas variables de clase. La splashImageRect variable almacena las coordenadas en las que el sistema muestra la imagen de la pantalla de presentación de la aplicación. La splash variable almacena un objeto SplashScreen y la dismissed variable realiza un seguimiento de si se ha descartado o no la pantalla de presentación que muestra el sistema.

  3. Definir un constructor para la clase que coloca correctamente la imagen

    El código siguiente define un constructor para la clase de pantalla de presentación extendida que escucha eventos de cambio de tamaño de ventana, coloca la imagen y (opcional) control de progreso en la pantalla de presentación extendida, crea un marco para la navegación y llama a un método asincrónico para restaurar un estado de sesión guardado.

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

    Asegúrese de registrar el controlador Window.SizeChanged (ExtendedSplash_OnResize en el ejemplo) en el constructor de clase para que la aplicación coloque la imagen correctamente en la pantalla de presentación extendida.

  4. Definir un método de clase para colocar la imagen en la pantalla de presentación extendida

    En este código se muestra cómo colocar la imagen en la página de pantalla de presentación extendida con la splashImageRect variable de clase .

    void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;
}

  5. (Opcional) Definir un método de clase para colocar un control de progreso en la pantalla de presentación extendida

    Si decide agregar una clase ProgressRing a la pantalla de presentación extendida, colóquela en relación con la imagen de la pantalla de presentación. Agregue el código siguiente a ExtendedSplash.xaml.cs para centrar progressRing 32 píxeles debajo de la imagen.

    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. Dentro de la clase , defina un controlador para el evento Dismissed.

    En ExtendedSplash.xaml.cs, responda cuando se produce el evento SplashScreen.Dismissed estableciendo la variable de dismissed clase en true. Si la aplicación tiene operaciones de configuración, agréguelas a este controlador de eventos.

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

    Una vez completada la configuración de la aplicación, desplácese fuera de la pantalla de presentación extendida. El código siguiente define un método denominado DismissExtendedSplash que navega hasta el definido en el MainPage archivo MainPage.xaml de la aplicación.

    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. Dentro de la clase , defina un controlador para los eventos Window.SizeChanged.

    Prepare la pantalla de presentación extendida para cambiar la posición de sus elementos si un usuario cambia el tamaño de la ventana. Este código responde cuando se produce un evento Window.SizeChanged capturando las nuevas coordenadas y reposicionando la imagen. Si ha agregado un control de progreso a la pantalla de presentación extendida, reposicione también dentro de este controlador de eventos.

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

    Nota:

     Antes de intentar obtener la ubicación de la imagen, asegúrese de que la variable de clase (splash) contiene un objeto SplashScreen válido, como se muestra en el ejemplo.

     

  8. (Opcional) Adición de un método de clase para restaurar un estado de sesión guardado

    El código que agregó al método OnLaunched en el Paso 4: Modificar el controlador de activación de inicio hace que la aplicación muestre una pantalla de presentación extendida cuando se inicia. Para consolidar todos los métodos relacionados con el inicio de la aplicación en la clase de pantalla de presentación extendida, podría considerar la posibilidad de agregar un método al archivo ExtendedSplash.xaml.cs para restaurar el estado de la aplicación.

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

    Al modificar el controlador de activación de inicio en App.xaml.cs, también se establecerá loadstate en true si la applicationExecutionState anterior de la aplicación se finalizó. Si es así, el RestoreState método restaura la aplicación a su estado anterior. Para obtener información general sobre el inicio, la suspensión y la finalización de la aplicación, consulte Ciclo de vida de la aplicación.

Modificación del controlador de activación de inicio

Cuando se inicia la aplicación, el sistema pasa información de la pantalla de presentación al controlador de eventos de activación de inicio de la aplicación. Puede usar esta información para colocar correctamente la imagen en la página de presentación extendida. Puedes obtener esta información de pantalla de presentación de los argumentos del evento de activación que se pasan al controlador OnLaunched de la aplicación (consulta la args variable en el código siguiente).

Si aún no ha reemplazado el controlador OnLaunched para la aplicación, consulte Ciclo de vida de la aplicación para obtener información sobre cómo controlar los eventos de activación.

En App.xaml.cs, agregue el código siguiente para crear y mostrar una pantalla de presentación extendida.

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

Código completo

El código siguiente difiere ligeramente de los fragmentos de código que se muestran en los pasos anteriores.

  • ExtendedSplash.xaml incluye un DismissSplash botón. Cuando se hace clic en este botón, un controlador de eventos, DismissSplashButton_Click, llama al DismissExtendedSplash método . En la aplicación, llame a DismissExtendedSplash cuando la aplicación haya terminado de cargar recursos o inicializar su interfaz de usuario.
  • Esta aplicación también usa una plantilla de proyecto de aplicación para UWP, que usa navegación de fotogramas . Como resultado, en App.xaml.cs, el controlador de activación de inicio (OnLaunched) define y rootFrame lo usa para establecer el contenido de la ventana de la aplicación.

ExtendedSplash.xaml

En este ejemplo se incluye un DismissSplash botón porque no tiene recursos de aplicación para cargar. En la aplicación, descarte automáticamente la pantalla de presentación extendida cuando la aplicación haya terminado de cargar recursos o preparar su interfaz de usuario inicial.

<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

Tenga en cuenta que se llama al DismissExtendedSplash método desde el controlador de eventos click para el DismissSplash botón. En la aplicación, no necesitará un DismissSplash botón. En su lugar, llame a DismissExtendedSplash cuando la aplicación haya terminado de cargar recursos y quiera navegar a su página principal.

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.cs

Este proyecto se creó con la plantilla de proyecto Aplicación en blanco (XAML) de la aplicación para UWP en Visual Studio. Los controladores de OnNavigationFailed eventos y OnSuspending se generan automáticamente y no es necesario cambiar para implementar una pantalla de presentación extendida. Este tema solo modifica OnLaunched.

Si no usó una plantilla de proyecto para la aplicación, consulte Paso 4: Modificar el controlador de activación de inicio para ver un ejemplo de una modificación OnLaunched que no usa la navegación de Fotogramas .

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 application state and stop any background activity
            deferral.Complete();
        }
    }
}

Referencia