Windows Store App erweiterter Begrüßungsbildschirm

Meine neue WebSite finden Du jetzt unter https://AttilaKrick.com.

Standard SplashScreen

Windows Store App – Standard SplashScreen

 

Windows Store App - erweiterter SplashScreen

Windows Store App – erweiterter SplashScreen

 

Beispiel: Erweiterter SplashScreen

 

Während App-Ressourcen noch initialisieren zeigt Windows den SplashScreen an. Sobald Ihre App für die Interaktion bereit wird dieser ausgeblendet. Sollte die Initialisierung länger als 2 Sekunden dauern, können Sie die Zeit mit dem erweiterten Begrüßungsbildschirm überbrücken.

Subjektiv wird der Ladevorgang kürzer wahrgenommen, wenn eine Animation zu sehen ist. Es muss ja nicht gleich der aktuelle Blockbuster sein aber Informatives aus Ihrer App oder zumindest einen ProgressRing bzw. eine ProgressBar.

Um eine Anpassung an die Vielzahl möglicher Bildschirmgrößen bzw. Auflösungen zu ermöglichen wird die Größe des Hintergrunds geändert und Ihr Bild skaliert. Um Artefakte und franzende Ränder zu vermeiden sollten Sie folgende Bilder im App-Manifest bereitstellen:

  • Assets\SplashScreen.scale-100.png entspricht 620 x 300px
  • Assets\SplashScreen.scale-140.png entspricht 868 x 420px Optional
  • Assets\SplashScreen.scale-180.png entspricht 1116 x 540px Optional

Weitere Information finden Sie im Kapitel Bildressourcen.

Der SplashScreen sowie die optionale Hintergrundfarbe werden in der
Package.appxmanifest-Datei festgelegt.

SplashScreen.Dismissed Über dieses Ereignis werden Sie Benachrichtigt nach dem das System sein Setup beim Starten Ihrer App vollzogen und der reguläre Begrüßungsbildschirm ausgeblendet wird. Z. B. um einen Feed aus dem Internet parallel zum weiten App-Logik-Verlauf zu laden.

Wenn Sie keine Farbe für Ihren SplashScreen-Hintergrund angeben, wird als Hintergrundfarbe die Hintergrundfarbe der Kachel verwendet.

Der erweiterte SplashScreen sollte genauso aussehen wie der von Windows angezeigte SplashScreen.

TIP Um optimale optische Ergebnisse zu erzielen verwenden Sie ein PNG-Bild dessen Hintergrundfarbe identisch ist wie mit der der SplashScreen-Hintergrundfarbe. Da i.d.R. Ränder besser im Grafikprogramm zu Hintergrund gezeichnet werden können.

TIP Behandeln Sie das Window.Current.SizeChanged-Ereignis um auf Geräte-Rotation oder App-Snapping zu reagieren um den erweiterten Splashscreen zu repositionieren.

NOGO Verwenden Sie den Begrüßungsbildschirm nicht zur Anzeige von Werbung, nicht zur Anzeige mehrerer unterschiedlicher Begrüßungsbildschirm-Bilder und nicht zur Anzeige einer Infoseite.

Erweiterter SplashScreen festlegen

1. Erstellen Sie eine Seite als Ansicht für Ihre App, die den unter Windows angezeigten Begrüßungsbildschirm imitiert. Zum Beispiel mit folgenden Elementen:

<Page x:Class="Ak.AppStudio.View.ErweiterterSplashScreen"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Background="#FF008AAA">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Canvas>
            <Image Name="ErweiterterSplashScreenImage" 
                   Source="/Assets/SplashScreen.png" />
        </Canvas>
        <ProgressBar Name="StatusBar"
                     Grid.Row="1"
                     Width="600"
                     Height="5"
                     Foreground="White"
                     Maximum="1000" />
    </Grid>
</Page>

2. Passen Sie die dazugehörige Codebehind-Datei wie folgt an:

public sealed partial class ErweiterterSplashScreen : Page {
    SplashScreen _SplashScreen;

    public ErweiterterSplashScreen(SplashScreen splashScreen) {
        _SplashScreen = splashScreen;

        InitializeComponent();

        Window.Current.SizeChanged += (obj, args) => {
            PositioniereErweiterterSplashScreen();
        };

        _SplashScreen.Dismissed += (obj, args) => {
            // Wird ausgelöst, wenn der Begrüßungsbildschirm 
            // der App geschlossen wird.
        };

        PositioniereErweiterterSplashScreen();

        // Simuliere Last
        var timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromMilliseconds(100);
        timer.Tick += (obj, args) => {
            StatusBar.Value += timer.Interval.Milliseconds;
            if (StatusBar.Value >= StatusBar.Maximum) {
                timer.Stop();
                NavigateToMainPage();
            }
        };
        timer.Start();
    }

    void PositioniereErweiterterSplashScreen() {
        if (_SplashScreen != null) {
            ErweiterterSplashScreenImage.SetValue(
                Canvas.LeftProperty, _SplashScreen.ImageLocation.X);
            ErweiterterSplashScreenImage.SetValue(
                Canvas.TopProperty, _SplashScreen.ImageLocation.Y);
        }
    }

    static void NavigateToMainPage() {
        var rootFrame = new Frame();
        rootFrame.Navigate(typeof(MainPage));
        Window.Current.Content = rootFrame;
    }
}

3. Fügen Sie der App.OnLaunched Code hinzu, um den erweiterte Begrüßungsbildschirm anzuzeigen.

protected override void OnLaunched(LaunchActivatedEventArgs args) {
    base.OnLaunched(args);

    if (args.PreviousExecutionState == ApplicationExecutionState.Running) {
        Window.Current.Activate();
        return;
    }

    var extendedSplash = new ErweiterterSplashScreen(args.SplashScreen);
    Window.Current.Content = extendedSplash;
    Window.Current.Activate();

}

4. Fertig!