Xamarin.Forms Posouvání carouselView

Download Sample Stažení ukázky

CarouselView definuje následující vlastnosti související s posouváním:

  • HorizontalScrollBarVisibility, typu ScrollBarVisibility, který určuje, kdy je vodorovný posuvník viditelný.
  • IsDragging, typu bool, který označuje, zda se posouvání CarouselView . Jedná se o vlastnost jen pro čtení, jejíž výchozí hodnota je false.
  • IsScrollAnimated, typu bool, který určuje, zda se animace objeví při posouvání CarouselView. Výchozí hodnota je true.
  • ItemsUpdatingScrollMode, typu ItemsUpdatingScrollMode, který představuje chování CarouselView posouvání při přidání nových položek do něj.
  • VerticalScrollBarVisibility, typu ScrollBarVisibility, který určuje, kdy je svislý posuvník viditelný.

Všechny tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb.

CarouselView definuje také dvě ScrollTo metody, které se posunou položky do zobrazení. Jedna z přetížení posune položku v zadaném indexu do zobrazení, zatímco druhá se posune zadanou položku do zobrazení. Obě přetížení mají další argumenty, které lze určit přesné umístění položky po dokončení posouvání a zda se má posouvání animovat.

CarouselViewScrollToRequested definuje událost, která se aktivuje při vyvolání jedné z ScrollTo metod. Objekt ScrollToRequestedEventArgs , který doprovází ScrollToRequested událost má mnoho vlastností, včetně IsAnimated, Index, Itema ScrollToPosition. Tyto vlastnosti jsou nastaveny z argumentů zadaných ve ScrollTo volání metody.

Kromě toho definuje Scrolled událost, CarouselView která se aktivuje, aby značila, že došlo k posouvání. Objekt ItemsViewScrolledEventArgs , který doprovází Scrolled událost, má mnoho vlastností. Další informace najdete v tématu Zjišťování posouvání.

Když uživatel potáhnutím prstem zahájí posouvání, může být koncové umístění posuvníku řízeno tak, aby se položky plně zobrazovaly. Tato funkce se označuje jako přichycení, protože položky přichycují k poloze při posouvání zarážek. Další informace najdete v tématu Přichycení bodů.

CarouselView může také načítat data přírůstkově při posouvání uživatele. Další informace najdete v tématu Přírůstkové načítání dat.

Zjištění posouvání

Vlastnost IsDragging lze prozkoumat a zjistit, zda CarouselView se aktuálně prochází položkami.

Kromě toho definuje Scrolled událost, CarouselView která se aktivuje, aby značila, že došlo k posouvání. Tato událost by měla být využita, když se vyžadují data o posouvání.

Následující příklad XAML ukazuje CarouselView , že nastaví obslužnou rutinu Scrolled události pro událost:

<CarouselView Scrolled="OnCollectionViewScrolled">
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView();
carouselView.Scrolled += OnCarouselViewScrolled;

V tomto příkladu OnCarouselViewScrolled kódu se obslužná rutina události spustí při Scrolled spuštění události:

void OnCarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
    Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
    Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
    Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
    Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
    Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
    Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}

V tomto příkladu OnCarouselViewScrolled obslužná rutina události vypíše hodnoty objektu ItemsViewScrolledEventArgs , který doprovází událost.

Důležité

Událost Scrolled se aktivuje pro posouvání iniciované uživatelem a pro programové posouvání.

Posunutí položky v indexu do zobrazení

ScrollTo První metoda přetížení posune položku v zadaném indexu do zobrazení. Vzhledem k objektu CarouselView s názvem carouselViewnásledující příklad ukazuje, jak posunout položku v indexu 6 do zobrazení:

carouselView.ScrollTo(6);

Poznámka

Událost ScrollToRequested se aktivuje při ScrollTo vyvolání metody.

Posunutí položky do zobrazení

Druhá ScrollTo metoda přetížení posune zadanou položku do zobrazení. Vzhledem k objektu CarouselView s názvem carouselView, následující příklad ukazuje, jak posunout položku Proboscis Monkey do zobrazení:

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
carouselView.ScrollTo(monkey);

Poznámka

Událost ScrollToRequested se aktivuje při ScrollTo vyvolání metody.

Zakázání animace posouvání

Animace posouvání se zobrazí při přesouvání mezi položkami v a .CarouselView K této animaci dochází jak pro posouvání iniciované uživatelem, tak pro programové posouvání. IsScrollAnimated Nastavením vlastnosti false zakážete animaci pro obě kategorie posouvání.

Alternativně můžete argument ScrollTo metody nastavit tak, animate aby false zakázal animaci posouvání na programových posouvání:

carouselView.ScrollTo(monkey, animate: false);

Pozice posouvání ovládacích prvků

Při posouvání položky do zobrazení je možné určit přesnou pozici položky po dokončení posouvání s position argumentem ScrollTo metod. Tento argument přijímá člen výčtu ScrollToPosition .

MakeVisible

Člen ScrollToPosition.MakeVisible označuje, že položka by se měla posunout, dokud se nezobrazí v zobrazení:

carouselView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);

Tento ukázkový kód vede k minimálnímu posouvání požadovanému k posouvání položky do zobrazení.

Poznámka

Člen ScrollToPosition.MakeVisible je ve výchozím nastavení používán, pokud position argument není zadán při volání ScrollTo metody.

Spustit

Člen ScrollToPosition.Start označuje, že položka by se měla posunout na začátek zobrazení:

carouselView.ScrollTo(monkey, position: ScrollToPosition.Start);

Tento ukázkový kód vede k posouvání položky na začátek zobrazení.

Střed

Člen ScrollToPosition.Center označuje, že položka by se měla posunout na střed zobrazení:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.Center);

Výsledkem tohoto ukázkového kódu je posouvání položky do středu zobrazení.

End

Člen ScrollToPosition.End označuje, že položka by se měla posunout na konec zobrazení:

carouselViewView.ScrollTo(monkey, position: ScrollToPosition.End);

Výsledkem tohoto ukázkového kódu je posouvání položky na konec zobrazení.

Umístění posouvání ovládacích prvků při přidání nových položek

CarouselView definuje ItemsUpdatingScrollMode vlastnost, která je zajištěna vazebnou vlastností. Tato vlastnost získá nebo nastaví hodnotu výčtu ItemsUpdatingScrollMode , která představuje chování CarouselView posouvání při přidání nových položek do ní. Výčet ItemsUpdatingScrollMode definuje následující členy:

  • KeepItemsInView zachová první položku v seznamu zobrazenou při přidání nových položek.
  • KeepScrollOffset zajišťuje, aby při přidávání nových položek byla zachována aktuální pozice posouvání.
  • KeepLastItemInView upraví posun posouvání, aby se při přidání nových položek zachovala poslední položka v seznamu.

Výchozí hodnota ItemsUpdatingScrollMode vlastnosti je KeepItemsInView. Proto při přidání nových položek do CarouselView první položky v seznamu zůstane zobrazena. Chcete-li zajistit, aby se při přidání nových položek zobrazila poslední položka v seznamu, nastavte ItemsUpdatingScrollMode vlastnost na KeepLastItemInView:

<CarouselView ItemsUpdatingScrollMode="KeepLastItemInView">
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Viditelnost posuvníku

CarouselViewHorizontalScrollBarVisibility definuje a VerticalScrollBarVisibility vlastnosti, které jsou podporovány vazebnými vlastnostmi. Tyto vlastnosti získají nebo nastaví hodnotu výčtu ScrollBarVisibility , která představuje, když je vodorovný nebo svislý posuvník viditelný. Výčet ScrollBarVisibility definuje následující členy:

  • Default označuje výchozí chování posuvníku pro platformu a je výchozí hodnotou pro HorizontalScrollBarVisibility vlastnosti a VerticalScrollBarVisibility vlastnosti.
  • Always označuje, že posuvníky budou viditelné, i když se obsah vejde do zobrazení.
  • Never označuje, že posuvníky nebudou viditelné, i když se obsah nevejde do zobrazení.

Body přichycení

Když uživatel potáhnutím prstem zahájí posouvání, může být koncové umístění posuvníku řízeno tak, aby se položky plně zobrazovaly. Tato funkce se označuje jako přichycení, protože položky se přichytí k pozici při posouvání a řídí se následujícími vlastnostmi třídy ItemsLayout :

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cíle datových vazeb.

Poznámka

Při přichycení dojde ke směru, který vytváří nejmenší množství pohybu.

Typ bodů přichycení

Výčet SnapPointsType definuje následující členy:

  • None označuje, že posouvání se k položkám přichytí.
  • Mandatory označuje, že obsah se vždy přichytí k nejbližšímu bodu přichycení k místu, kde by se posouvání přirozeně zastavilo podél směru inertia.
  • MandatorySingle označuje stejné chování jako Mandatory, ale posouvá pouze jednu položku najednou.

Ve výchozím nastavení CarouselViewSnapPointsType je vlastnost nastavena na SnapPointsType.MandatorySingle, což zajišťuje, že posouvání pouze jednu položku najednou.

Následující snímky obrazovky ukazují vypnuté CarouselView přichycení:

Screenshot of a CarouselView without snap points, on iOS and Android

Zarovnání bodů přichycení

Výčet SnapPointsAlignment definuje Start, Centera End členy.

Důležité

Hodnota SnapPointsAlignment vlastnosti je dodržena pouze v SnapPointsType případě, že je vlastnost nastavena na Mandatory, nebo MandatorySingle.

Spustit

Člen SnapPointsAlignment.Start označuje, že body přichycení jsou zarovnané s úvodním okrajem položek. Následující příklad XAML ukazuje, jak nastavit tento člen výčtu:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Když uživatel potáhnutím prstem zahájí posouvání vodorovně CarouselView, levá položka se zarovná doleva od zobrazení:

Screenshot of a CarouselView with start snap points, on iOS and Android

Střed

Člen SnapPointsAlignment.Center označuje, že body přichycení jsou zarovnané se středem položek.

Ve výchozím nastavení CarouselViewje SnapPointsAlignment vlastnost nastavena na Center. Pro úplnost však následující příklad XAML ukazuje, jak nastavit tento člen výčtu:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Když uživatel potáhnutím prstem zahájí posouvání vodorovně CarouselView, zarovná se středová položka se středem zobrazení:

Screenshot of a CarouselView with center snap points, on iOS and Android

End

Člen SnapPointsAlignment.End označuje, že body přichycení jsou zarovnané se koncovým okrajem položek. Následující příklad XAML ukazuje, jak nastavit tento člen výčtu:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

Když uživatel potáhnutím prstem zahájí posouvání vodorovně CarouselView, zarovná se pravá položka doprava od zobrazení.

Screenshot of a CarouselView with end snap points, on iOS and Android