Xamarin.Forms Rozložení CarouselView

Download Sample Stažení ukázky

CarouselView definuje následující vlastnosti, které řídí rozložení:

  • ItemsLayout, typu LinearItemsLayout, určuje rozložení, které se má použít.
  • PeekAreaInsets, typu Thickness, určuje, kolik má být sousední položky částečně viditelné.

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

Ve výchozím nastavení CarouselView se položky zobrazí ve vodorovné orientaci. Na obrazovce se zobrazí jedna položka s gesty potáhnutím prstem, která vedou k navigaci vpřed a dozadu v kolekci položek. Je však také možné použít svislou orientaci. Důvodem je to, ItemsLayout že vlastnost je typu LinearItemsLayout, která dědí z ItemsLayout třídy. Třída ItemsLayout definuje následující vlastnosti:

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cíle datových vazeb. Další informace o bodech přichycení naleznete v části Přichycení bodů v Xamarin.Forms Průvodci posouváním collectionView .

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

  • Vertical označuje, že CarouselView se při přidávání položek bude rozbalit svisle.
  • Horizontal označuje, že se rozbalí CarouselView vodorovně při přidávání položek.

Třída LinearItemsLayout dědí z ItemsLayout třídy a definuje ItemSpacing vlastnost typu double, která představuje prázdné místo kolem každé položky. Výchozí hodnota této vlastnosti je 0 a její hodnota musí být vždy větší než nebo rovna 0. Třída LinearItemsLayout také definuje statické Vertical a Horizontal členy. Tyto členy lze použít k vytvoření svislých nebo vodorovných seznamů. Alternativně LinearItemsLayout lze vytvořit objekt, který jako argument zadá ItemsLayoutOrientation člen výčtu.

Poznámka

CarouselView používá moduly nativního rozložení k provedení rozložení.

Vodorovné rozložení

Ve výchozím nastavení CarouselView se položky zobrazí vodorovně. Proto není nutné nastavit ItemsLayout vlastnost pro použití tohoto rozložení:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Toto rozložení lze také provést nastavením ItemsLayout vlastnosti na LinearItemsLayout objekt a určenímItemsLayoutOrientationHorizontalčlena výčtu Orientation jako hodnoty vlastnosti:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

Výsledkem je horizontální nárůst rozložení při přidávání nových položek:

Screenshot of a CarouselView horizontal layout, on iOS and Android

Svislé rozložení

CarouselViewmůže zobrazit své položky svisle nastavením ItemsLayout vlastnosti na LinearItemsLayout objekt, zadánímItemsLayoutOrientationVerticalčlena výčtu Orientation jako hodnoty vlastnosti:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

Výsledkem je vertikální nárůst rozložení při přidávání nových položek:

Screenshot of a CarouselView vertical layout, on iOS and Android

Částečně viditelné sousední položky

Ve výchozím nastavení CarouselView se zobrazí úplné položky najednou. Toto chování však lze změnit nastavením PeekAreaInsets vlastnosti na Thickness hodnotu, která určuje, kolik mají být sousední položky částečně viditelné. To může být užitečné k označení uživatelů, že se mají zobrazit další položky. Následující kód XAML ukazuje příklad nastavení této vlastnosti:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    ...
</CarouselView>

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ...
    PeekAreaInsets = new Thickness(100)
};

Výsledkem je, že sousední položky jsou částečně vystavené na obrazovce:

Screenshot of a CollectionView with partially visible adjacent items, on iOS and Android

Mezery mezi položkami

Ve výchozím nastavení není mezi jednotlivými položkami v objektu CarouselView. Toto chování lze změnit nastavením ItemSpacing vlastnosti v rozložení položek, které CarouselViewpoužívá .

CarouselView Když nastaví jeho ItemsLayout vlastnost na LinearItemsLayout objekt, LinearItemsLayout.ItemSpacing vlastnost může být nastavena double na hodnotu, která představuje mezeru mezi položkami:

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Poznámka

Vlastnost LinearItemsLayout.ItemSpacing má sadu zpětného volání ověření, která zajišťuje, že hodnota vlastnosti je vždy větší nebo rovna 0.

Ekvivalentní kód jazyka C# je:

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

Výsledkem tohoto kódu je svislé rozložení, které má mezeru 20 mezi položkami.

Dynamická změna velikosti položek

Položky v objektu CarouselView mohou být dynamicky změněny za běhu změnou vlastností souvisejících s rozložením prvků v rámci DataTemplate. Například následující příklad kódu změní HeightRequest a WidthRequest vlastnosti objektu Image a HeightRequest vlastnost jeho nadřazeného Frameobjektu:

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(150) ? 200 : 150;
    Frame frame = ((Frame)image.Parent.Parent);
    frame.HeightRequest = frame.HeightRequest.Equals(300) ? 350 : 300;
}

Obslužná OnImageTapped rutina události se spustí v reakci na objekt, na který Image se klepne, a změní rozměry obrázku (a jeho nadřazeného objektu Frame), aby se snadněji zobrazil:

Screenshot of a CarouselView with dynamic item sizing, on iOS and Android

Rozložení zprava doleva

CarouselView může rozložení obsahu ve směru toku zprava doleva nastavením jeho FlowDirection vlastnosti na RightToLeft. FlowDirection Vlastnost by však měla být v ideálním případě nastavena na stránce nebo kořenovém rozložení, což způsobí, že všechny prvky v rámci stránky nebo kořenového rozložení reagují na směr toku:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CarouselViewDemos.Views.HorizontalTemplateLayoutRTLPage"
             Title="Horizontal layout (RTL FlowDirection)"
             FlowDirection="RightToLeft">    
    <CarouselView ItemsSource="{Binding Monkeys}">
        ...
    </CarouselView>
</ContentPage>

Výchozí hodnota FlowDirection elementu s nadřazeným prvkem je MatchParent. CarouselView Proto dědí FlowDirection hodnotu vlastnosti z ContentPage.

Další informace o směru toku najdete v tématu Lokalizace zprava doleva.