Sdílet prostřednictvím

Ovládací prvky okna pro posouvání

Pokud je k dispozici více obsahu uživatelského rozhraní, než se vejde do oblasti, použijte ovládací prvek posuvníku.

Prohlížeče posuvníků umožňují rozšířit obsah nad hranice oblasti zobrazení (viditelná oblast). Uživatelé se k tomuto obsahu dostanou manipulací s plochou posuvníku pomocí dotykového ovládání, kolečka myši, klávesnice nebo gamepadu, nebo interakcí s posuvníkem pomocí myši nebo pera.

V závislosti na situaci používá posuvník prohlížeče dvě různé vizualizace, jak je znázorněno na následujícím obrázku: indikátor posouvání/skrolování (vlevo) a tradiční posuvník (vpravo).

Snímek obrazovky znázorňující posouvání posuvníku, svislou čáru o šířce 2 pixelů na pravém okraji obsahu

Snímek obrazovky znázorňující standardní posuvník, svislou čáru o šířce 6 pixelů s tlačítkem šipky nahoru a šipkou dolů v dolní části

Důležité

WinUI 3 má k dispozici dva různé ovládací prvky pro posouvání: ScrollViewer a ScrollView. Kdykoli obecně mluvíme o ovládacích prvcích prohlížeče posouvání , platí informace pro oba ovládací prvky.

Ovládací ScrollView prvek je podobný chování a použití ScrollViewer ovládacího prvku, ale je založený na InteractionTrackeru, má nové funkce, jako jsou změny zobrazení řízené animacemi, a je navržený tak, aby zajistil plnou funkčnost pomocí ItemsRepeater.

Posouvání, posunování a přiblížení

Pomocí ovládacího prvku pro řízení zobrazení umožníte posouvání, přemístění a přiblížení vašeho obsahu.

  • Posouvání: Přesunutí obsahu svisle nebo vodorovně přetažením palce posuvníku nebo pomocí kolečka myši.
  • Posouvání: Přesouvání obsahu svisle nebo vodorovně pomocí dotyku nebo pera
  • Přiblížení: Optické zvýšení nebo snížení měřítka obsahu.

Posuvník je vědom metody zadávání uživatele a používá ji k určení vizualizace, která se má zobrazit.

  • Když se oblast posune, aniž byste museli manipulovat s posuvníkem přímo, například dotykem, zobrazí se indikátor posouvání, který zobrazuje aktuální pozici posouvání.
  • Když se kurzor myši nebo pera přesune přes indikátor posouvání, změní se na tradiční posuvník. Přetažením palce posuvníku se manipuluje s oblastí posouvání.

Animace znázorňující transformaci posuvníku z úzkého indikátoru posouvání na tradiční palec při pohybu kurzoru nad ním

Poznámka:

Když je posuvník viditelný, je překryt obsahem ScrollVieweru o 16 pixelů. Chcete-li zajistit dobrý návrh uživatelského prostředí, ujistěte se, že žádný interaktivní obsah není zakrytý tímto překryvem. Pokud nechcete, aby se UX překrývalo, ponechte 16px výplně na okraji viewportu, abyste umožnili posuvníku.

Oblast zobrazení a rozsah

Posuvný prohlížeč se skládá ze dvou hlavních oblastí, které jsou klíčové pro pochopení jeho funkčnosti. Oblast, která obsahuje veškerý posuvný obsah, který je skrytý i viditelný, je rozsah. Viditelná oblast ovládacího prvku, kde je zobrazený obsah, je oblast zobrazení.

Blok textu, který přesahuje oblast zobrazení nebo viditelnou oblast ovládacího prvku

K dispozici jsou různá rozhraní API, která umožňují získat výšku a šířku těchto oblastí a také posuvnou výšku a šířku, což je rozdíl mezi velikostí rozsahu a velikostí oblasti zobrazení.

