Freigeben über

Fortschrittskontrollen

Ein Fortschrittsanzeige bietet dem Benutzer die Rückmeldung, dass ein länger andauernder Vorgang ausgeführt wird. Dies kann bedeuten, dass der Benutzer nicht mit der App interagieren kann, wenn die Statusanzeige sichtbar ist. Außerdem kann er je nach verwendeter Anzeige angeben, wie lange die Wartezeit sein könnte.

Fortschrittsarten

Es gibt zwei Steuerelemente, um dem Benutzer anzuzeigen, dass ein Vorgang ausgeführt wird – entweder über eine ProgressBar oder über ein ProgressRing. Sowohl ProgressBar als auch ProgressRing haben zwei Zustände, die zeigen, ob der Benutzer mit der Anwendung interagieren kann oder nicht.

  • Der Status bestimmt der ProgressBar- und ProgressRing-Steuerelemente gibt an, zu welchem Prozentsatz eine Aufgabe abgeschlossen ist. Dieses Element sollte für Vorgänge verwendet werden, deren Dauer bekannt ist, deren Fortschritt jedoch nicht die Interaktion des Benutzers mit der App blockieren sollte.
  • Der Status unbestimmt des ProgressBar-Steuerelements gibt an, dass ein Vorgang ausgeführt wird, der die Interaktion des Benutzers mit der App nicht blockiert und dessen Abschlusszeit nicht bekannt ist.
  • Der unbestimmte Status des ProgressRing-Elements zeigt an, dass ein Vorgang im Gange ist, der die Benutzerinteraktion mit der App verhindert und dessen Fertigstellungszeitpunkt unbekannt ist.

Eine Fortschrittsanzeige ist zusätzlich schreibgeschützt und nicht interaktiv. Dies bedeutet, dass der Benutzer diese Steuerelemente nicht direkt aufrufen oder verwenden kann.

Steuerung Display
Unbestimmtes ProgressBar-Element ProgressBar – unbestimmt
Festgelegter Fortschrittsbalken ProgressBar – determiniert
Indeterminater Fortschrittsring ProgressRing-Status „unbestimmt“
Definierter Fortschrittsring „Determinate“ ProgressRing-Status

Ist dies das richtige Steuerelement?

Es ist nicht immer offensichtlich, welches Steuerelement oder welcher Status (bestimmt oder unbestimmt) verwendet werden soll, wenn versucht wird, etwas anzuzeigen. Manchmal ist eine Aufgabe so deutlich zu erkennen, dass kein Statussteuerelement erforderlich ist. Manchmal ist jedoch auch bei Verwendung eines Statussteuerelements eine Textzeile erforderlich, die den Benutzer darüber informiert, welcher Vorgang gerade ausgeführt wird.

Fortschrittsbalken

  • Verfügt das Steuerelement über eine festgelegte Dauer oder ein vorhersehbares Ende?

    Verwenden Sie dann einen bestimmten Fortschrittsbalken und passen Sie den Prozentsatz oder Wert entsprechend an.

  • Kann der Benutzer fortfahren, ohne den Status des Vorgang zu überwachen?

    Bei Verwendung eines ProgressBar-Elements ist die Interaktion nicht blockierend. Das bedeutet in der Regel, dass der Benutzer durch den Abschluss des Vorgangs nicht blockiert wird und die App in anderer Weise weiterhin nutzen kann, bis dieser Aspekt abgeschlossen ist.

  • Schlüsselwörter

    Wenn der anzuzeigende Vorgang sich mit den folgenden Schlüsselwörtern in Verbindung bringen lässt oder wenn Sie während des Vorgangs Text anzeigen möchten, in dem diese Schlüsselwörter vorkommen, sollten Sie ein ProgressBar-Element verwenden:

    • Wird geladen...
    • Wird abgerufen...
    • In Bearbeitung...

