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

Görgetőmegjelenítő vezérlők

Ha több felhasználói felületi tartalmat szeretne megjeleníteni, mint amennyit elfér egy adott területen, használjon görgetőmegjelenítő vezérlőelemet.

A görgetőmegjelenítők lehetővé teszik, hogy a tartalom túllépje a nézetport (látható terület) határait. A felhasználók úgy érik el ezt a tartalmat, hogy módosítják a görgetőmegjelenítőt, surface érintéssel, egérkerékkel, billentyűzettel vagy játékpaddal, vagy az egér vagy a toll kurzorával a görgetőmegjelenítő görgetősávjával lépnek kapcsolatba.

A helyzettől függően a görgetőmegjelenítő görgetősávja két különböző vizualizációt használ, amelyek az alábbi ábrán láthatók: a pásztázó jelző (balra) és a hagyományos görgetősáv hüvelykujja (jobbra).

Képernyőkép, amely egy görgetősávot, egy 2 képpont széles függőleges vonalat ábrázol a tartalom jobb szélén.

Képernyőkép a normál görgetősávról, egy 6 képpont széles függőleges vonal felül egy felfelé mutató nyílgombbal, alul pedig lefelé mutató nyíl.

Fontos

A WinUI 3 két különböző görgetőnézet-vezérlővel rendelkezik: ScrollViewer és ScrollView. Amikor általánosan beszélünk görgetőmegjelenítőről vezérlőkről, az információ mindkét vezérlőre vonatkozik.

A ScrollView vezérlő viselkedésében és használatában hasonló a ScrollViewer vezérlőhöz, de az InteractionTrackeren alapul, új funkciókkal rendelkezik, például animációalapú nézetmódosításokkal, és az ItemsRepeater teljes funkcionalitását biztosítja.

Görgetés, pásztázás és nagyítás

Görgetőmegjelenítő vezérlőelem használatával engedélyezheti a görgetést, a pásztázástés a nagyítást a tartalmán.

  • Görgetés: A tartalom mozgatása függőlegesen vagy vízszintesen a görgetősáv hüvelykujjának húzásával vagy az egér görgetőkerekével.
  • Görgetés: A tartalom mozgatása függőlegesen vagy vízszintesen érintéssel vagy tollal történő bemenettel.
  • Nagyítási: A tartalom méretének optikai növelése vagy csökkentése.

A görgetősáv tisztában van a felhasználó bemeneti módszerével, és annak meghatározására használja, hogy melyik vizualizáció jelenjen meg.

  • Ha a régiót a görgetősáv közvetlen módosítása nélkül görgeti, például érintéssel, megjelenik a pásztázó jelző, amely az aktuális görgetési pozíciót jeleníti meg.
  • Amikor az egér vagy a toll kurzora a pásztázó jelző fölé kerül, a hagyományos görgetősávra változik. A görgetősáv hüvelykujjának húzásával a görgetési terület módosítható.

Egy animáció, amely azt mutatja, hogy a görgetősáv a keskeny pásztázó mutatóról a hagyományos hüvelykujjra változik, amikor a kurzor átmozdul rajta.

Megjegyzés:

Ha a görgetősáv látható, az 16 képpontos átfedésben van a ScrollViewerben lévő tartalom felett. A megfelelő UX-kialakítás érdekében gondoskodnia kell arról, hogy az átfedés ne takarja el az interaktív tartalmakat. Amennyiben nem szeretné, hogy a felhasználói élmény átfedésben legyen, hagyjon 16 képpontnyi térközt a nézetablak szélén, hogy elkerülje a görgetősávval való átfedést.

Nézet és kiterjedés

A görgetőmegjelenítő két fő régióból áll, amelyek fontosak a funkció megértéséhez. A rejtett és a látható összes görgethető tartalmat tartalmazó terület a kiterjedése. A vezérlőelem látható területe, ahol a tartalom megjelenik, a nézetport.

A nézetablakon vagy a vezérlőelem látható területén túlnyúló szövegblokk.

Különböző API-k állnak rendelkezésre, amelyek lehetővé teszik ezeknek a régióknak a magasságának és szélességének meghatározását, valamint a görgethető magasság és szélesség megállapítását, amely a kiterjedés mérete és a nézetport mérete közötti különbség.

