Compartilhar via

Exibir uma tela inicial por mais tempo

Exiba uma tela inicial por mais tempo criando uma tela inicial estendida para seu aplicativo. Essa tela estendida imita a tela inicial mostrada quando seu aplicativo é iniciado, mas pode ser personalizada. Se você deseja mostrar informações de carregamento em tempo real ou simplesmente dar ao aplicativo tempo extra para preparar sua interface do usuário inicial, uma tela inicial estendida permite definir a experiência de inicialização.

Observação

A frase "tela inicial estendida" neste tópico refere-se a uma tela inicial que permanece na tela por um período prolongado. Isso não significa uma subclasse que deriva da classe SplashScreen.

APIs importantes

As seguintes APIs são usadas neste tópico:

Recomendações padrão de tela inicial

Verifique se a tela inicial estendida imita com precisão a tela inicial padrão seguindo estas recomendações:

  • Sua página de tela inicial estendida deve usar uma imagem de 620 x 300 pixels que seja consistente com a imagem especificada para a tela inicial no manifesto do aplicativo (imagem de tela inicial do aplicativo). No Microsoft Visual Studio, as configurações de tela inicial são armazenadas na seção Tela Inicial da guia Ativos Visuais no manifesto do aplicativo (arquivo Package.appxmanifest).
  • Sua tela de abertura estendida deve usar uma cor de plano de fundo consistente com a cor de plano de fundo especificada para sua tela de abertura no manifesto do aplicativo (plano de fundo da tela de abertura do aplicativo).
  • Seu código deve usar a classe SplashScreen para posicionar a imagem da tela inicial do aplicativo nas mesmas coordenadas de tela que a tela inicial padrão.
  • Seu código deve responder a eventos de redimensionamento da janela (como quando a tela é girada ou seu aplicativo é movido ao lado de outro aplicativo na tela) usando a classe SplashScreen para reposicionar itens na tela inicial estendida.

Use as etapas a seguir para criar uma tela inicial estendida que imita efetivamente a tela inicial padrão.

Adicione um item Página em Branco ao seu aplicativo existente

Este tópico pressupõe que você deseja adicionar uma tela inicial estendida a um projeto de aplicativo UWP (Plataforma Universal do Windows) existente usando C#, Visual Basic ou C++.

  • Abra seu aplicativo no Visual Studio.
  • Pressione ou abra Project na barra de menus e clique em Adicionar Novo Item. Uma caixa de diálogo Adicionar Novo Item será exibida.
  • Nesta caixa de diálogo, adicione uma nova Página em Branco ao seu aplicativo. Este tópico nomeia a página de tela inicial estendida "ExtendedSplash".

Adicionar um item Página em Branco gera dois arquivos, um para marcação (ExtendedSplash.xaml) e outro para código (ExtendedSplash.xaml.cs).

XAML essencial para uma tela inicial estendida

Siga estas etapas para adicionar uma imagem e um controle de progresso à tela inicial estendida.