Fortschrittsring

  • Muss der Benutzer den Abschluss des Vorgangs abwarten, bevor er seine Aktivität fortsetzen kann?

    Wenn ein Vorgang eine vollständige oder weitgehende Interaktion mit der App erfordert, bis er abgeschlossen ist, dann ist die Verwendung eines unbestimmten ProgressRing-Steuerelements empfehlenswert.

    • Verfügt das Steuerelement über eine festgelegte Dauer oder ein vorhersehbares Ende?

    Verwenden Sie ein bestimmtes ProgressRing-Steuerelement, wenn das visuelle Objekt ein Ring statt eines Balkens sein soll, und aktualisieren Sie den Prozentsatz oder Wert entsprechend.

  • Wartet die App darauf, dass der Benutzer eine Aufgabe ausführt?

    Falls dies der Fall ist, verwenden Sie einen unbestimmten ProgressRing, um auf eine ungewisse Wartezeit für den Benutzer hinzuweisen.

  • Schlüsselwörter

    Wenn der anzuzeigende Vorgang sich mit den folgenden Schlüsselwörtern in Verbindung bringen lässt oder wenn Sie während des Vorgangs Text anzeigen möchten, in dem diese Schlüsselwörter vorkommen, sollten Sie ein ProgressRing-Element verwenden:

    • Aktualisieren
    • Anmelden...
    • Verbinden...

Keine Statusanzeige erforderlich

  • Müssen Benutzer wissen, dass Vorgänge ausgeführt werden?

    Wenn die App z. B. im Hintergrund einen Download ausführt, der nicht vom Benutzer eingeleitet wurde, ist es auch nicht unbedingt erforderlich, den Benutzer darüber zu informieren.

  • Wird der Vorgang im Hintergrund ausgeführt, ohne die Aktivitäten des Benutzers zu blockieren, und ist er für Benutzer von geringem Interesse, aber nicht völlig irrelevant?

    Verwenden Sie Text, wenn Ihre App Aufgaben ausführt, die nicht immer sichtbar sein müssen, der Status aber dennoch angezeigt werden muss.

  • Möchte der Benutzer nur über den Abschluss des Vorgangs informiert werden?

    Manchmal ist es am besten, nur auf den Abschluss eines Vorgangs hinzuweisen oder den unmittelbaren Abschluss des Vorgangs durch ein visuelles Element anzukündigen, und den restlichen Vorgang im Hintergrund auszuführen.

Bewährte Methoden für Fortschrittssteuerelemente

Manchmal ist es am besten, visuelle Darstellungen zu verwenden, um zu erkennen, wann und wo diese verschiedenen Fortschrittssteuerungen eingesetzt werden sollen.

ProgressBar – determiniert

Beispiel für eine determinierte Fortschrittsanzeige

Das erste Beispiel ist die determinierte ProgressBar. Wenn die Dauer des Vorgangs bekannt ist, beispielsweise bei der Installation, beim Herunterladen, bei der Einrichtung usw., ist ein bestimmter Fortschrittsbalken am besten geeignet.

ProgressBar – Unbestimmt

Unbestimmtes ProgressBar-Beispiel

Wenn nicht bekannt ist, wie lange der Vorgang dauern wird, verwenden Sie eine unbestimmte Fortschrittsanzeige. Unbestimmte Fortschrittsbalken sind auch gut geeignet für das Füllen einer virtualisierten Liste und um einen fließenden visuellen Übergang zwischen einem unbestimmten und einem bestimmten Fortschrittsbalken zu schaffen.

  • Befindet sich der Vorgang in einer virtualisierten Sammlung?

    Platzieren Sie in diesem Fall keine Fortschrittsanzeige bei jedem Listenelement, wenn es erscheint. Verwenden Sie stattdessen einen Fortschrittsbalken und platzieren Sie ihn oben in der Sammlung der geladenen Elemente, um zu zeigen, dass die Elemente abgerufen werden.

ProgressRing – unbestimmt

Beispiel für ein ProgressRing-Steuerelement im unbestimmten Modus