Recommendations

  • Amikor csak lehetséges, vízszintes helyett függőleges görgetést tervezzen.
  • Használjon egytengelyes pásztázást olyan tartalomterületekhez, amelyek egy nézetporthatáron (függőlegesen vagy vízszintesen) túlnyúlnak. Használjon kéttengelyes pásztázást olyan tartalomrégiókhoz, amelyek mindkét nézethatáron (függőlegesen és vízszintesen) túlnyúlnak.
  • Használja a beépített görgetési funkciót az elemek nézetben, a listanézetben, a rácsnézetben, a kombinált listában, a listamezőben, a szövegbeviteli mezőben és a központi vezérlőkben. Ezekkel a vezérlőkkel, ha túl sok elem van egyszerre megjelenítve, a felhasználó vízszintesen vagy függőlegesen görgethet az elemek listája felett.
  • Ha azt szeretné, hogy a felhasználó mindkét irányban pásztázódjon egy nagyobb terület körül, és esetleg nagyítsa is, például ha lehetővé szeretné tenni a felhasználó számára, hogy teljes méretű képet pásztázzon és nagyíthasson (a képernyőnek megfelelő méretű kép helyett), akkor helyezze a képet egy görgető megjelenítőbe.
  • Ha a felhasználó végiggörget egy hosszú szövegszakaszon, konfigurálja a görgető megjelenítőt úgy, hogy csak függőlegesen görgessen.
  • Csak egy objektumot tartalmazó görgetőmegjelenítő használatával. Vegye figyelembe, hogy az egyetlen objektum lehet elrendezéspanel, amely tetszőleges számú saját objektumot tartalmaz.
  • Ha görgethető nézetben (például ScrollViewer vagy ListView) kell kezelnie egy UIElement mutatóeseményeit, explicit módon le kell tiltania a nézet elemének manipulációs eseményeinek támogatását a UIElement.CancelDirectManipulationmeghívásával. Ha újra engedélyezni szeretné a nézetben a manipulációs eseményeket, hívja meg UIElement.TryStartDirectManipulation.

Görgető megjelenítő létrehozása

Nyissa meg a WinUI 3 Bemutató alkalmazást, és tekintse meg a ScrollView működés közben

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

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.

A görgetőmegjelenítő vezérlőelemekkel a tartalom görgethetővé alakítható, ha a tartalmat explicit módon körbefuttatják a görgetőmegjelenítőben, vagy egy görgetőmegjelenítőt helyeznek el egy tartalomvezérlő vezérlősablonjában.

Görgetőnézet egy vezérlősablonban

A görgetőmegjelenítő vezérlők általában más vezérlők összetett részeként léteznek. A görgetőmegjelenítő rész csak akkor jelenít meg nézetportot és görgetősávokat, amikor a gazdagépvezérlő elrendezési területét szűkebbre korlátozzák, mint a kibővített tartalom mérete.

ItemsView tartalmaz egy ScrollView vezérlőt a sablonjában. Az ScrollView elérhető az ItemsView.ScrollView tulajdonságon keresztül.

ListView és GridView-sablonok mindig tartalmaznak ScrollViewer. TextBox és RichEditBoxScrollViewer is szerepelnek a sablonjaikban. A beépített ScrollViewer rész viselkedésének és tulajdonságainak befolyásolásához ScrollViewer több XAML-csatolt tulajdonságot határoz meg, amelyek stílusokban állíthatók be, és sablonkötésekben használhatók. A csatolt tulajdonságokról további információt a Csatolt tulajdonságok áttekintése című témakörben talál.

Görgethető tartalom beállítása

A görgetőmegjelenítőben lévő tartalom görgethetővé válik, ha nagyobb, mint a görgetőmegjelenítő nézetportja

Ez a példa a Rectangle tartalmat állítja be a ScrollView vezérlőelemhez. A felhasználó csak a téglalap 500x400 részét látja, és görgetéssel megtekintheti a többit.

<ScrollView Width="500" Height="400">
    <Rectangle Width="1000" Height="800">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollView>

Layout

Az előző példában a téglalap mérete explicit módon nagyobb, mint a görgetőmegjelenítő. Abban az esetben, ha a görgetőmegjelenítő tartalma természetes módon növekedhet, például egy listában vagy szövegblokkban, beállíthatja, hogy a görgetőmegjelenítő tartalma (terjedelme) függőlegesen, vízszintesen, mindkettővel vagy egyikével se növekedjen.

Ez a szövegblokk például vízszintesen fog növekedni, amíg a szülőtároló nem korlátozza azt, majd körbefuttatja a szöveget, és függőlegesen növekszik.

<TextBlock Text="{x:Bind someText}" TextWrapping="WrapWholeWords"/>

Ha a szövegblokkot görgetőmegjelenítőbe burkolják, a görgető megjelenítő korlátozza annak vízszintes és függőleges növekedését.

Függőleges azt jelenti, hogy a tartalom vízszintesen korlátozott, de függőlegesen a nézethatárokon túl is növekedhet, és a felhasználó felfelé és lefelé görgetheti a tartalmat.

Egy olyan szövegblokk, amely függőlegesen túlnyúlik a nézetablakon vagy a vezérlőelem látható területén, és megjelenik egy függőleges görgetősáv.

