Sdílet prostřednictvím

Posuvníkový ovládací prvek s poznámkami

Posuvník s poznámkami pomáhá uživatelům snadno procházet velkou kolekci položek. Nahradí výchozí posuvník a dá se použít ve spojení s libovolným posuvným kontejnerem. Tento svislý posuvník umožňuje uživatelům procházet položky v kolekci nahoru a dolů. Uživatelé můžou zobrazit popisky kategorií v oblasti posuvníku a poskytnout tak vizuální odkaz na to, kde jsou v kolekci. Indikátor posouvání (zvýrazněná čára) označuje aktuální pozici uživatele v kolekci. Popis se zobrazí, když uživatel najede myší na oblast posuvníku. Tento nástrojový tip obsahuje štítek, který uživateli poskytne více informací o jeho aktuální pozici v kolekci. Šipky posuvníku se nacházejí v horní a dolní části oblasti posuvníku. Lze je použít k přesunutí aktuální pozice o malý přírůstek.

Snímek obrazovky znázorňující anotovaný posuvník v aplikaci Fotky

Anotovaný posuvník lze použít ve spojení s ovládacím prvku ItemsView k opětovnému vytvoření prostředí galerie fotografií. Popisky kategorií se dají nastavit na různé roky, aby uživatelům pomohly přejít na konkrétní místo v kolekci fotek.

Interakce

Při najetí myší se zobrazí popisek s náhledem tohoto umístění. Uživatelé pak můžou kliknout a přejít do daného umístění. Uživatelé mohou také kliknout a přetáhnout kamkoli do oblasti posuvníku a přejít na nové místo v rámci své kolekce. Při přetahování zůstane indikátor posouvání připojený k kurzoru myši a obsah se posouvá, aby odrážel nové umístění. Uživatelé mohou také procházet svoji kolekci pomocí kolečka myši. Posouváním nahoru nebo dolů na kolečku myši se mění pozice vybraných položek v kolekci a odpovídající ukazatel posouvání nahoru nebo dolů o pevnou hodnotu.

Poznámka:

Na rozdíl od ovládacího prvku ScrollBar nemůžete klikat a přetáhnout palec. Palec je neinteraktivní prvek, který je určen pouze pro vizualizaci aktuální pozice oblasti zobrazení. Palec má pevnou výšku, která není reprezentativní pro výšku oblasti zobrazení.

Chování popisku

  • V případě prostředí optimalizovaných pro dotykové zadávání můžou uživatelé klepnout na oblast posuvníku a podržet ho a zobrazit tak popis. Popis bude mírně zvýšen, aby se uživatelům s dotykovým ovládáním snadněji četl. Klepnutí a přetažení kamkoli do oblasti posuvníku bude fungovat podobně jako kliknutí a přetažení myší.
  • Popisek se nikdy nezkrátí, protože slouží k zobrazení vysvětlujícího textu. Místo toho se text zalomí, pokud překročí maximální šířku nápovědní bubliny 360 pixelů.
  • Popisky kategorií se oříznou, pokud je text delší než šířka oblasti posuvníku.
  • Pokud dojde ke kolizi mezi dvěma popisky kategorií (například když se velikost okna zmenší a dva popisky se navzájem překrývají), horní popisek se odebere. Jako výjimka tohoto pravidla se první popisek kolekce vždy uchovává, protože pomáhá indikovat rozsah kolekce uživatelům. Popisky kategorií by měly vždy mít minimálně 4px (2px nahoře, 2px dole) mezery, jinak dojde ke kolizi popisků.

Je to správná kontrola?

Při práci s velkou kolekcí položek nebo při očekávaném velkém množství posouvání doporučujeme místo výchozího posuvníku použít posuvník s poznámkami. Posuvník s poznámkami poskytuje uživatelům snadný způsob, jak se v kolekci najít a procházet.

U kolekcí, které mají jenom několik položek nebo které vyžadují jenom malé posouvání, doporučujeme použít výchozí posuvník.