Unbestimmte ProgressRing-Elemente werden verwendet, wenn jegliche Benutzerinteraktion mit der App ausgesetzt ist oder die App auf eine Benutzereingabe wartet, um den Vorgang fortzusetzen. Das Beispiel „Anmelden...“ ist ein optimales Szenario für das ProgressRing-Steuerelement, da der Benutzer die App erst weiterverwenden kann, nachdem der Anmeldevorgang abgeschlossen ist.

ProgressRing – Deterministisch

Beispiel für ein determiniertes ProgressRing

Wenn die Dauer des Vorgangs bekannt ist und Sie den Ring als visuelle Anzeige wünschen, etwa beim Installieren, Herunterladen oder Einrichten, eignet sich am besten ein determiniertes ProgressRing-Steuerelement.

Fortschrittsanzeige erstellen

Öffnen Sie die WinUI Gallery-App und schauen Sie sich die ProgressBar oder den ProgressRing an.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Beide Fortschrittssteuerungen sind ziemlich einfach; jedoch sind einige visuelle Details der Steuerelemente nicht offensichtlich individuell anpassbar.

Größe des ProgressRings anpassen

Die Größe des ProgressRings kann beliebig gewählt werden, die maximale Größe beträgt jedoch 20 x 20 Pixel. Um die Größe eines ProgressRing-Elements zu ändern, müssen Sie dessen Höhe und Breite festlegen. Wenn nur die Höhe oder Breite festgelegt ist, geht das Steuerelement von der Mindestgröße (20 x 20 Pixel) aus. Wenn hingegen für Höhe und Breite zwei unterschiedliche Größen festgelegt sind, wird die kleinere der Größen angenommen. Um sicherzustellen, dass Ihr ProgressRing für Ihre Bedürfnisse korrekt ist, legen Sie für die Höhe und die Breite denselben Wert fest:

<ProgressRing Height="100" Width="100"/>

Um Ihren ProgressRing sichtbar zu machen und zu animieren, müssen Sie die IsActive-Eigenschaft auf „true“ setzen.

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Färbung der Fortschrittssteuerelemente

Standardmäßig wird die Hauptfarbe der Fortschrittssteuerelemente auf die Akzentfarbe des Systems festgelegt. Wenn Sie diesen Pinsel außer Kraft setzen möchten, ändern Sie einfach die Vordergrundeigenschaft eines der Steuerelemente.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

Durch das Ändern der Vordergrundfarbe des ProgressRing-Elements ändert sich die Füllfarbe des Rings. Die Vordergrundeigenschaft der ProgressBar ändert die Füllfarbe der Leiste. Um den nicht ausgefüllten Teil der Leiste zu ändern, überschreiben Sie einfach die Hintergrund-Eigenschaft.

Anzeigen eines Wartecursors

Manchmal ist es am besten, nur kurz einen Wartecursor anzuzeigen, wenn eine App oder ein Vorgang etwas Zeit erfordert und Sie dem Benutzer anzeigen müssen, dass mit der App oder dem Bereich, in dem sich der Wartecursor befindet, bis zu dessen Ausblenden nicht interagiert werden sollte.

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

UWP und WinUI für UWP

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

Die Fortschrittssteuerelemente für UWP-Apps sind als Teil von WinUI für UWP enthalten. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter WinUI für UWP. APIs für dieses Steuerelement sind in den Namespaces "Windows.UI.Xaml.Controls " und "Microsoft.UI.Xaml.Controls " vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI für UWP , um die aktuellsten Stile, Vorlagen und Features für alle Steuerelemente abzurufen. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Um den Code in diesem Artikel mit WinUI 2 zu verwenden, verwenden Sie einen Alias in XAML (wir verwenden muxc), um die Windows-UI-Bibliotheks-APIs darzustellen, die in Ihrem Projekt enthalten sind. Weitere Informationen finden Sie unter "Erste Schritte mit WinUI 2 ".

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ProgressBar />
<muxc:ProgressRing />
  • Last updated on