Xamarin.Forms Rozložení CollectionView

Stáhnout ukázku Stažení ukázky

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

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

Ve výchozím nastavení CollectionView se položky zobrazí ve svislém seznamu. Můžete ale použít libovolné z následujících rozložení:

  • Svislý seznam – jeden sloupcový seznam, který se svisle zvětšuje při přidání nových položek.
  • Vodorovný seznam – seznam s jedním řádkem, který se bude při přidání nových položek zvětšovat vodorovně.
  • Svislá mřížka – mřížka s více sloupci, která se svisle zvětšuje při přidání nových položek.
  • Vodorovná mřížka – víceřádkové mřížky, která se při přidání nových položek zvětšuje vodorovně.

Tato rozložení lze zadat nastavením vlastnosti Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na třídu odvozenou ItemsLayout z třídy ItemsLayout . Tato třída definuje následující vlastnosti:

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že vlastnosti mohou být cíle datových vazeb. Další informace o bodech přichycení najdete v části Body přichycení v průvodci.

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

  • Vertical označuje, že CollectionView se při přidání položek svisle rozbalí.
  • Horizontal označuje, že se bude při přidání CollectionView položek rozbalovat horizontálně.

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

Třída GridItemsLayout dědí z ItemsLayout třídy a definuje následující vlastnosti:

  • VerticalItemSpacing, typu , který představuje svislé prázdné double 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.
  • HorizontalItemSpacing, typu double , který představuje vodorovný prázdný prostor 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.
  • Span, typu int , který představuje počet sloupců nebo řádků, které se mají zobrazit v mřížce. Výchozí hodnota této vlastnosti je 1 a její hodnota musí být vždy větší nebo rovna 1.

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

Poznámka

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

Svislý seznam

Ve výchozím nastavení CollectionView se jeho položky zobrazí ve svislém rozložení seznamu. Proto není nutné nastavit vlastnost Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">pro použití tohoto ItemsLayout rozložení:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Pro úplnost ale můžete v XAML nastavit tak, aby se jeho položky v seznamu svisle zobrazují, a to nastavením vlastnosti CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout na VerticalList :

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

Můžete to také provést nastavením vlastnosti _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na objekt a zadáním člena výčtu jako hodnoty ItemsLayoutLinearItemsLayoutVerticalItemsLayoutOrientationOrientation vlastnosti:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

Výsledkem je jeden seznam sloupců, který se svisle zvětšuje při přidání nových položek:

obrazovky s rozloženímsvislého seznamu CollectionView v iOSu aAndroiduZobrazování

Vodorovný seznam

V jazyce XAML může objekt zobrazit své položky ve vodorovném seznamu nastavením Xamarin_Forms CollectionViewCollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout vlastnost na HorizontalList :

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Toto rozložení můžete také provést nastavením vlastnosti _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na objekt a zadáním člena výčtu jako hodnoty ItemsLayoutLinearItemsLayoutHorizontalItemsLayoutOrientationOrientation vlastnosti:

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

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

Výsledkem je jeden seznam řádků, který se bude při přidání nových položek zvětšovat horizontálně:

obrazovky s rozložením vodorovného seznamuCollectionView v iOSu a AndroiduRozložení

Svislá mřížka

V jazyce XAML může objekt zobrazit své položky ve svislé mřížce nastavením Xamarin_Forms CollectionViewCollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout vlastnost na VerticalGrid :

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalGrid, 2">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Toto rozložení můžete také provést nastavením vlastnosti _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na objekt, jehož vlastnost ItemsLayout Xamarin_Forms GridItemsLayoutItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationVertical je nastavená na :

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};

Ve výchozím nastavení bude svislé GridItemsLayout zobrazení položek v jednom sloupci. Tento příklad ale nastaví vlastnost GridItemsLayout.Span na 2. Výsledkem je mřížka se dvěma sloupci, která se svisle zvětšuje při přidání nových položek:

Snímek obrazovky s rozložením svislémřížky CollectionView v iOSu aAndroiduZobrazování

Vodorovná mřížka

V jazyce XAML může objekt zobrazit své položky ve vodorovné mřížce nastavením Xamarin_Forms CollectionViewCollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout vlastnost na HorizontalGrid :

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalGrid, 4">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Toto rozložení můžete také provést nastavením vlastnosti _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na objekt, jehož vlastnost ItemsLayout Xamarin_Forms GridItemsLayoutItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationHorizontal je nastavená na :

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};