Recommendations

  • Kdykoli je to možné, navrhujte svislé posouvání místo vodorovné.
  • Posouvání na jedné ose použijte pro oblasti obsahu, které přesahují jednu hranici oblasti zobrazení (svislé nebo vodorovné). Pro oblasti obsahu, které přesahují hranice oblasti zobrazení (svislé i vodorovné), použijte posouvání se dvěma osami.
  • Použijte předdefinované funkce posouvání v zobrazení položek, zobrazení seznamu, zobrazení mřížky, pole se seznamem, seznam, textové vstupní pole a ovládací prvky centra. Pokud je v těchto ovládacích prvcích příliš mnoho položek, které se mají zobrazit najednou, může se uživatel posouvat vodorovně nebo svisle přes seznam položek.
  • Pokud chcete, aby se uživatel mohl posouvat v obou směrech kolem větší oblasti a případně i zvětšovat, například pokud plánujete umožnit uživateli posouvání a přiblížení u obrázku v plné velikosti (místo obrázku přizpůsobeného velikosti obrazovky), umístěte obrázek do posuvníku.
  • Pokud se uživatel bude procházet dlouhým úsekem textu, nakonfigurujte ovladač posouvání pouze pro vertikální směr.
  • Pomocí posuvného panelu můžete obsahovat pouze jeden objekt. Všimněte si, že jedním objektem může být panel rozložení, který zase obsahuje libovolný počet vlastních objektů.
  • Pokud potřebujete zpracovat události ukazatele pro UIElement v posuvném zobrazení (například ScrollViewer nebo ListView), musíte explicitně zakázat podporu událostí manipulace s elementem v zobrazení voláním UIElement.CancelDirectManipulation. Pokud chcete v zobrazení znovu povolit události manipulace, zavolejte UIElement.TryStartDirectManipulation.

Vytvořte ovladač posouvání

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

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

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Ovladač posouvání lze použít k tomu, aby byl obsah posuvný buď explicitním zabalením obsahu do ovladače posouvání, nebo umístěním ovladače posouvání do šablony kontrolního prvku obsahu.

Posuvný panel v šabloně ovládacího prvku

Je běžné, že ovládací prvek posuvníku je součástí složené struktury jiných ovládacích prvků. Část prohlížeče posouvání zobrazí oblast zobrazení spolu s posuvníky pouze v případech, kdy je prostor rozložení ovládacího prvku hostitele omezen menší než velikost rozbaleného obsahu.

ItemsView obsahuje ScrollView ovládací prvek v jeho šabloně. Můžete získat přístup k ScrollView prostřednictvím vlastnosti ItemsView.ScrollView.

Šablony ListView a GridView vždy obsahují .ScrollViewer TextBox a RichEditBox také obsahují ScrollViewer do svých šablon. Chcete-li ovlivnit některé chování a vlastnosti předdefinované ScrollViewer části, ScrollViewer definuje řadu připojených vlastností XAML, které lze nastavit ve stylech a používat v vazbách šablony. Další informace o připojených vlastnostech naleznete v části Přehled připojených vlastností.

Nastavení posuvného obsahu

Obsah v rolovacím panelu se stane posuvným, když je větší než zobrazovací oblast rolovacího panelu.

Tento příklad nastaví Rectangle jako obsah ScrollView ovládacího prvku. Uživatel uvidí jenom část tohoto obdélníku 500x400 a může se posunout, aby viděl zbytek obdélníku.

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

Rozložení

V předchozím příkladu je velikost obdélníku nastavena explicitně tak, aby byla větší než posuvný panel. V případech, kdy se obsah posuvníku může přirozeně zvětšit, například v seznamu nebo textovém bloku, se dá posuvník nastavit tak, aby jeho obsah (rozsah) rozšířil svisle, vodorovně, obojí nebo ani jedno.

Tento blok textu se například zvětšuje vodorovně, dokud ho nadřazený kontejner neomezí, poté zalomí text a dále se zvětšuje svisle.

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

