Kommentiertes Bildlaufleisten-Steuerelement

Eine kommentierte Bildlaufleiste hilft Benutzern, einfach durch eine große Sammlung von Elementen zu navigieren. Es ersetzt die Standard-Bildlaufleiste und kann in Verbindung mit jedem scrollbaren Container verwendet werden. Mit dieser vertikalen Bildlaufleiste können Benutzer durch die Elemente in einer Sammlung nach oben und unten scrollen. Benutzer können Kategoriebeschriftungen entlang des Bildlaufleistenbereichs anzeigen, um einen visuellen Verweis darauf bereitzustellen, wo sie sich in ihrer Sammlung befinden. Ein Verschiebungsindikator (Linie in Akzentfarbe) gibt die aktuelle Position des Benutzers in der Sammlung an. Eine Quick-Info wird angezeigt, wenn ein Benutzer auf den Bildlaufleistenbereich zeigt. Diese Tooltip enthält ein Label, um dem Benutzer weitere Informationen zu seiner aktuellen Position in der Sammlung zu geben. Scrollpfeile befinden sich am oberen und unteren Rand des Scrollbereichs. Sie können verwendet werden, um die aktuelle Position um einen kleinen Schritt zu verschieben

Die annotierte Bildlaufleiste kann in Verbindung mit einem ItemsView-Steuerelement verwendet werden, um ein Fotogalerie-Erlebnis neu zu erstellen. Die Kategoriebeschriftungen können auf unterschiedliche Jahre festgelegt werden, damit Benutzer innerhalb ihrer Fotosammlung zu einem bestimmten Ort navigieren können.

Interaktionen

Beim Zeigen mit der Maus wird ein Tooltip angezeigt, um eine Vorschau der Position anzuzeigen. Benutzer können dann klicken, um zu diesem bestimmten Speicherort zu navigieren. Benutzer können auch auf den Bildlaufleistenbereich klicken und an eine beliebige Stelle ziehen, um zu einer neuen Position in ihrer Sammlung zu navigieren. Während sie ziehen, bleibt die Schwenkanzeige mit dem Mauscursor verbunden, und der Inhalt wird gescrollt, um die neue Position anzuzeigen. Benutzer können auch mit dem Mausrad durch ihre Sammlung scrollen. Wenn Sie mit dem Mausrad nach oben oder unten scrollen, wird ihre Position in der Sammlung und die entsprechende Verschiebungsanzeige um einen festen Betrag nach oben oder unten verschoben.

Etikettenverhalten

• Für eine für die Toucheingabe optimierte Erfahrung können Benutzer auf den Bildlaufbereich tippen und gedrückt halten, um den Tooltip anzuzeigen. Die Quickinfo wird etwas angehoben, um die Lesbarkeit für Benutzer mit Touch-Eingaben zu verbessern. Das Tippen und Ziehen an eine beliebige Stelle im Bildlaufleistenbereich funktioniert ähnlich wie beim Klicken und Ziehen mit der Maus.
• Die Quick-Info-Beschriftung wird nie abgeschnitten, da der Zweck darin besteht, Text anzuzeigen, der erläuternd ist. Stattdessen wird der Text umgebrochen, wenn er die maximale Breite des Tooltips von 360px überschreitet.
• Kategoriebeschriftungen werden beschnitten, wenn der Text länger als die Breite des Scrollbereichs der Bildlaufleiste ist.
• Wenn es eine Kollision zwischen zwei Kategoriebeschriftungen gibt (z. B. wenn sich die Fenstergröße verringert und zwei Beschriftungen sich gegenseitig überlappen), wird die obere Beschriftung entfernt. Als Ausnahme von dieser Regel gilt die erste Bezeichnung der Sammlung, die immer beibehalten wird, da sie hilft, den Bereich der Sammlung für Benutzer anzugeben. Kategoriebeschriftungen sollten immer mindestens 4px (2px darüber, 2px darunter) dazwischen aufweisen, andernfalls wird ein Bezeichnungskonflikt ausgelöst.

Ist dies das richtige Steuerelement?

Es wird empfohlen, eine kommentierte Bildlaufleiste anstelle einer Standard-Bildlaufleiste zu verwenden, wenn eine große Sammlung behandelt wird oder wenn viel gescrollt werden muss. Die kommentierte Bildlaufleiste bietet Benutzern eine einfache Möglichkeit, sich in ihrer Sammlung zurecht zu finden und sie zu durchlaufen.

Für Sammlungen, die nur wenige Elemente enthalten oder nur einen kleinen Bildlauf erfordern, empfehlen wir die Verwendung einer Standard-Scrollleiste.

Recommendations

• Fügen Sie nur Kategoriebezeichnungen hinzu, wenn sie hilfreiche Informationen für Benutzer bereitstellen
• Halten Sie die Zeichenfolgen für die Kategoriebeschriftungen und den Tooltip so kurz wie möglich.
• Die kommentierte Bildlaufleiste wird am besten verwendet, wenn genügend vertikaler Platz vorhanden ist. Die Verwendung der kommentierten Bildlaufleiste in einem begrenzten vertikalen Raum reduziert die Anzahl der sichtbaren Beschriftungen
• Verwenden Sie die kommentierte Bildlaufleiste nicht als einzige Möglichkeit für Benutzer, sich innerhalb einer Sammlung zurecht zu finden. Wir empfehlen die Verwendung von Kurzüberschriften oder Kategoriebeschriftungen in der gesamten Sammlung, um die kommentierte Bildlaufleiste zu ergänzen.