Ve výchozím nastavení bude GridItemsLayout vodorovně zobrazovat položky v jednom řádku. Tento příklad ale nastaví vlastnost GridItemsLayout.Span na 4. Výsledkem je mřížka se čtyřmi řádky, která roste vodorovně při přidání nových položek:

Snímek obrazovky s rozložením vodorovnémřížky CollectionView v iOSu a AndroiduUrozložení vodorovné

Záhlaví a zápatí

CollectionView může zobrazit záhlaví a zápatí, které se posouváním nachází s položkami v seznamu. Záhlaví a zápatí mohou být řetězce, zobrazení nebo DataTemplate objekty.

CollectionView definuje následující vlastnosti pro zadání záhlaví a zápatí:

  • Headertyp object určuje řetězec, vazbu nebo zobrazení, které se zobrazí na začátku seznamu.
  • HeaderTemplatetyp DataTemplate určuje , který se má použít k formátování DataTemplateHeader .
  • Footertyp object určuje řetězec, vazbu nebo zobrazení, které se zobrazí na konci seznamu.
  • FooterTemplatetyp DataTemplate určuje , který se má použít k formátování DataTemplateFooter .

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

Když se záhlaví přidá do rozložení, které se zvětšuje vodorovně zleva doprava, zobrazí se nalevo od seznamu. Podobně když se zápatí přidá do rozložení, které se zvětšuje vodorovně a zleva doprava, zobrazí se zápatí napravo od seznamu.

Vlastnosti HeaderFooter a lze nastavit na string hodnoty, jak je znázorněno v následujícím příkladu:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="Monkeys"
                Footer="2019">
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    Header = "Monkeys",
    Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Výsledkem tohoto kódu jsou následující snímky obrazovky se záhlavím zobrazeným na snímku obrazovky iOSu a zápatím zobrazeným na snímku obrazovky Androidu:

Záhlaví a Snímek obrazovky se záhlavím a zápatím řetězce CollectionView v záhlaví a zápatí řetězce CollectionView pro iOS a Android

Vlastnosti HeaderFooter a lze nastavit na zobrazení. Může to být jedno zobrazení nebo zobrazení, které obsahuje více podřízených zobrazení. Následující příklad ukazuje vlastnosti a Header u každé sady na FooterStackLayout objekt, který obsahuje objekt Label :

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.Header>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Header>
    <CollectionView.Footer>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Xamarin Monkey"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Footer>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    Header = new StackLayout
    {
        Children =
        {
            new Label { Text = "Monkeys", ... }
        }
    },
    Footer = new StackLayout
    {
        Children =
        {
            new Label { Text = "Friends of Xamarin Monkey", ... }
        }
    }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Výsledkem tohoto kódu jsou následující snímky obrazovky se záhlavím zobrazeným na snímku obrazovky iOSu a zápatím zobrazeným na snímku obrazovky Androidu:

Záhlaví a Snímek obrazovky se záhlavím a zápatím CollectionView pomocí zobrazení viOSu a AndroiduZáhlaví a zápatí Zobrazení

Vlastnosti HeaderTemplateFooterTemplate a lze nastavit na DataTemplate objekty, které se používají k formátování záhlaví a zápatí. V tomto scénáři musí vlastnosti a vytvořit vazbu k aktuálnímu zdroji, aby se šablony použily, jak je znázorněno HeaderFooter v následujícím příkladu:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="{Binding .}"
                Footer="{Binding .}">
    <CollectionView.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.FooterTemplate>
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    HeaderTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    }),
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    })
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Výsledkem tohoto kódu jsou následující snímky obrazovky se záhlavím zobrazeným na snímku obrazovky iOSu a zápatím zobrazeným na snímku obrazovky Androidu:

Snímek obrazovky se záhlavím a zápatím CollectionView pomocí šablonv iOSu a AndroiduZáhlaví a zápatí

Mezery mezi položkami

Ve výchozím nastavení není mezi jednotlivými položkami v CollectionView . Toto chování lze změnit nastavením vlastností v rozložení položek, které používá CollectionView .

Když objekt nastaví CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na objekt, může být vlastnost nastavena na hodnotu, která představuje mezeru mezi ItemsLayoutLinearItemsLayoutLinearItemsLayout.ItemSpacingdouble položkami:

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

Poznámka

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

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

Výsledkem tohoto kódu je svislý seznam s jedním sloupcem, který obsahuje mezery 20 mezi položkami:

Snímek obrazovky s objektem CollectionView s mezerami mezi položkamiv iOSu aAndroiduPostup položek

