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!

Windows Store App-Gestaltung

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

Windows Store Apps müssen als Vollbild-Anwendungen konzipiert werden da eine Fenster-Darstellung nicht mehr möglich ist. Im Grund ist das neue Windows 8 UI-Layout simpel. Nehmen Sie eine klassische Windows-Fenster-Anwendung und entfernen Sie davon jedes Pixel was kein Inhalt ist, Fertig!

Geben Sie Ihrem Inhalt den primären Fokus, nutzen Sie Ihren Inhalt zur Interaktion mit dem Benutzer und platzieren alles anderen in sekundäre Bereiche.

Ihre App sollte sich schnell und flüssig, sanft und nicht hart anfühlen.

Apps können mit allen Windows 8-Bildschirmgrößen ausgeführt werden. In der Regel haben größere Bildschirme auch höhere Auflösungen. Daher bieten diese einen größeren Anzeigebereich denn es gilt zu nutzen und zu kleineren Auflösungen abzugrenzen.

Sie sollten das Layout früh in die Planung Ihrer App einbeziehen. Unterschätzen Sie auch nicht den Aufwand für Anpassungen diverser Bildschirmauflösungen, Ansichten-Gestaltung und Animation die einen erheblichen Einfluss auf das Layout haben.

Eine Seite muss für verschiedene Ansichten mehrfach gestallt werden. Eine Ansicht ist die Art, in der sich der Inhalt an der UI anpasst in Abhängigkeit wie der Benutzer auf Ihre App zugreift. Zum Beispiel im Portrait-Format oder Ihre App ist an einer Seite angedockt. Eine App die mehrere Ansichten unterstützt, kann auf Geräten verschiedener Größen und Ausrichtungen verwendet werden, und der Benutzer kann den Inhalt entsprechend seinen Anforderungen und Vorlieben bearbeiten.

Viele dieser Faktoren werden beim Zertifizierungsverfahren für den Microsoft Store berücksichtigt.

Bildschirmskalierung

Für die Unterstützung aller Features, wie z. B. das Andocken ist eine Mindestauflösung von 1366x768px erforderlich.

Der Benutzer erwartet bei größeren Zoll-Auflösungen mehr Inhalt und Funktionalität.

Entwerfen Sie Ihre App so, dass alle UI-Elemente wie Navigation, Steuerelemente und Inhalte auf den Bildschirm passen, d. h. also für die Mindestauflösung von 1024x768px.

Entwerfen Sie Ihre App so, dass alle UI-Elemente ohne leere Flecke auf den Bildschirm passen, d. h. also für die Idealauflösung von 1366x768px.

Berücksichtigen Sie auf einem größeren Bildschirme Layout, Ästhetik, Proportionen und die Anordnung Ihrer Steuerelemente.

Statisches Layout Eine Möglichkeit ist das statische Layout. Dieses treffen Sie oft bei Spielen an die hauptsächlich aus Bitmap-Bildern bestehen. Hier mehr Inhalt anzuzeigen ist nicht möglich oder bringt vermutlich keinen Mehrwert. Windows 8 skaliert feste Layouts mit einem integrierten Verfahren automatisch bis zu maximal 200%.

Über die Eigenschaften .Canvas.Left und .Canvas.Top können Sie ihre UI Elemente in einem statischen Layout über X- und Y-Koordinaten genau positioniert.

Dynamisches Layout Diese zweite Möglichkeit sehen Sie häufig in Inhalt-Apps. Diese Layouts bestehen i.d.R. aus definierten proportionalen Elementen wie Kopfzeile, Fußzeile und in der Mitte einen Inhalts-Bereich. Dieses Layout ändert sich dynamisch und passt sich an verschiedenen Bildschirmgrößen an. Die Größe der Benutzeroberfläche wird automatisch an unterschiedliche Bildschirmauflösungen angepasst.