Vízszintes azt jelenti, hogy a tartalom függőlegesen korlátozott, de vízszintesen megnövekedhet a nézethatárokon túl, és a felhasználó görgetheti a tartalmat balra és jobbra.

Olyan szövegblokk, amely vízszintesen túlnyúlik a nézetablakon vagy a vezérlőelem látható területén, és megjelenik egy vízszintes görgetősáv.

Görgetősáv láthatósága

A ScrollViewer és ScrollView vezérlői némileg eltérő módon konfigurálják a tartalom vízszintes és függőleges görgetését.

  • A ScrollViewer vezérlőben a VerticalScrollBarVisibility és HorizontalScrollBarVisibility tulajdonságok mind a görgetősávok láthatóságát, mind az adott irányba történő görgetést szabályozzák. Ha egy tulajdonság Disabledértékre van állítva, a tartalom nem görgethető ebben az irányban felhasználói beavatkozással.
    • Az alapértelmezett értékek a következők: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Disabled"
  • A ScrollView vezérlőben a VerticalScrollBarVisibility és HorizontalScrollBarVisibility tulajdonság csak a görgetősávok láthatóságát szabályozza.
    • Az alapértelmezett értékek a következők: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Auto"

Ez a táblázat a tulajdonságok láthatósági beállításait ismerteti.

Érték Description
Auto A görgetősáv csak akkor jelenik meg, ha a nézetport nem tudja megjeleníteni az összes tartalmat.
Letiltva (csak ScrollViewer esetén) A görgetősáv akkor sem jelenik meg, ha a nézetport nem tudja megjeleníteni az összes tartalmat. A felhasználói beavatkozással történő görgetés le van tiltva. (A programozott görgetés továbbra is lehetséges.)
Rejtett A görgetősáv akkor sem jelenik meg, ha a nézetport nem tudja megjeleníteni az összes tartalmat. A görgetés továbbra is engedélyezve van, és érintéssel, billentyűzettel vagy egérkerékkel is történhet.
Látható Mindig megjelenik egy görgetősáv. (Az aktuális UX-tervekben a görgetősáv csak akkor jelenik meg, ha az egérmutató rajta van, kivéve, ha a nézet nem tudja megjeleníteni az összes tartalmat. )

(A ScrollViewer a ScrollBarVisibility enumerálást használja; A ScrollView a ScrollingScrollBarVisibility enumerálást használja.)

Tájékozódás

A ScrollView vezérlő rendelkezik egy ContentOrientation tulajdonságmal, amely lehetővé teszi a tartalom elrendezésének szabályozását. Ez a tulajdonság határozza meg, hogyan nőhet a tartalom, ha nincs kifejezetten korlátozva. Ha Height és Width explicit módon vannak beállítva a tartalomra, ContentOrientation nincs hatása.

Ez a táblázat a ContentOrientation ScrollView beállításait és az ezekkel egyenértékű ScrollViewerbeállításokat mutatja be.

Tájékozódás GörgetőNézet ScrollViewer
Függőleges ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Vízszintes ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Both ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
None ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Függőleges elrendezés

Alapértelmezés szerint a görgetőmegjelenítő tartalomelrendezése (tájolása) függőleges.

Ebben a példában egy ItemsRepeater van használva a ScrollView Content-ként. Az ItemsRepeater UniformGridLayout vízszintesen helyezi el az elemeket egy sorban, amíg elfogy a térköze (ebben a példában 500px), majd a következő sorra helyezi a következő elemet. Az ItemsRepeater magasabb lehet, mint a felhasználó által látható 400px, de a felhasználó ezután függőlegesen görgetheti a tartalmat.

Az alapértelmezett ContentOrientation érték Vertical, ezért a ScrollView-on nincs szükség módosításra.

<ScrollView Width="500" Height="400">
    <ItemsRepeater ItemsSource="{x:Bind Albums}"
                   ItemTemplate="{StaticResource MyTemplate}">
        <ItemsRepeater.Layout>
            <UniformGridLayout RowSpacing="8" ColumnSpacing="8"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollView>

Vízszintes elrendezés

Ebben a példában a tartalom egy StackPanel, amely vízszintesen helyezi el az elemeket. A görgetőmegjelenítő konfigurációja módosul, hogy támogassa a vízszintes görgetést, és letiltsa a függőleges görgetést.

A ScrollViewContentOrientation tulajdonsága Horizontal van beállítva, hogy a tartalom a szükséges mértékben vízszintesen növekedjen.

<ScrollView Width="500" Height="400" ContentOrientation="Horizontal">
    <StackPanel Orientation="Horizontal">
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

Programozott görgetés

A görgetőmegjelenítő eltolási tulajdonságai csak olvashatók, de a metódusok lehetővé teszik a programozott görgetést.

