Visa en startskärm under en längre tid

2025-06-10

Visa en välkomstskärm för mer tid genom att skapa en utökad välkomstskärm för din app. Den här utökade skärmen imiterar välkomstskärmen som visas när appen startas, men kan anpassas. Oavsett om du vill visa information om inläsning i realtid eller bara ge appen extra tid för att förbereda det ursprungliga användargränssnittet kan du definiera startupplevelsen med en utökad välkomstskärm.

Anmärkning

Frasen "utökad välkomstskärm" i det här avsnittet refererar till en välkomstskärm som finns kvar på skärmen under en längre tid. Det innebär inte en underklass som härleds från klassen SplashScreen.

Viktiga API:er

Följande API:er används i det här avsnittet:

Standardrekommendationer för välkomstskärmen

Se till att den utökade välkomstskärmen imiterar standardskärmen genom att följa dessa rekommendationer:

Den utökade välkomstskärmen bör använda en bild på 620 x 300 bildpunkter som överensstämmer med den bild som angetts för välkomstskärmen i appmanifestet (appens välkomstskärmsbild). I Microsoft Visual Studio lagras inställningar för välkomstskärmen i avsnittet Välkomstskärm på fliken Visual Assets i appmanifestet (Package.appxmanifest-fil).
Den utökade välkomstskärmen bör använda en bakgrundsfärg som överensstämmer med bakgrundsfärgen som angetts för välkomstskärmen i appmanifestet (appens välkomstskärmsbakgrund).
Koden bör använda klassen SplashScreen för att placera appens välkomstskärmsbild på samma skärmkoordinater som standardskärmen.
Koden bör svara på fönsterändringshändelser (till exempel när skärmen roteras eller appen flyttas bredvid en annan app på skärmen) med hjälp av klassen SplashScreen för att flytta objekt på den utökade välkomstskärmen.

Använd följande steg för att skapa en utökad välkomstskärm som effektivt imiterar standardskärmen.

Lägg till ett Blanksida objekt i din befintliga app

Det här avsnittet förutsätter att du vill lägga till en utökad välkomstskärm i ett befintligt UWP-appprojekt (Universal Windows Platform) med C#, Visual Basic eller C++.

Öppna appen i Visual Studio.
Tryck eller öppna Project från menyraden och klicka på Lägg till nytt objekt. Dialogrutan "Lägg till nytt objekt" kommer att visas.
I den här dialogrutan lägger du till en ny tom sida i din app. Det här avsnittet ger den utökade välkomstskärmen namnet "ExtendedSplash".

Om du lägger till en tom sida genererar objekt två filer, en för markering (ExtendedSplash.xaml) och en annan för kod (ExtendedSplash.xaml.cs).

Essential XAML för en utökad välkomstskärm

Följ de här stegen för att lägga till en bild- och förloppskontroll på den utökade välkomstskärmen.

I filen ExtendedSplash.xaml:

Ändra egenskapen Background för standardelementet Grid så att det matchar bakgrundsfärgen som du har angett för appens välkomstskärm i appmanifestet (i avsnittet Visual Assets i filen Package.appxmanifest). Standardfärgen för välkomstskärmen är ljusgrå (hexvärde #464646). Observera att det här Grid--elementet tillhandahålls som standard när du skapar en ny tom sida. Du behöver inte använda ett Grid-; det är bara en praktisk bas för att bygga en utökad startskärm.
Lägg till ett Canvas-element i Grid-. Du använder den här Canvas- för att placera den utökade välkomstskärmsbilden.
Lägg till ett Image-element i Canvas-. Använd samma bild på 620 x 300 bildpunkter för den utökade välkomstskärmen som du valde som standardskärm.
(Valfritt) Lägg till en laddningsindikator för att visa användare att appen håller på att laddas. Detta avsnitt lägger till en ProgressRingi stället för en bestämd eller obestämd ProgressBar.

I följande exempel visas en Grid- med dessa tillägg och ändringar.

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

Anmärkning

I det här exemplet anges bredden på ProgressRing till 20 bildpunkter. Du kan manuellt ange dess bredd till ett värde som fungerar för din app, men kontrollen återges inte med bredder på mindre än 20 bildpunkter.

Nödvändig kod för en utökad startskärmsklass

Den utökade välkomstskärmen måste svara när fönsterstorleken (endast Windows) eller orienteringen ändras. Positionen för den bild du använder måste uppdateras så att den utökade välkomstskärmen ser bra ut oavsett hur fönstret ändras.

Använd de här stegen för att definiera metoder för att korrekt visa den utökade välkomstskärmen.

Lägg till nödvändiga namnområden

Du måste lägga till följande namnområden i ExtendedSplash.xaml.cs för att få åtkomst till klassen SplashScreen, Rect struct och Window.SizeChanged händelser.
```
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Core;
```
Skapa en partiell klass och deklarera klassvariabler

Inkludera följande kod i ExtendedSplash.xaml.cs för att skapa en partiell klass som representerar en utökad välkomstskärm.
```
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
}
```
Dessa klassvariabler används med flera metoder. Variabeln splashImageRect lagrar koordinaterna där systemet visade välkomstskärmsbilden för appen. Variabeln splash lagrar ett SplashScreen- objekt och variabeln dismissed spårar om välkomstskärmen som visas av systemet har stängts.

Definiera en konstruktor för din klass som placerar bilden korrekt

Följande kod definierar en konstruktor för den utökade välkomstskärmsklassen som lyssnar efter fönsterändringshändelser, placerar bilden och (valfri) förloppskontroll på den utökade välkomstskärmen, skapar en ram för navigering och anropar en asynkron metod för att återställa ett sparat sessionstillstånd.

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

Se till att registrera Window.SizeChanged-hanteraren (ExtendedSplash_OnResize i exemplet) i klasskonstruktorn så att appen placerar bilden korrekt på den utökade välkomstskärmen.

Definiera en klassmetod för att placera bilden på den utökade välkomstskärmen

Den här koden visar hur du placerar bilden på den utökade välkomstskärmen med splashImageRect-klassvariabeln.

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

(valfritt) Definiera en klassmetod för att placera en förloppskontroll på den utökade välkomstskärmen

Om du väljer att lägga till en ProgressRing- till den utökade välkomstskärmen placerar du den i förhållande till välkomstskärmsbilden. Lägg till följande kod i ExtendedSplash.xaml.cs för att centrera ProgressRing 32 bildpunkter under bilden.
```
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));
}
```

I klassen definierar du en hanterare för händelsen Avvisad

I ExtendedSplash.xaml.cs svarar du när händelsen SplashScreen.Dismissed inträffar genom att ange dismissed-klassvariabeln till true. Om din app har installationsåtgärder lägger du till dem i den här händelsehanteraren.

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

När appkonfigurationen är klar navigerar du bort från den utökade välkomstskärmen. Följande kod definierar en metod som heter DismissExtendedSplash som navigerar till den MainPage som definierats i appens MainPage.xaml-fil.

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

I klassen definierar du en hanterare för Window.SizeChanged-händelser

Förbered den utökade välkomstskärmen för att flytta dess element om en användare ändrar storlek på fönstret. Den här koden svarar när en Window.SizeChanged händelse inträffar genom att samla in de nya koordinaterna och flytta bilden. Om du har lagt till en förloppskontroll på den utökade välkomstskärmen flyttar du den även i den här händelsehanteraren.
```
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();
    }
}
```
Anmärkning

Innan du försöker hämta bildplatsen kontrollerar du att klassvariabeln (splash) innehåller ett giltigt SplashScreen- objekt, som du ser i exemplet.
(valfritt) Lägg till en klassmetod för att återställa ett sparat sessionstillstånd

Koden som du lade till i metoden OnLaunched i steg 4: Ändra startaktiveringshanteraren gör att appen visar en utökad välkomstskärm när den startas. Om du vill konsolidera alla metoder som rör appstart i din utökade välkomstskärmsklass kan du överväga att lägga till en metod i din ExtendedSplash.xaml.cs-fil för att återställa appens tillstånd.
```
void RestoreState(bool loadState)
{
    if (loadState)
    {
         // code to load your app's state here
    }
}
```
När du ändrar startaktiveringshanteraren i App.xaml.cs anger du även loadstate till true om den tidigare ApplicationExecutionState- för appen avslutades. I så fall återställer metoden RestoreState appen till dess tidigare tillstånd. En översikt över appstart, avstängning och avslutning finns i applivscykel.

Ändra aktiveringshanteraren för start

När appen startas skickar systemet välkomstskärmsinformation till appens händelsehanterare för startaktivering. Du kan använda den här informationen för att placera bilden på den utökade välkomstskärmen. Du kan hämta den här välkomstskärmen från de aktiveringshändelseargument som skickas till appens OnLaunched-hanterare (se variabeln args i följande kod).

Om du inte redan har åsidosatt OnLaunched-hanteraren för din app kan du läsa applivscykel för att lära dig hur du hanterar aktiveringshändelser.

I App.xaml.cs lägger du till följande kod för att skapa och visa en utökad välkomstskärm.

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

Fullständig kod

Följande kod skiljer sig något från de kodfragment som visas i föregående steg.

ExtendedSplash.xaml innehåller en DismissSplash-knapp. När den här knappen klickas anropar en händelsehanterare, DismissSplashButton_Click, metoden DismissExtendedSplash. I din app anropar du DismissExtendedSplash när appen är klar med att läsa in resurser eller initiera dess användargränssnitt.
Den här appen använder också en UWP-appprojektmall som använder Frame navigering. I App.xaml.cs definierar startaktiveringshanteraren (OnLaunched) därför en rootFrame och använder den för att ange innehållet i appfönstret.

ExtendedSplash.xaml

Det här exemplet innehåller en DismissSplash-knapp eftersom den inte har appresurser att läsa in. I din app stänger du den utökade välkomstskärmen automatiskt när din app är klar med att läsa in resurser eller förbereda det ursprungliga användargränssnittet.

<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

Observera att metoden DismissExtendedSplash anropas från klickhändelsehanteraren för knappen DismissSplash. I din app behöver du ingen DismissSplash knapp. Anropa i stället DismissExtendedSplash när appen är klar med att läsa in resurser och du vill gå till dess huvudsida.

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

Det här projektet skapades med hjälp av UWP-applikationen Tom applikation (XAML) projektmall i Visual Studio. Både OnNavigationFailed och OnSuspending händelsehanterare genereras automatiskt och behöver inte ändras för att implementera en utökad välkomstskärm. Det här avsnittet ändrar bara OnLaunched.

Om du inte använde en projektmall för din app kan du se Steg 4: Ändra startaktiveringshanteraren för ett exempel på en modifierad OnLaunched som inte använder Frame-navigering.

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

Appens livscykel

Referens

Feedback

Var den här sidan till hjälp?