No arquivo ExtendedSplash.xaml:

  • Altere a propriedade Plano de Fundo do elemento padrão Grid para corresponder à cor de fundo definida para a tela de abertura do aplicativo no manifesto do aplicativo (na seção Visual Assets do arquivo Package.appxmanifest). A cor da tela inicial padrão é um cinza claro (valor hex #464646). Observe que esse elemento Grid é fornecido por padrão quando você cria uma novapágina em branco . Você não precisa usar um de Grade; é apenas uma base conveniente para construir uma tela inicial expandida.
  • Adicione um elemento Canvas à Grade. Você usará este Canvas para posicionar sua imagem de tela de introdução estendida.
  • Adicione um elemento Image à Tela. Use a mesma imagem de 620 x 300 pixels para sua tela inicial estendida que você escolheu para a tela inicial padrão.
  • (Opcional) Adicione um controle de progresso para mostrar aos usuários que seu aplicativo está carregando. Este tópico adiciona um ProgressRing, em vez de um ProgressBar determinado ou indeterminado.

O exemplo a seguir demonstra uma Grade com essas adições e alterações.

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

Observação

Este exemplo define a largura do ProgressRing como 20 pixels. Você pode definir manualmente sua largura como um valor que funciona para seu aplicativo, no entanto, o controle não será renderizado em larguras inferiores a 20 pixels.

Código essencial para uma classe de tela inicial estendida

Sua tela inicial estendida precisa responder sempre que o tamanho da janela (somente Windows) ou a orientação for alterado. A posição da imagem que você usa deve ser atualizada para que sua tela inicial estendida fique boa, independentemente de como a janela seja alterada.

Use estas etapas para definir métodos para exibir corretamente sua tela inicial estendida.

  1. Adicionar namespaces necessários

    Você precisará adicionar os seguintes namespaces ao ExtendedSplash.xaml.cs para acessar a classe SplashScreen, o struct Rect e os eventos Window.SizeChanged.

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

  2. Criar uma classe parcial e declarar variáveis de classe

    Inclua o código a seguir em ExtendedSplash.xaml.cs para criar uma classe parcial para representar uma tela inicial estendida.

    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
}

    Essas variáveis de classe são usadas por vários métodos. A splashImageRect variável armazena as coordenadas em que o sistema exibia a imagem de tela inicial do aplicativo. A splash variável armazena um objeto SplashScreen e a dismissed variável rastreia se a tela inicial exibida pelo sistema foi ou não ignorada.

  3. Definir um construtor para sua classe que posicione corretamente a imagem

    O código a seguir define um construtor para a classe de tela inicial estendida que escuta eventos de redimensionamento de janela, posiciona a imagem e o controle de progresso (opcional) na tela inicial estendida, cria um quadro para navegação e chama um método assíncrono para restaurar um estado de sessão salvo.

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

    Registre seu manipulador de Window.SizeChanged ( no exemplo) no construtor de classe para que o aplicativo posicione a imagem corretamente na tela inicial estendida.

  4. Definir um método de classe para posicionar a imagem na tela inicial estendida

    Esse código demonstra como posicionar a imagem na página de tela inicial estendida com a variável de splashImageRect classe.

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

  5. (opcional) Defina um método de classe para posicionar um controle de progresso na tela inicial estendida

    Se você optar por adicionar um ProgressRing à tela de apresentação estendida, posicione-o em relação à imagem da splash screen. Adicione o código a seguir, em ExtendedSplash.xaml.cs, para centralizar o ProgressRing 32 pixels abaixo da imagem.

    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 da classe, defina um manipulador para o evento Dismissed

    Em ExtendedSplash.xaml.cs, responda quando o evento SplashScreen.Dismissed ocorre definindo a variável de dismissed classe como true. Se o aplicativo tiver operações de instalação, adicione-as a esse manipulador 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...
}

    Depois que a instalação do aplicativo for concluída, navegue para longe da tela inicial estendida. O código a seguir define um método chamado DismissExtendedSplash que navega até o MainPage definido no arquivo MainPage.xaml do aplicativo.

    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 da classe, defina um manipulador para eventos Window.SizeChanged

    Prepare sua tela de carregamento estendida para reposicionar seus elementos quando um usuário redimensiona a janela. Esse código responde quando ocorre um evento Window.SizeChanged capturando as novas coordenadas e reposicionando a imagem. Se você adicionou um controle de progresso à tela inicial estendida, reposicione-o dentro desse manipulador de eventos também.

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

    Observação

     Antes de tentar obter o local da imagem, verifique se a variável de classe (splash) contém um objeto SplashScreen válido, conforme mostrado no exemplo.

     

  8. (Opcional) Adicionar um método de classe para restaurar um estado de sessão salvo

    O código que você adicionou ao método OnLaunched na Etapa 4: Modificar o manipulador de ativação de inicialização faz com que seu aplicativo exiba uma tela inicial estendida quando ele é iniciado. Para consolidar todos os métodos relacionados à inicialização do aplicativo em sua classe de tela inicial estendida, você pode considerar adicionar um método ao arquivo ExtendedSplash.xaml.cs para restaurar o estado do aplicativo.

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

    Ao modificar o manipulador de ativação de inicialização no App.xaml.cs, você também definirá loadstate como true se o estado anterior ApplicationExecutionState do seu aplicativo tiver sido Encerrado. Nesse caso, o RestoreState método restaura o aplicativo para seu estado anterior. Para obter uma visão geral de inicialização, suspensão e encerramento do aplicativo, consulte o ciclo de vida do aplicativo.

Modificar o manipulador de ativação de lançamento

Quando seu aplicativo é iniciado, o sistema passa informações de tela inicial para o manipulador de eventos de ativação do lançamento do aplicativo. Você pode usar essas informações para posicionar corretamente a imagem em sua página de tela inicial estendida. Você pode obter essas informações de tela inicial dos argumentos de evento de ativação que são passados para o manipulador de OnLaunched do do aplicativo (consulte a variável no código a seguir).

Se você ainda não substituiu o manipulador OnLaunched para seu aplicativo, consulte ciclo de vida do aplicativo para saber como lidar com eventos de ativação.

Em App.xaml.cs, adicione o código a seguir para criar e exibir uma tela inicial estendida.

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

O código a seguir difere ligeiramente dos snippets mostrados nas etapas anteriores.

  • ExtendedSplash.xaml inclui um DismissSplash botão. Quando esse botão é clicado, um manipulador DismissSplashButton_Clickde eventos chama o DismissExtendedSplash método. Em seu aplicativo, chame DismissExtendedSplash quando seu aplicativo terminar de carregar recursos ou inicializar sua interface do usuário.
  • Esse aplicativo também usa um modelo de projeto de aplicativo UWP, que usa navegação por meio de Frame . Como resultado, em App.xaml.cs, o manipulador de ativação de inicialização (OnLaunched) define um rootFrame e o usa para definir o conteúdo da janela do aplicativo.

ExtendedSplash.xaml

Este exemplo inclui um DismissSplash botão porque ele não tem recursos de aplicativo para carregar. Em seu aplicativo, feche automaticamente a tela inicial estendida quando ele terminar de carregar recursos ou preparar sua interface 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

Observe que o método DismissExtendedSplash é chamado do manipulador de eventos de clique do botão DismissSplash. Em seu aplicativo, você não precisará de um DismissSplash botão. Em vez disso, chame DismissExtendedSplash quando seu aplicativo terminar de carregar recursos e você quiser navegar até sua 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 projeto foi criado usando o aplicativo UWP XAML (aplicativo em branco) modelo de projeto no Visual Studio. Os manipuladores de eventos OnNavigationFailed e OnSuspending são gerados automaticamente e não precisam ser alterados para implementar uma tela inicial estendida. Este tópico modifica apenas OnLaunched.

Se você não usou um modelo de projeto para seu aplicativo, consulte a Etapa 4: Modificar o manipulador de ativação de inicialização para obter um exemplo de um OnLaunched modificado que não usa a navegação de quadro.

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

Referência

  • Last updated on