Megosztás a következőn keresztül:

Jelölt görgetősáv vezérlőelem

A széljegyzetekkel ellátott görgetősáv segítségével a felhasználók egyszerűen navigálhatnak egy nagy elemgyűjteményben. Lecseréli az alapértelmezett görgetősávot, és bármilyen görgethető tárolóval együtt használható. Ezzel a függőleges görgetősávval a felhasználók felfelé és lefelé görgethetik a gyűjtemény elemeit. A felhasználók kategóriacímkéket láthatnak a görgetősáv területén, hogy vizuálisan hivatkozhassanak arra, hogy hol találhatók a gyűjteményükben. A pásztázó jelző (ékezetes vonal) jelzi a felhasználó aktuális pozícióját a gyűjteményben. Elemleírás akkor jelenik meg, ha egy felhasználó rámutat a görgetősáv területére. Ez az elemleírás egy címkét tartalmaz, amely további információkat nyújt a felhasználónak a gyűjtemény aktuális pozíciójáról. A görgetőnyilak a görgetősáv területének tetején és alján találhatók. Ezek segítségével az aktuális pozíciót kis lépéssel mozgathatja

Képernyőkép egy jegyzetekkel ellátott görgetősávról a Fényképek alkalmazásban.

A jegyzetekkel ellátott görgetősáv az ItemsView vezérlővel együtt használható a fényképgyűjteményi élmény újbóli létrehozásához. A kategóriacímkék különböző évekre állíthatók be, hogy a felhasználók a fényképgyűjteményük egy adott helyére navigálhassanak.

Interakciók

Rámutatáskor megjelenik egy elemleírás, amely megjeleníti az adott hely előnézetét. A felhasználók ezután rákattinthatnak az adott helyre való navigáláshoz. A felhasználók a görgetősáv területének tetszőleges pontjára kattintva és húzásával új helyre navigálhatnak a gyűjteményen belül. A húzással a pásztázó jelző az egérmutatóhoz csatlakozik, a tartalom pedig görget, hogy tükrözze az új pozíciót. A felhasználók az egérkerékkel is végiggörgethetnek a gyűjteményükön. Az egérkeréken felfelé vagy lefelé görgetve a gyűjteményben elfoglalt pozíciójuk és a megfelelő pásztázó jelző rögzített mennyiséggel felfelé vagy lefelé mozgatható.

Megjegyzés:

A Görgetősáv vezérlőelemtől eltérően nem lehet a hüvelykujjra kattintania és húzni. A hüvelykujj egy nem interaktív elem, amely csak az aktuális nézetport pozíciójának megjelenítésére használható. A hüvelykujj rögzített magasságú, amely nem jellemző a kitekintő magasságára.

Címke viselkedése

  • Az érintéses bevitelre optimalizált élmény érdekében a felhasználók a görgetősáv területén koppintva és lenyomva tartva tekinthetik meg az elemleírást. Az elemleírás kissé emelt szintű lesz, hogy könnyebben olvasható legyen az érintéses felhasználók számára. A görgetősáv területének koppintása és húzása ugyanúgy működik, mint az egérrel való kattintás és húzás.
  • Az elemleírás címkéje soha nem csonkolva jelenik meg, mivel célja a magyarázó szöveg megjelenítése. Ehelyett a szöveg be van csomagolva, ha az elemleírás maximális szélessége 360px.
  • A kategóriacímkék akkor lesznek kivágva, ha a szöveg hosszabb, mint a görgetősáv területének szélessége.
  • Ha két kategóriacímke ütközik (például ha az ablak mérete csökken, és két címke átfedésben van egymással), a felső címke el lesz távolítva. A szabály kivételeként a gyűjtemény első címkéje mindig megmarad, mivel segít a gyűjtemény tartományának a felhasználók számára történő jelzésében. A kategóriacímkéknek mindig legalább 4 képpontnak (2 képpont fent, 2 képpont alatt) kell lennie a kettő között, ellenkező esetben a címke ütközése aktiválódik.

Ez a megfelelő vezérlő?

Javasoljuk, hogy egy jegyzetekkel ellátott görgetősávot használjon az alapértelmezett görgetősáv helyett, amikor nagy mennyiségű elemről van szó, vagy ha nagy mennyiségű görgetés várható. A jegyzetekkel ellátott görgetősáv megkönnyíti a felhasználók számára, hogy megtalálják magukat a gyűjteményükben, és áthaladjanak rajta.

Az olyan gyűjtemények esetében, amelyek csak néhány elemet tartalmaznak, vagy amelyek csak kis mennyiségű görgetést igényelnek, javasoljuk, hogy használjon alapértelmezett görgetősávot.