A ScrollView vezérlő esetén hívja meg a ScrollTo metódust, és adja meg a görgetéshez szükséges vízszintes és függőleges eltolásokat. Ebben az esetben a görgetés csak függőleges, ezért a rendszer az aktuális HorizontalOffset értéket használja. A lap tetejére görgetéshez a VerticalOffset értékét 0-ra állítjuk. Az aljára görgetéshez a VerticalOffset megegyezik a ScrollableHeight.

<Button Content="Scroll to top" Click="ScrollTopButton_Click"/>
<Button Content="Scroll to bottom" Click="ScrollBottomButton_Click"/>
<ScrollView x:Name="scrollView" Width="500" Height="400">
    <StackPanel>
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

private void ScrollTopButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: 0);
}

private void ScrollBottomButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: scrollView.ScrollableHeight);
}

A ScrollView egy ScrollBy metódust is biztosít, amellyel függőlegesen vagy vízszintesen görgethet az aktuális eltolástól megadott eltéréssel.

Ráközelít

A görgetőmegjelenítővel lehetővé teheti a felhasználók számára a tartalom optikai nagyítását és kicsinyítését. Az optikai nagyítást a csippentéssel és nyújtással végzik (az ujjak távolabb mozgatása nagyít, közelebb mozgatása kicsinyít), vagy a Ctrl billentyű lenyomásával, miközben az egér görgetőkerekét görgetjük. További információ a nagyításról: Optikai nagyítás és átméretezés.

Ha felhasználói beavatkozással szeretné engedélyezni a nagyítást, állítsa a ZoomMode tulajdonságot Enabled (alapértelmezés szerint Disabled). A ZoomMode tulajdonság módosításai azonnal érvénybe lépnek, és hatással lehetnek egy folyamatban lévő felhasználói beavatkozásra.

Ez a példa megmutat egy képet, amely görgetőnézetbe van helyezve, hogy lehetővé tegye a nagyítást.

<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Ebben az esetben a rendszerképet a görgető megjelenítő nem korlátozza, ezért eredetileg natív méretben jelenik meg. Ha a kép mérete nagyobb, mint a nézetport, a felhasználónak távolítania kell, hogy lássa a teljes képet, ami nem biztos, hogy a kívánt eredmény.

Egy hegy képe, amelyet annyira kinagyítottak, hogy csak a kék ég és a felhők láthatók a kép bal felső részén.

A következő példa bemutatja, hogyan konfigurálhatja a görgető nézetet úgy, hogy a kép a nézetablakra legyen korlátozva, így eredetileg kicsinyített legyen, és a felhasználó tetszés szerint nagyíthat és görgethet.

Egy hegy képe kinagyítva, hogy az előtér, a hegy és az ég mind látható legyen.

Ha a képet a ScrollView nézetportjára szeretné korlátozni, állítsa a ContentOrientation tulajdonságot Noneértékre. Mivel a görgetősáv láthatósága nincs kötve ehhez a korlátozáshoz, a görgetősávok automatikusan megjelennek, amikor a felhasználó nagyít.

<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Nagyítási tényező

A MinZoomFactor és MaxZoomFactor tulajdonságaival szabályozhatja, hogy a felhasználó mekkora mértékben nagyíthatja a tartalmat. Ezek a tulajdonságok mind a felhasználói interakciók, mind a programozott nagyítás esetén hatékonyak.

  • Az alapértelmezett értékek a következők: MinZoomFactor="0.1", MaxZoomFactor="10.0"
<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled" 
            MinZoomFactor="1.0" MaxZoomFactor="8.0">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

Programozott nagyítás

A ZoomFactor tulajdonság írásvédett, de a metódusok lehetővé teszik a programszerű nagyítást. Ehhez általában a görgetőmegjelenítőt egy olyan csúszkához kell csatlakoztatni, amely szabályozza a nagyítás mértékét, vagy egy gombot a nagyítási szint visszaállításához. (A ScrollViewer a WinUI 3 Katalógus alkalmazásban egy nagyítási csúszka példáját szemlélteti.)

A ScrollView vezérlőelemhez hívja meg a ZoomTo metódust, és adja át az új nagyítási tényezőt első paraméterként.

<Slider Header="Zoom" IsEnabled="True"
        Maximum="{x:Bind scrollControl.MaxZoomFactor, Mode=OneWay}"
        Minimum="{x:Bind scrollControl.MinZoomFactor, Mode=OneWay}"
        StepFrequency="0.1"
        ValueChanged="ZoomSlider_ValueChanged" />
<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

private void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (scrollControl != null)
    {
        scrollControl.ZoomTo(
            zoomFactor: (float)e.NewValue,
            centerPoint: null)
    }
}

A ScrollView egy ZoomBy metódust is biztosít, amellyel az aktuális nagyítási szinttől meghatározott eltéréssel nagyíthat és kicsinyíthet.

  • Last updated on