Recommendations

  • Přidejte popisek kategorie jenom v případě, že uživatelům poskytuje užitečné informace.
  • Udržujte řetězce používané pro popisky kategorií a tooltipy co nejstručnější.
  • Anotovaný posuvník je nejvhodnější, pokud je k dispozici dostatek svislého prostoru. Použitím posuvníku s poznámkami v omezeném svislém prostoru snížíte počet viditelných popisků.
  • Nepoužívejte posuvník s poznámkami jako jediný způsob, jak se uživatelé v kolekci nacházet. Pro doplnění anotovaného posuvníku doporučujeme v celé kolekci použít lepivá záhlaví nebo štítky kategorií.

Vytvořte anotovaný posuvník

Otevřete aplikaci Galerie WinUI 3 a podívejte se na annotatedScrollBar v akci.

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Pokud chcete použít AnnotatedScrollBar, musíte provést několik kroků:

  • Připojte AnnotatedScrollBar k kontejneru pro posouvání.
  • Přidejte popisky na posuvník.
  • Přidat popisky podrobností (popisy).

Připojení AnnotatedScrollBar k kontejneru pro posouvání

Chcete-li použít AnnotatedScrollBar, připojíte ho k posuvný kontejner prostřednictvím rozhraní IScrollController . AnnotatedScrollBar poskytuje implementaci IScrollController prostřednictvím vlastnosti ScrollController, zatímco ScrollView ji používá prostřednictvím vlastnosti ScrollPresenter (konkrétně ScrollPresenter.VerticalScrollController).

Poznámka:

Ovládací prvek ScrollView má integrovanou podporu pro využívání rozhraní IScrollController. Pro jiné kontejnery posouvání, jako je ScrollViewer, musíte napsat adaptér pro IScrollController. Podívejte se na příklad dále v tomto článku.

Zde je vlastnost VerticalScrollController ItemsView vázána na ScrollController AnnotatedScrollBar. (Vlastnost ItemsView.VerticalScrollPresenter je předána do hodnoty ScrollPresenter.VerticalScrollController vnitřního ScrollView položky ItemsView.)

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

Můžete je také připojit v kódu, jak je znázorněno tady. V tomto příkladu se ScrollView používá k zabalení ItemsRepeater a poskytnutí funkce posouvání. AnnotatedScrollBar nahradí výchozí posuvník 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;
}

Štítky

AnnotatedScrollBar může zobrazit dva druhy popisků, z nichž oba jsou volitelné.

Popisky kategorií

Popisky přidáte tak, že naplníte kolekci Labels. Každý popisek je reprezentován třídou AnnotatedScrollBarLabel, a vyžaduje dvě informace.

  • Obsah: Obsah, který se zobrazí na posuvníku.
  • ScrollOffset: Hodnota posunu, na které se zobrazuje obsah popisku.

Popisky (pokud jsou zadány) jsou vždy viditelné na posuvníku, ledaže kolidují s jinými popisky nebo přesahují hranice drážky. (Další informace najdete v tématu Chování popisku.)

Výpočet hodnoty posunu popisku závisí na konkrétních podrobnostech vaší aplikace a jejích datech. Příklad výpočtu posunu najdete v příkladu galerie GalerieWinUI 3 na GitHub.

Popisky podrobností

Popisek podrobností je prvek zobrazený v momentě, kdy je kurzor nad posuvníkem. Chcete-li vytvořit popisek podrobností, zpracujete událost DetailLabelRequested. Argumenty události poskytují ScrollOffset, kde se zobrazí popisek. Tuto hodnotu použijte k určení správného popisku, který se má zobrazit pro danou pozici, a nastavte popisek jako vlastnost Content args události.

Posouvání

Uživatel může posunout AnnotatedScrollBar kliknutím na tlačítka se šipkami v horní a dolní části posuvníku. Vlastnost SmallChange můžete nastavit k určení velikosti, o kolik tlačítka se šipkami posunují obsah.

Událost posouvání můžete zpracovat a určit, jak se posouvání provádí, provést akci při posouvání nebo zrušit akci posouvání.

Získání ukázkového kódu

  • Last updated on