Erstellen einer kommentierten Bildlaufleiste

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

Um eine AnnotatedScrollBar (eine kommentierte Bildlaufleiste) zu verwenden, müssen Sie mehrere Schritte ausführen:

• Verbinden Sie den AnnotatedScrollBar mit einem Bildlaufcontainer.
• Fügen Sie der Bildlaufleiste Beschriftungen hinzu.
• Fügen Sie Detailbeschriftungen (Quick-Infos) hinzu.

Verbinden Sie den AnnotatedScrollBar mit dem Bildlaufcontainer

Um einen AnnotatedScrollBar zu verwenden, wird er über die IScrollController-Schnittstelle mit einem scrollbaren Container verbunden. Der AnnotatedScrollBar stellt eine IScrollController-Implementierung über die ScrollController-Eigenschaft bereit, während die ScrollView sie über seine ScrollPresenter-Eigenschaft verwendet (insbesondere ScrollPresenter.VerticalScrollController).

Hier ist die VerticalScrollController-Eigenschaft eines ItemsView-Elements an den ScrollController der AnnotatedScrollBar gebunden. (Die ItemsView.VerticalScrollPresenter-Eigenschaft wird an den ScrollPresenter.VerticalScrollController-Wert der inneren ScrollView von ItemsView übergeben.)

<Grid ColumnDefinitions="*,Auto">
    <ItemsView VerticalScrollController="{x:Bind annotatedScrollBar.ScrollController}"/>
    <AnnotatedScrollBar x:Name="annotatedScrollBar" Grid.Column="1"/>
</Grid>

Sie können sie auch, wie hier gezeigt, im Code verbinden. In diesem Beispiel wird ein ScrollView verwendet, um einen ItemsRepeater zu umschließen und Bildlauffunktionen dafür bereitzustellen. Der AnnotatedScrollBar ersetzt die Standard-Bildlaufleiste von ScrollView.

<Grid ColumnDefinitions="*, Auto">
    <ScrollView x:Name="scrollView"
                Background="LightGray" 
                MaxWidth="800" MaxHeight="500"
                VerticalScrollBarVisibility="Hidden">
        <ItemsRepeater x:Name="itemsRepeater"
                ItemsSource="{x:Bind ColorCollection}"
                Margin="2"
                SizeChanged="ItemsRepeater_SizeChanged">
            <ItemsRepeater.Layout>
                <UniformGridLayout/>
            </ItemsRepeater.Layout>
            <ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="media:SolidColorBrush">
                    <Grid Background="{x:Bind}" Width="112" Height="82" 
                          CornerRadius="4" Margin="4"/>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>
    </ScrollView>
                
    <AnnotatedScrollBar x:Name="annotatedScrollBar" Grid.Column="1"
        Margin="4,0,48,0" MaxHeight="500" HorizontalAlignment="Right"
        DetailLabelRequested="AnnotatedScrollBar_DetailLabelRequested"/>
</Grid>

private void AnnotatedScrollBarPage_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    scrollView.ScrollPresenter.VerticalScrollController = annotatedScrollBar.ScrollController;
}

Labels

Der AnnotatedScrollBar kann zwei Arten von Bezeichnungen anzeigen, die beide optional sind.

Kategoriebeschriftungen

Sie fügen Bezeichnungen hinzu, indem Sie die Bezeichnungssammlung auffüllen. Jede Bezeichnung wird durch die AnnotatedScrollBarLabel-Klasse dargestellt und erfordert zwei Informationen:

• Inhalt: Der Inhalt, der auf der Bildlaufleiste angezeigt wird.
• ScrollOffset: Der Offsetwert, bei dem der Beschriftungsinhalt angezeigt wird.

Beschriftungen (wenn angegeben) sind immer auf dem Scrollbalken sichtbar, es sei denn, sie kollidieren mit anderen Beschriftungen oder reichen über die Grenzen der Schiene hinaus. (Siehe Label-Verhalten für weitere Informationen.)

Die Berechnung des Beschriftungsoffsetwerts hängt von den Details Ihrer App und deren Daten ab. Ein Beispiel für die Berechnung des Offsets finden Sie im Beispiel WinUI 3 Gallery in GitHub.

Detailbeschriftungen

Eine Detailanzeige ist ein Tooltip, das angezeigt wird, wenn sich der Cursor über der Bildlaufleiste befindet. Zum Erstellen einer Detailbeschriftung bearbeiten Sie das DetailLabelRequested-Ereignis. Die Ereignisargumente stellen den ScrollOffset bereit, wo das Tooltip-Label angezeigt wird. Verwenden Sie diesen Wert, um die richtige Bezeichnung zu bestimmen, die für diese Position angezeigt werden soll, und legen Sie die Bezeichnung als Inhaltseigenschaft der Ereignisargumente fest.

Scrollen

Der Benutzer kann die AnnotatedScrollBar scrollen, indem er die Pfeilschaltflächen oben und unten in der Bildlaufleiste anklickt. Sie können die SmallChange-Eigenschaft festlegen, um den Betrag anzugeben, um den die Pfeilschaltflächen den Inhalt scrollen.

Sie können das Scrolling-Ereignis behandeln, um zu bestimmen, wie das Scrollen ausgeführt wird, eine Aktion bei Auftreten des Scrollens auszuführen oder die Bildlaufaktion abzubrechen.

Holen Sie sich den Beispielcode

• WinUI 3 Gallery-Beispiel – Alle XAML-Steuerelemente in einem interaktiven Format anzeigen.

Zugehörige Themen

• ScrollView-Klasse