Udostępnij za pośrednictwem

Kontrolka paska przewijania z adnotacjami

Pasek przewijania z adnotacjami ułatwia użytkownikom łatwe poruszanie się po dużej kolekcji elementów. Zastępuje domyślny pasek przewijania i może być używany w połączeniu z dowolnym kontenerem przewijanym. Ten pionowy pasek przewijania pozwala użytkownikom na przewijanie w górę i w dół po elementach w kolekcji. Użytkownicy mogą wyświetlać etykiety kategorii wzdłuż obszaru paska przewijania, aby udostępnić wizualne odwołanie do lokalizacji, w której znajdują się w swojej kolekcji. Wskaźnik przesuwania (linia wyróżniająca) wskazuje bieżącą pozycję użytkownika w kolekcji. Etykietka narzędzia jest ujawniana, gdy użytkownik najecha kursorem na obszar paska przewijania. To pole narzędzia zawiera etykietę, aby informować użytkownika o jego bieżącej pozycji w kolekcji. Strzałki przewijania znajdują się w górnej i dolnej części obszaru paska przewijania. Mogą służyć do przesuwania bieżącej pozycji o niewielki przyrost.

Zrzut ekranu przedstawiający pasek przewijania z adnotacjami w aplikacji Zdjęcia.

Aby odtworzyć doświadczenie galerii zdjęć, można użyć annotowanego paska przewijania w połączeniu z kontrolką ItemsView. Etykiety kategorii można ustawić na różne lata, aby ułatwić użytkownikom przechodzenie do określonej lokalizacji w ramach kolekcji zdjęć.

Interakcje

Po umieszczeniu wskaźnika myszy zostanie wyświetlona etykietka narzędzia w celu wyświetlenia podglądu tej lokalizacji. Użytkownicy mogą następnie kliknąć, aby przejść do tej konkretnej lokalizacji. Użytkownicy mogą również klikać i przeciągać w dowolnym miejscu w obszarze paska przewijania, aby przejść do nowej pozycji w swojej kolekcji. Podczas przeciągania wskaźnik przesuwania pozostaje przymocowany do kursora myszy, a zawartość przewija się, aby odzwierciedlić nową pozycję. Użytkownicy mogą również przewijać swoją kolekcję za pomocą kółka myszy. Przewijanie w górę lub w dół kółkiem myszy zmienia pozycję elementu w kolekcji oraz odpowiadającego wskaźnika przesuwania w górę lub w dół o stałą wartość.

Uwaga / Notatka

W przeciwieństwie do kontrolki ScrollBar nie można klikać i przeciągać kciuka. Kciuk jest elementem nieinterakcyjnym, który służy tylko do wizualizowania aktualnej pozycji okna przeglądarki. Kciuk ma stałą wysokość, która nie jest reprezentatywna dla wysokości widoku.

Funkcjonowanie etykiety

  • W przypadku środowisk zoptymalizowanych pod kątem interakcji dotykowych użytkownicy mogą nacisnąć i trzymać obszar paska przewijania, żeby zobaczyć podpowiedź. Etykietka narzędzia będzie nieco bardziej podwyższona, aby ułatwić odczytywanie dla użytkowników dotykowych. Naciśnięcie i przeciągnięcie w dowolnym miejscu w obszarze paska przewijania będzie działać podobnie jak kliknięcie i przeciągnięcie myszą.
  • Etykietka narzędzia nigdy nie jest obcięta, ponieważ jej celem jest wyświetlenie tekstu objaśnianego. Zamiast tego tekst jest zawijany, jeśli przekroczy maksymalną szerokość etykietki narzędzia 360 pikseli.
  • Etykiety kategorii są obcinane, gdy tekst jest dłuższy niż szerokość obszaru paska przewijania.
  • W przypadku kolizji między dwiema etykietami kategorii (na przykład gdy rozmiar okna się zmniejsza, a dwie etykiety nakładają się na siebie), etykieta górna zostanie usunięta. Jako wyjątek od tej reguły pierwsza etykieta kolekcji jest zawsze przechowywana, ponieważ pomaga wskazać zakres kolekcji użytkownikom. Etykiety kategorii powinny zawsze mieć co najmniej 4px (2px powyżej, 2px poniżej) między etykietami, aby nie doszło do kolizji etykiet.

Czy jest to właściwa kontrola?

Zalecamy używanie paska przewijania z adnotacjami, a nie domyślnego paska przewijania w przypadku obsługi dużej kolekcji elementów lub dużej ilości przewijania. Pasek przewijania z adnotacjami umożliwia użytkownikom łatwe znajdowanie się w swojej kolekcji i przechodzenie przez nią.

W przypadku kolekcji, które mają tylko kilka elementów lub które wymagają tylko niewielkiej ilości przewijania, zalecamy użycie domyślnego paska przewijania.