Když je blok textu zalomený v posuvném okně, okno s posuvníkem omezuje jeho rozšíření ve vodorovném a svislém směru.

Svisle znamená, že obsah je omezen vodorovně, ale může růst svisle nad hranicemi oblasti zobrazení a uživatel může obsah posunout nahoru a dolů.

Blok textu, který svisle přesahuje oblast zobrazení nebo viditelnou oblast ovládacího prvku, se zobrazeným svislým posuvníkem.

Vodorovně znamená, že obsah je omezený svisle, ale může se vodorovně zvětšit nad hranice oblasti zobrazení a uživatel může posunout obsah doleva a doprava.

Blok textu, který se vodorovně rozšiřuje nad oblast zobrazení nebo viditelnou oblast ovládacího prvku, se zobrazeným vodorovným posuvníkem.

Viditelnost posuvníku

Ovládací prvky ScrollViewer a ScrollView používají mírně odlišné prostředky ke konfiguraci vodorovného a svislého posouvání obsahu.

Tato tabulka popisuje možnosti viditelnosti těchto vlastností.

Hodnota Description
Auto Posuvník se zobrazí jenom v případech, kdy oblast zobrazení nemůže zobrazit veškerý obsah.
Zakázáno (jenom ScrollViewer) Posuvník se nezobrazí ani v případě, že oblast zobrazení nemůže zobrazit veškerý obsah. Posouvání podle interakce uživatele je zakázané. (Programové posouvání je stále možné.)
Skrytý Posuvník se nezobrazí ani v případě, že oblast zobrazení nemůže zobrazit veškerý obsah. Posouvání je stále povolené a může k němu dojít prostřednictvím dotykové interakce, klávesnice nebo kolečka myši.
Viditelný Vždy se zobrazí posuvník. (V aktuálních návrhech uživatelského prostředí se posuvník zobrazí pouze v případě, že je kurzor myši nad ním, pokud oblast zobrazení nemůže zobrazit veškerý obsah. )

(ScrollViewer používá výčet ScrollBarVisibility; ScrollView používá výčet ScrollingScrollBarVisibility.)

Orientace

ScrollView ovládací prvek má ContentOrientation vlastnost, která umožňuje řídit rozložení obsahu. Tato vlastnost určuje, jak se obsah může zvětšit, když není explicitně omezen. Pokud Height a Width jsou explicitně nastaveny na obsah, ContentOrientation nemá žádný vliv.

Tato tabulka zobrazuje ContentOrientation možnosti pro ScrollView a ekvivalentní nastavení pro ScrollViewer.

Orientace ScrollView Prohlížeč ScrollViewer
Vertikální ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Horizontální ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Oboje ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
None ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Svislé rozložení

Ve výchozím nastavení je rozložení obsahu (orientace) prohlížeče pro posouvání svislé.

V tomto příkladu se ItemsRepeater používá jako komponenta Content ScrollView. UniformGridLayout pro ItemsRepeater umístí položky vodorovně do řádku, dokud nedojde místo (500 pixelů v tomto příkladu), pak umístí další položku na další řádek. ItemsRepeater může být vyšší než 400 px, které uživatel může vidět, ale uživatel může obsah rolovat svisle.

Výchozí ContentOrientation hodnota je Vertical, takže v ScrollView nejsou potřeba žádné změny.

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

Vodorovné uspořádání

V tomto příkladu je StackPanel obsah, který rozkládá své položky vodorovně. Konfigurace zobrazovače posuvu se změní, aby podporovala vodorovné posouvání a zakázala svislé posouvání.

Vlastnost ScrollView je nastavena na ContentOrientation, aby Horizontal umožnila obsahu rozšířit se vodorovně dle potřeby.

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

Programové posouvání

Vlastnosti posunu zobrazovacího okna jsou jen pro čtení, ale metody jsou k dispozici, abyste mohli posouvat programově.