Zu den wichtigsten dynamischen Positions-Eigenschaften gehören .Width, .Height,.MinWidth,.MinHeight,.Margin,.Padding,.VerticalAlignment,.HorizontalAlignment` u.v.m.

Statisches Layout erstellen

1. Beginnen Sie mit den Basisauflösungen 1024×768 und 1366×768.

2. Platzieren Sie den festen Inhalt in eine ViewBox, um ein festes Layout auf den Bildschirm zu skaliert.

3. Legen Sie die Größen der ViewBox z.B. auf 1366x768px fest.

4. Platzieren Sie keine dynamischen Steuerelemente in die ViewBox, da sich diese Elemente automatisch an verschiedene Bildschirmgrößen anpassen.

5. Definieren Sie Stil & Farbe für das Portrait-Format.

6. Stellen Sie Vektor-Ressourcen oder Raster-Ressourcen mit hoher Auflösung bereit.

<Canvas Height="125" Margin="20">
    <Rectangle Canvas.Left="40" Canvas.Top="20" Fill="Yellow" Width="75" Height="75" />
</Canvas>

Dynamisches Layout erstellen

1. Bestimmen Sie für jede Zelle, die Sie als in horizontaler oder vertikaler Richtung dynamisch identifiziert haben, wie das App-Layout diese Fläche auf einem größeren Bildschirm nutzen soll.

2. Bestimmen Sie das Layout-Drahtmodell, hier sollten die Positionen der Bereiche für Kopfzeile, Navigation und Inhalt hervorgehen.

3. Bestimmen Sie, welche Teile des Layout statisch bzw. dynamisch sind.

4. Ein ListView oder GridView füllt automatisch die verfügbare Fläche mit weiteren Elementen.

5. Verwenden Sie für Text gegebenenfalls ein mehrspaltiges Layout.

6. Verwenden Sie gegebenenfalls für Bilder ein Canvas, da dieses automatisch erweitert wird, um die verfügbare Fläche auszufüllen.

7. Zeigen Sie mehr Leerraum oder zeigen Sie mehr von der App.

Für ein dynamisches Layout nutzen Sie u.a. die Steuerelemente StackPanel, Grid, GridView und ListView, zum Beispiel:

<StackPanel Orientation="Horizontal">
    <Rectangle Fill="Fuchsia" Width="50" Height="50" Margin="10" />
    <Rectangle Fill="Honeydew" Width="50" Height="50" Margin="10" />
    <Rectangle Fill="Orange" Width="50" Height="50" Margin="10" />
</StackPanel>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="40" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="65" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" Grid.Row="0" Text="Z1 | S1"/>
    <TextBox Grid.Column="1" Grid.Row="0" Text="Z1 | S2"/>
    <TextBox Grid.Column="0" Grid.Row="1" Text="Z2 | S1"/>
    <TextBox Grid.Column="1" Grid.Row="1" Text="Z2 | S2"/>
    <TextBox Grid.Row="2" Grid.ColumnSpan="2" Text="Z3 | S1-2"/>
    <TextBox Grid.Column="3" Grid.RowSpan="3" Text="Z1-3 | S3"/>
</Grid>

Ansichten

Angedockte Ansichten (Snapped) und gefüllte Ansichten (Filled) sind nur für Displays mit einer horizontalen Mindestauflösung von 1366px verfügbar.

Der Benutzer kann mit Ihrer App im Querformat(Lanscape), Hochformat (Portrait) oder mit zwei Apps gleichzeitig arbeiten (Filled und Snapped).
Um diese vier Zustände (ViewStates) bedienen zu können, kann Ihre App verschieden Layouts bevorraten oder eins entsprechend modifizieren.

Weitere Informationen finden Sie auch im Kapitel ApplicationViewState.

Lanscape Querformat und i. d. R. die meistbenutzte Ansicht.

Portrait Hochformat

Filled Die App füllt den verbleibenden Bildschirmbereich aus, der nicht von der angedockten App belegt wird. Kann nur im Querformat genutzt werden. Diesem Layout stehen min. 1024px Breite zur Verfügung.

Snapped Die App wird am linken oder rechten Rand angedockt. Kann nur im Querformat genutzt werden. Diesem Layout stehen min. 320px Breite zur Verfügung.

TIP Bei der angedockten App handelt es sich um keine Gadget-Version Ihrer App, daher sollten Sie für den Benutzer Status, Kontext und die Interaktivität aufrechterhalten.

TIP Sorgen Sie für Feature-Parallelität in den verschiedenen Zuständen.

TIP Geben Sie den Benutzern die Kontrolle, d.h. docken Sie die App nicht programmgesteuert ab.

TIP Nutzen Sie das hohe Seitenverhältnis des angedockten Layouts für vertikale Verschiebungen Ihres Inhaltes.

TIP Angesichts der geringen Breite von 320 Pixel im angedockten Zustand sollten Sie vom mehrspaltigen Layout zum einspaltigen Layout übergehen.

Vektor- und Raster-Ressourcen

Vektor-Ressourcen (z.B. SVG, XAML) werden ohne Skalierungsartefakte oder Verschwimmen skaliert.

Raster-Ressourcen (z.B. BMP) werden mit Skalierungsartefakte oder Verschwimmen skaliert. Stellen Sie Bilder bereit, die doppelt so groß sind wie die Designgröße um beim automatischen vergrößern nicht verpixelt zu wirken oder geben mehrere Bilder mit unterschiedlichen Auflösungen an. Mehr darüber erfahren Sie im Kapitel Bild-Ressource.

Testen des App-Layouts

In Visual Studio über den Windows Simulator und im XAML Designer in der Geräte-Ansicht können Sie diverse Auflösungen und Ansichten testen.

In Blend über den XAML Designer und in der Geräte-Ansicht.