Rekomendacje

  • Dodaj etykietę kategorii tylko wtedy, gdy zawiera przydatne informacje dla użytkowników
  • Zachowaj ciągi używane dla etykiet kategorii i podpowiedzi tak zwięzłe, jak to możliwe
  • Pasek przewijania z adnotacjami najlepiej używać, gdy jest wystarczająca ilość miejsca w pionie. Użycie oznaczonego paska przewijania w ograniczonym obszarze pionowym spowoduje zmniejszenie liczby widocznych etykiet
  • Nie używaj paska przewijania z adnotacjami jako jedynego sposobu, aby użytkownicy znajdowali się w kolekcji. Zalecamy używanie przyklejonych nagłówków lub etykiet kategorii w całej kolekcji, aby uzupełnić pasek przewijania z adnotacjami.

Tworzenie paska przewijania z adnotacjami

Otwórz aplikację Galeria WinUI 3 i zobacz akcję AnnotatedScrollBar

Ikona galerii WinUI 3 Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Aby użyć elementu AnnotatedScrollBar, należy wykonać kilka kroków:

  • Połącz pasek AnnotatedScrollBar z kontenerem przewijania.
  • Dodaj etykiety do paska przewijania.
  • Dodaj dodatkowe opisy (podpowiedzi).

Podłącz AnnotatedScrollBar do kontenera do przewijania

Aby użyć elementu AnnotatedScrollBar, połącz go z kontenerem przewijanym za pośrednictwem interfejsu IScrollController. Element AnnotatedScrollBar udostępnia implementację IScrollController za pośrednictwem właściwości ScrollController , podczas gdy element ScrollView używa jej przez właściwość ScrollPresenter (w szczególności ScrollPresenter.VerticalScrollController).

Uwaga / Notatka

Kontrolka ScrollView ma wbudowaną obsługę korzystania z interfejsu IScrollController. W przypadku innych kontenerów przewijania, takich jak ScrollViewer, należy napisać adapter dla elementu IScrollController. Zobacz przykład w dalszej części tego artykułu.

W tym miejscu właściwość VerticalScrollController elementu ItemsView jest powiązana z elementem ScrollController elementu AnnotatedScrollBar. (Właściwość ItemsView.VerticalScrollPresenter jest przekazywana do wartości ScrollPresenter.VerticalScrollController wewnętrznego ScrollView w ItemsView).

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

Można je również połączyć w kodzie, jak pokazano tutaj. W tym przykładzie element ScrollView służy do opakowania elementu ItemsRepeater i zapewniania dla niego funkcji przewijania. AnnotatedScrollBar zastępuje domyślny pasek przewijania 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;
}

Etykiety

Pasek AnnotatedScrollBar może wyświetlać dwa rodzaje etykiet, które są opcjonalne.

Etykiety kategorii

Etykiety można dodawać, wypełniając kolekcję Labels . Każda etykieta jest reprezentowana przez klasę AnnotatedScrollBarLabel i wymaga dwóch informacji:

  • Zawartość: zawartość wyświetlana na pasku przewijania.
  • ScrollOffset: wartość przesunięcia, w której jest wyświetlana zawartość etykiety.

Etykiety (jeśli określono) są zawsze widoczne na pasku przewijania, chyba że zderzają się z innymi etykietami lub wykraczają poza granice toru. (Zobacz Zachowanie etykiety , aby uzyskać więcej informacji).

Obliczanie wartości przesunięcia etykiety w dużej mierze zależy od szczegółów aplikacji i jej danych. Aby uzyskać przykład sposobu obliczania przesunięcia, zobacz przykład galerii WinUI 3 w witrynie GitHub.

Etykiety szczegółowe

Etykieta szczegółów jest elementem etykietki narzędzia, który jest wyświetlany, gdy kursor znajduje się na pasku przewijania. Aby utworzyć etykietę szczegółów, należy obsłużyć zdarzenie DetailLabelRequested. Argumenty zdarzenia udostępniają element ScrollOffset, w którym zostanie wyświetlona etykieta narzędzia. Użyj tej wartości, aby określić poprawną etykietę, która ma być wyświetlana dla tej pozycji, i ustawić etykietę jako właściwość Content argumentów zdarzenia.

Przewijanie

Użytkownik może przewinąć pasek AnnotatedScrollBar, klikając przyciski strzałek w górnej i dolnej części paska przewijania. Możesz ustawić właściwość SmallChange , aby określić ilość, za pomocą której przyciski strzałek przewijają zawartość.

Możesz obsłużyć zdarzenie Przewijanie , aby określić sposób wykonywania przewijania, podjąć akcję podczas przewijania lub anulować akcję przewijania.

Pobieranie przykładowego kodu

  • Last updated on