Když objekt nastaví Xamarin_Forms CollectionViewCollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">na ItemsLayoutGridItemsLayout objekt, GridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing vlastnosti a double lze nastavit na hodnoty, které představují prázdné místo svisle a vodorovně mezi položkami:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="20"
                        HorizontalItemSpacing="30" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Poznámka

Vlastnosti GridItemsLayout.VerticalItemSpacing a mají nastavená zpětná volání ověření, která zajišťují, že hodnoty vlastností jsou vždy větší než nebo GridItemsLayout.HorizontalItemSpacing rovno 0.

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
    {
        VerticalItemSpacing = 20,
        HorizontalItemSpacing = 30
    }
};

Výsledkem tohoto kódu je svislá mřížka se dvěma sloupci, která má svislé mezery 20 mezi položkami a vodorovné mezery 30 mezi položkami:

Snímek obrazovky s objektem CollectionView s mezerami mezi položkamiv androidové kolekciZobrazování

Velikost položky

Ve výchozím nastavení je každá položka v souboru jednotlivě měřená a má velikost za předpokladu, že prvky uživatelského rozhraní v souboru CollectionViewDataTemplate nezadá pevné velikosti. Toto chování, které lze změnit, je určeno Xamarin_Forms _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">hodnotu CollectionView.ItemSizingStrategy vlastnosti. Tuto hodnotu vlastnosti lze nastavit na jeden ze ItemSizingStrategy členů výčtu:

  • MeasureAllItems – každá položka se měří jednotlivě. Toto je výchozí hodnota.
  • MeasureFirstItem – měří se jenom první položka, kdy všechny následné položky mají stejnou velikost jako první položka.

Důležité

Strategie určení velikosti bude mít za následek zvýšení výkonu při použití v situacích, kdy má být velikost položky MeasureFirstItem jednotná napříč všemi položkami.

Následující příklad kódu ukazuje nastavení Xamarin_Forms _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">ItemSizingStrategy vlastnost:

<CollectionView ...
                ItemSizingStrategy="MeasureFirstItem">
    ...
</CollectionView>

Ekvivalentní kód jazyka C# je:

CollectionView collectionView = new CollectionView
{
    ...
    ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};

Dynamická změna velikosti položek

Položky v objektu lze dynamicky měnit za běhu změnou vlastností prvků souvisejících CollectionView s rozložením v rámci DataTemplate objektu . Například následující příklad kódu změní vlastnosti Xamarin_Forms _VisualElement_HeightRequest" data-linktype="absolute-path">and HeightRequest Xamarin_Forms HeightRequest _VisualElement_WidthRequest" data-linktype="absolute-path">WidthRequestImage objektu:

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}

Obslužná rutina události se spustí v reakci na objekt, na který jste klepli, a změní rozměry obrázku tak, aby byl snadněji OnImageTappedImage prohlížet:

Snímek obrazovky s objektem CollectionView s dynamickou velikostí položekv iOSu aAndroiduZměnná velikost

Rozložení zprava doleva

CollectionViewmůže rozložení obsahu ve směru toku zprava doleva nastavením vlastnosti CollectionView Xamarin_Forms _VisualElement_FlowDirection" data-linktype="absolute-path">na FlowDirection Xamarin_Forms _FlowDirection_RightToLeft" data-linktype="absolute-path">RightToLeft . Vlastnost by ale měla být v ideálním případě nastavená na stránce nebo kořenovém rozložení, což způsobí, že všechny prvky na stránce nebo v kořenovém rozložení budou odpovídat na směr FlowDirection toku:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
             Title="Vertical list (RTL FlowDirection)"
             FlowDirection="RightToLeft">
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            ...
        </CollectionView>
    </StackLayout>
</ContentPage>

Výchozí hodnota _VisualElement_FlowDirection" data-linktype="absolute-path">pro element s nadřazeným prvkem FlowDirection je FlowDirection Xamarin_Forms _FlowDirection_MatchParent" data-linktype="absolute-path">MatchParent . Proto objekt dědí hodnotu vlastnosti z objektu , který zase dědí CollectionView hodnotu vlastnosti z objektu FlowDirectionStackLayoutFlowDirectionContentPage . Výsledkem je rozložení zprava doleva, které je znázorněno na následujících snímcích obrazovky:

seznamu zprava doleva v CollectionView Snímek obrazovky s rozložením svislého seznamu zprava doleva viOSu aAndroiduZobrazování rozložení svislého seznamu zprava

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