Xamarin.Forms Rozložení CarouselView

Ukázka stažení Stažení ukázky

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

  • ItemsLayouttyp LinearItemsLayout určuje rozložení, které se má použít.
  • PeekAreaInsetstyp Thickness Určuje, kolik má být sousedním položkám částečně viditelné.

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

Ve výchozím nastavení se CarouselView zobrazí jeho položky ve vodorovné orientaci. Na obrazovce se zobrazí jedna položka s gesty potažení, která mají za následek Přeposílání a zpětná navigace prostřednictvím kolekce položek. Je ale možné použít i vertikální orientaci. Důvodem je, že ItemsLayout vlastnost je typu LinearItemsLayout , který dědí z ItemsLayout třídy. ItemsLayoutTřída definuje následující vlastnosti:

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že vlastnosti mohou být cílem datových vazeb. Další informace o bodech přichycení najdete v tématu body přichycení v příručce.

ItemsLayoutOrientationVýčet definuje následující členy:

  • Vertical indikuje, že se při CarouselView Přidání položek rozbalí svisle.
  • Horizontal indikuje, že se při CarouselView Přidání položek rozbalí vodorovně.

LinearItemsLayoutTřída 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ší nebo rovna 0. LinearItemsLayoutTřída také definuje statické Vertical a Horizontal členy. Tyto členy lze použít k vytvoření svislých nebo vodorovných seznamů v uvedeném pořadí. Alternativně LinearItemsLayout lze vytvořit objekt a zadat ItemsLayoutOrientation člena výčtu jako argument.

Poznámka

CarouselView k provedení rozložení používá nativní rozložení modulů.

Horizontální rozložení

Ve výchozím nastavení CarouselView se položky zobrazí vodorovně. Proto není nutné nastavovat Xamarin_Forms vlastnost _CarouselView_ItemsLayout data-LINKTYPE = "absolutní cesta" >ItemsLayout k 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>

Alternativně lze toto rozložení dosáhnout také nastavením _CarouselView_ItemsLayout Xamarin_Forms vlastností data-LINKTYPE = "absolutní cesta" >ItemsLayoutLinearItemsLayout objektu, zadáním HorizontalItemsLayoutOrientation člena výčtu jako Orientation hodnoty vlastnosti:

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

Ekvivalentní kód jazyka C#:

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

Výsledkem je rozložení, které se během přidávání nových položek zvětšuje vodorovně:

Snímek obrazovky ve vodorovném rozloženíCarouselView na iOS a Androidu

Svislé rozložení

CarouselViewlze zobrazit položky svisle nastavením CarouselView Xamarin_Forms _CarouselView_ItemsLayout "data-LINKTYPE =" absolutní cesta ">ItemsLayout vlastnost na LinearItemsLayout objekt a zadáním VerticalItemsLayoutOrientation člena výčtu jako Orientation 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#:

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

Výsledkem je rozložení, které se rozroste svisle při přidání nových položek:

snímku CarouselView vertikálního rozložení v iOS a Androidu

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

Ve výchozím nastavení CarouselView zobrazí úplné položky najednou. Toto chování však lze změnit nastavením PeekAreaInsets vlastnosti na Thickness hodnotu, která určuje, kolik má být sousedním položkám částečně viditelné. To může být užitečné pro uživatele, kteří mají další položky k zobrazení. 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#:

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

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

snímek obrazovky CollectionView s částečně viditelnými sousedními položkami v oblasti iOS a Android

Mezery mezi položkami

Ve výchozím nastavení neexistuje žádná mezera mezi jednotlivými položkami v CarouselView . Toto chování lze změnit nastavením ItemSpacing vlastnosti v rozložení položky používané v CarouselView .

Když CarouselView nastaví jeho CarouselView Xamarin_Forms _CarouselView_ItemsLayout "data-LINKTYPE =" absolutní cesta ">ItemsLayout vlastnost LinearItemsLayout objektu, LinearItemsLayout.ItemSpacing vlastnost může být nastavena na double hodnotu, která představuje prostor mezi položkami:

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

Poznámka

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

Ekvivalentní kód jazyka C#:

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

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

Dynamické změny velikosti položek

Položky v CarouselView lze dynamicky měnit velikost za běhu změnou rozložení souvisejících vlastností prvků v rámci DataTemplate . Například následující příklad kódu změní _VisualElement_HeightRequest "data-LINKTYPE =" absolutní cesta ">HeightRequest a HeightRequest Xamarin_Forms _VisualElement_WidthRequest" data-linktype = "absolutní cesta" >WidthRequest vlastnosti Image objektu a HeightRequest vlastnost svého nadřazeného prvku Frame :

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

OnImageTappedObslužná rutina události je spuštěna v reakci na Image objekt, na který je klepnuto, a mění rozměry obrázku (a jeho nadřazeného objektu Frame ), aby bylo snazší je zobrazit:

obrazovky pro CarouselView s dynamickým určením velikosti položek v iOS a Androidu

Rozložení zprava doleva

CarouselViewumožňuje rozložení obsahu v směrovém směru zprava doleva nastavením jeho CarouselView Xamarin_Forms _VisualElement_FlowDirection "data-LINKTYPE =" absolutní cesta ">FlowDirection vlastnost Xamarin_Forms _FlowDirection_RightToLeft" data-linktype = "absolutní cesta" >RightToLeft . FlowDirectionVlastnost by se však měla v ideálním případě nastavit na stránce nebo kořenovém rozložení, což způsobí, že všechny prvky v rámci stránky nebo kořenové rozložení budou reagovat 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í _VisualElement_FlowDirection "data-LINKTYPE =" absolutní cesta ">FlowDirection pro element s nadřazeným objektem je FlowDirection Xamarin_Forms _FlowDirection_MatchParent" data-linktype = "absolutní cesta" >MatchParent . Proto CarouselView dědí FlowDirection hodnotu vlastnosti z ContentPage .

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