Recommendations

  • Csak akkor adjon hozzá kategóriacímkét, ha hasznos információkat nyújt a felhasználóknak
  • A kategóriacímkékhez és az elemleíráshoz használt sztringeket lehető legrövidebben tartsa.
  • A széljegyzetes görgetősáv akkor használható a legjobban, ha elegendő függőleges terület áll rendelkezésre. A széljegyzetes görgetősáv korlátozott függőleges térben való használata csökkenti a látható címkék számát
  • Ne használja a jelöléssel ellátott görgetősávot az egyetlen módjául annak, hogy a felhasználók tájékozódjanak egy gyűjteményen belül. Javasoljuk, hogy a jegyzetekkel ellátott görgetősáv kiegészítése érdekében a gyűjteményben ragadós fejléceket vagy kategóriafeliratokat használjon.

Jegyzetekkel ellátott görgetősáv létrehozása

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben a AnnotatedScrollBart

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

JegyzetesScrollBar használatához több lépést kell végrehajtania:

  • Csatlakoztassa a JegyzeteltGörgetősávot egy görgető konténerhez.
  • Címkék hozzáadása a görgetősávhoz.
  • Részletes címkék (elemleírások) hozzáadása.

Az AnnotatedScrollBar csatlakoztatása egy görgető konténerhez

SzéljegyzetesScrollBar használatához az IScrollController felületén keresztül csatlakoztathatja azt egy görgethető tárolóhoz. A AnnotatedScrollBar egy IScrollController-implementációt biztosít a ScrollController tulajdonságán keresztül, míg a ScrollView a ScrollPresenter tulajdonságán ( pontosabban a ScrollPresenter.VerticalScrollControlleren) keresztül használja fel.

Megjegyzés:

A ScrollView vezérlő beépített támogatást nyújt az IScrollController felületének felhasználásához. Más görgetőtárolókhoz, például a ScrollViewerhez, az IScrollControllerhez kell adaptert írnia. A cikk későbbi részében talál egy példát.

Itt az ItemsView VerticalScrollController tulajdonsága az AnnotatedScrollBar ScrollControlleréhez van kötve. (Az ItemsView.VerticalScrollPresenter tulajdonság átkerül az ItemsView belső ScrollView-jának ScrollPresenter.VerticalScrollController értékére.)

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

Az itt látható módon kódban is csatlakoztathatja őket. Ebben a példában a ScrollView egy ItemsRepeater körbefuttatására szolgál, és görgetési funkciókat biztosít hozzá. A AnnotatedScrollBar a ScrollView alapértelmezett görgetősávját váltja fel.

<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;
}

Címkék

A SzéljegyzetesScrollBar kétféle címkét jeleníthet meg, mindkettő nem kötelező.

Kategóriacímkék

A Címkék gyűjtemény feltöltésével címkéket adhat hozzá. Minden címkét a JegyzettScrollBarLabel osztály jelöl, és két információra van szükség:

  • Tartalom: A görgetősávon megjelenő tartalom.
  • ScrollOffset: Az eltolás értéke, amelyen a címke tartalma megjelenik.

A címkék (ha meg vannak adva) mindig láthatók a görgetősávon, kivéve, ha ütköznek más címkékkel, vagy túlnyúlnak a korláton. (További információkért lásd a címke viselkedését .)

A címkeeltolás értékének kiszámítása az alkalmazás részleteitől és annak adataitól függ. Az eltolás kiszámításának egyik példáját a WinUI 3 Katalógus példáján GitHub-on találja.

Részletcímkék

A részletes címke egy tooltip elem, amely akkor jelenik meg, amikor a kurzor a görgetősáv fölött van. Részletes címke létrehozásához a DetailLabelRequested eseményt kell kezelnie. Az eseményargumentumok megadják a ScrollOffset, ahol a tooltip megjelenik. Ezzel az értékkel meghatározhatja az adott pozícióhoz megjelenítendő megfelelő címkét, és beállíthatja a címkét az esemény args Tartalom tulajdonságaként.

Görgetés

A felhasználó az AnnotáltGörgetősáv tetején és alján található nyílgombokkal görgetheti az elemet. A SmallChange tulajdonságot beállíthatja annak az összegnek a megadásához, amellyel a nyílgombok görgetik a tartalmat.

A görgetési eseményt kezelheti a görgetés végrehajtásának meghatározásához, a görgetés közbeni művelet végrehajtásához vagy a görgetési művelet megszakításához .

A mintakód lekérése

  • Last updated on