Pro ovládací prvek ScrollView zavolejte metodu ScrollTo a předávejte vodorovné a svislé posuny, na které chcete posouvat. V tomto případě je posouvání pouze svislé, takže se použije aktuální hodnota HorizontalOffset . Chcete-li přejít na začátek, použije se vertikální odsazení 0. Chcete-li se posunout do dolní části, VerticalOffset je stejný jako 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);
}

ScrollView také poskytuje metodu ScrollBy, která umožňuje posouvání svisle nebo vodorovně o zadanou hodnotu od aktuálního posunu.

Zvětšení

Prohlížeč posouvání můžete použít k optickému přiblížení a oddálení obsahu uživatelem. Interakce optického přiblížení se provádějí pomocí gest sevření a rozevření (posun prstů k sobě přibližuje, zatímco jejich oddálení oddaluje), nebo stisknutím klávesy Ctrl při posouvání kolečka myši. Další informace o přiblížení naleznete v tématu Optické přiblížení a změna velikosti.

Pokud chcete povolit přiblížení podle interakce uživatele, nastavte vlastnost ZoomMode na Enabled (je ve výchozím nastavení Disabled). ZoomMode Změny vlastnosti se projeví okamžitě a mohou ovlivnit probíhající interakci uživatele.

Tento příklad ukazuje obrázek zabalený do prohlížeče rolování, který je nakonfigurovaný tak, aby umožňoval přiblížení.

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

V tomto případě není obrázek omezený posuvným oknem, proto se na začátku zobrazuje ve své nativní velikosti. Pokud je zdroj obrázku větší než oblast zobrazení, bude muset uživatel oddálit, aby viděl celý obrázek, což nemusí být zamýšlené chování.

Obrázek hory, přiblížený tak, že jsou viditelné pouze modrá obloha a mraky v levém horním rohu obrázku.

Další příklad ukazuje, jak nakonfigurovat ovladač posouvání tak, aby omezil obrázek na oblast zobrazení, aby byl původně načten oddálený, a uživatel může, pokud chce, přiblížit a posouvat.

Obrázek hory oddálený tak, aby byly viditelné popředí, hora a nebe.

Chcete-li omezit obrázek na zobrazení ScrollView, nastavte vlastnost ContentOrientation na None. Vzhledem k tomu, že viditelnost posuvníku není svázaná s tímto omezením, při přiblížení uživatele se posuvníky zobrazí automaticky.

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

Faktor zvětšení

Pomocí vlastností MinZoomFactor a MaxZoomFactor můžete řídit, o kolik může uživatel obsah přiblížit. Tyto vlastnosti jsou efektivní jak pro interakce uživatelů, tak pro programové přiblížení.

  • Výchozí hodnoty jsou: 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>

Programové přiblížení

Vlastnost ZoomFactor je určena jen pro čtení, ale metody jsou k dispozici, abyste mohli programově přiblížit. Typickým způsobem je připojit prohlížeč posuvníku k posuvníku, který řídí velikost přiblížení, nebo tlačítko pro resetování úrovně přiblížení. (Podívejte se na ScrollViewer v aplikaci Galerie WinUI 3 a podívejte se na příklad posuvníku přiblížení.)

Pro ovládací prvek ScrollView zavolejte metodu ZoomTo a předáte nový zoom faktor jako první parametr.

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

ScrollView také poskytuje metodu ZoomBy , která umožňuje přiblížit a oddálit zadanou rozdílovou hodnotou z aktuální úrovně přiblížení.

Univerzální platforma Windows a WinUI 2

Poznámka:

Ovládací ScrollView prvek je k dispozici pouze ve WinUI 3. Pro UPW a WinUI 2 použijte ScrollViewer ovládací prvek.

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Rozhraní API pro tento ovládací prvek existují v jmenném prostoru Windows.UI.Xaml.Controls.

K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tento ovládací prvek, který používá zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

  • Last updated on