Xamarin.Forms CollectionView-Layout

Artikel
07/13/2023

CollectionView definiert die folgenden Eigenschaften, die das Layout steuern:

ItemsLayoutvom Typ IItemsLayoutgibt das zu verwendende Layout an.
ItemSizingStrategyvom Typ ItemSizingStrategygibt die zu verwendende Elementmeasurstrategie an.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Standardmäßig CollectionView werden seine Elemente in einer vertikalen Liste angezeigt. Es kann jedoch eines der folgenden Layouts verwendet werden:

Vertikale Liste: Eine einspaltige Liste, die vertikal vergrößert wird, wenn neue Elemente hinzugefügt werden.
Horizontale Liste: Eine einzelne Zeilenliste, die horizontal vergrößert wird, wenn neue Elemente hinzugefügt werden.
Vertikales Raster– ein mehrspaltiges Raster, das vertikal vergrößert wird, wenn neue Elemente hinzugefügt werden.
Horizontales Raster: Ein raster mit mehreren Zeilen, das horizontal vergrößert wird, wenn neue Elemente hinzugefügt werden.

Diese Layouts können durch Festlegen der -Eigenschaft auf die ItemsLayout -Klasse festgelegt werden, die von der ItemsLayout -Klasse abgeleitet wird. Diese Klasse definiert die folgenden Eigenschaften:

Orientationvom Typ ItemsLayoutOrientationgibt die Richtung an, in der der CollectionView erweitert wird, wenn Elemente hinzugefügt werden.
SnapPointsAlignmentvom Typ SnapPointsAlignmentgibt an, wie Andockpunkte an Elementen ausgerichtet werden.
SnapPointsTypevom Typ SnapPointsTypegibt das Verhalten von Andockpunkten beim Scrollen an.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können. Weitere Informationen zu Andockpunkten finden Sie unter Andockpunkte im Xamarin.Forms CollectionView-Bildlaufhandbuch .

Die ItemsLayoutOrientation-Enumeration definiert die folgenden Member:

Vertical gibt an, dass vertikal CollectionView erweitert wird, wenn Elemente hinzugefügt werden.
Horizontal gibt an, dass horizontal CollectionView erweitert wird, wenn Elemente hinzugefügt werden.

Die LinearItemsLayout -Klasse erbt von der ItemsLayout -Klasse und definiert eine ItemSpacing Eigenschaft vom Typ double, die den leeren Leerraum um jedes Element darstellt. Der Standardwert dieser Eigenschaft ist 0, und ihr Wert muss immer größer oder gleich 0 sein. Die LinearItemsLayout -Klasse definiert auch statische Vertical Elemente und Horizontal Member. Diese Member können verwendet werden, um vertikale bzw. horizontale Listen zu erstellen. Alternativ kann ein LinearItemsLayout -Objekt erstellt werden, das einen Enumerationsmember ItemsLayoutOrientation als Argument angibt.

Die GridItemsLayout -Klasse erbt von der ItemsLayout -Klasse und definiert die folgenden Eigenschaften:

VerticalItemSpacingvom Typ double, das den vertikalen leeren Raum um jedes Element darstellt. Der Standardwert dieser Eigenschaft ist 0, und ihr Wert muss immer größer oder gleich 0 sein.
HorizontalItemSpacingvom Typ double, das den horizontalen leerer Bereich um jedes Element darstellt. Der Standardwert dieser Eigenschaft ist 0, und ihr Wert muss immer größer oder gleich 0 sein.
Spanvom Typ int, das die Anzahl der Spalten oder Zeilen darstellt, die im Raster angezeigt werden sollen. Der Standardwert dieser Eigenschaft ist 1, und ihr Wert muss immer größer oder gleich 1 sein.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Hinweis

CollectionView verwendet die nativen Layout-Engines, um das Layout auszuführen.

Vertikale Liste

Standardmäßig CollectionView werden die zugehörigen Elemente in einem vertikalen Listenlayout angezeigt. Daher ist es nicht erforderlich, die -Eigenschaft für die ItemsLayout Verwendung dieses Layouts festzulegen:

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

Aus Gründen der Vollständigkeit kann in XAML jedoch CollectionView festgelegt werden, dass seine Elemente in einer vertikalen Liste angezeigt werden, indem die ItemsLayout -Eigenschaft auf VerticalListfestgelegt wird:

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

Alternativ können Sie dies auch erreichen, indem Sie die ItemsLayout -Eigenschaft auf ein LinearItemsLayout -Objekt festlegen und dabei den VerticalItemsLayoutOrientation Enumerationsmember als Orientation Eigenschaftswert angeben:

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

Der entsprechende C#-Code lautet:

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

Dies führt zu einer einzelnen Spaltenliste, die vertikal wächst, wenn neue Elemente hinzugefügt werden:

Horizontale Liste

In XAML kann ein CollectionView seine Elemente in einer horizontalen Liste anzeigen, indem seine ItemsLayout -Eigenschaft auf HorizontalListfestgelegt wird:

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

Alternativ kann dieses Layout auch erreicht werden, indem die ItemsLayout -Eigenschaft auf ein LinearItemsLayout -Objekt festgelegt wird und der HorizontalItemsLayoutOrientation Enumerationsmember als Orientation Eigenschaftswert angegeben wird:

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

Der entsprechende C#-Code lautet:

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

Dies führt zu einer einzelnen Zeilenliste, die horizontal wächst, wenn neue Elemente hinzugefügt werden:

Vertikales Raster

In XAML kann ein CollectionView seine Elemente in einem vertikalen Raster anzeigen, indem seine ItemsLayout -Eigenschaft auf VerticalGridfestgelegt wird:

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

Alternativ kann dieses Layout auch erreicht werden, indem die ItemsLayout -Eigenschaft auf ein GridItemsLayout -Objekt festgelegt wird, dessen Orientation -Eigenschaft auf Verticalfestgelegt ist:

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

Der entsprechende C#-Code lautet:

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

Standardmäßig werden in einer vertikalen GridItemsLayout Spalte Elemente in einer einzelnen Spalte angezeigt. In diesem Beispiel wird die GridItemsLayout.Span -Eigenschaft jedoch auf 2 festgelegt. Dies führt zu einem zweispaltigen Raster, das vertikal wächst, wenn neue Elemente hinzugefügt werden:

Horizontales Raster

In XAML kann ein CollectionView seine Elemente in einem horizontalen Raster anzeigen, indem seine ItemsLayout -Eigenschaft auf HorizontalGridfestgelegt wird:

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

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

Der entsprechende C#-Code lautet:

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

Standardmäßig werden elemente in einer horizontalen GridItemsLayout Zeile angezeigt. In diesem Beispiel wird die GridItemsLayout.Span -Eigenschaft jedoch auf 4 festgelegt. Dies führt zu einem vierzeiligen Raster, das horizontal vergrößert wird, wenn neue Elemente hinzugefügt werden:

Kopf- und Fußzeilen

CollectionView kann eine Kopf- und Fußzeile darstellen, die mit den Elementen in der Liste scrollen. Die Kopf- und Fußzeile kann Zeichenfolgen, Ansichten oder DataTemplate Objekte sein.

CollectionView definiert die folgenden Eigenschaften zum Angeben der Kopf- und Fußzeile:

Headervom Typ objectgibt die Zeichenfolge, Bindung oder Sicht an, die am Anfang der Liste angezeigt wird.
HeaderTemplatevom Typ DataTemplategibt die an, die DataTemplate zum Formatieren von Headerverwendet werden soll.
Footervom Typ objectgibt die Zeichenfolge, Bindung oder Sicht an, die am Ende der Liste angezeigt wird.
FooterTemplatevom Typ DataTemplategibt die an, die DataTemplate zum Formatieren von Footerverwendet werden soll.

Diese Eigenschaften werden von BindableProperty -Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können.

Wenn einem Layout, das horizontal von links nach rechts anwächst, eine Kopfzeile hinzugefügt wird, wird die Kopfzeile links neben der Liste angezeigt. Analog dazu wird beim Hinzufügen einer Fußzeile zu einem layout, das horizontal von links nach rechts wächst, die Fußzeile rechts neben der Liste angezeigt.

Anzeigen von Zeichenfolgen in Kopf- und Fußzeile

Die Header Eigenschaften und Footer können auf string Werte festgelegt werden, wie im folgenden Beispiel gezeigt:

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

Der entsprechende C#-Code lautet:

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

Dieser Code führt zu den folgenden Screenshots, wobei die Kopfzeile im iOS-Screenshot und die Fußzeile im Android-Screenshot angezeigt wird:

Anzeigen von Ansichten in Kopf- und Fußzeile

Die Header Eigenschaften und Footer können jeweils auf eine Ansicht festgelegt werden. Dies kann eine einzelne Ansicht oder eine Ansicht sein, die mehrere untergeordnete Ansichten enthält. Im folgenden Beispiel werden die Header Eigenschaften und Footer jeweils auf ein StackLayout -Objekt festgelegt, das ein Label -Objekt enthält:

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

Der entsprechende C#-Code lautet:

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");

Dieser Code führt zu den folgenden Screenshots, wobei die Kopfzeile im iOS-Screenshot und die Fußzeile im Android-Screenshot angezeigt wird:

Anzeigen einer kopf- und fußzeilenbasierten Vorlage

Die HeaderTemplate Eigenschaften und FooterTemplate können auf DataTemplate Objekte festgelegt werden, die zum Formatieren der Kopf- und Fußzeile verwendet werden. In diesem Szenario müssen die Header Eigenschaften und Footer an die aktuelle Quelle gebunden werden, damit die vorlagen angewendet werden, wie im folgenden Beispiel gezeigt:

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

Der entsprechende C#-Code lautet:

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");

Dieser Code führt zu den folgenden Screenshots, wobei die Kopfzeile im iOS-Screenshot und die Fußzeile im Android-Screenshot angezeigt wird:

Elementabstand

Standardmäßig ist zwischen jedem Element in einem CollectionViewkein Leerzeichen vorhanden. Dieses Verhalten kann geändert werden, indem Eigenschaften für das von CollectionViewverwendete Elementlayout festgelegt werden.

Wenn eine CollectionView - ItemsLayout Eigenschaft auf ein LinearItemsLayout -Objekt festlegt, kann die LinearItemsLayout.ItemSpacing -Eigenschaft auf einen double Wert festgelegt werden, der den Abstand zwischen Elementen darstellt:

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

Hinweis

Die LinearItemsLayout.ItemSpacing Eigenschaft verfügt über einen Überprüfungsrückrufsatz, der sicherstellt, dass der Wert der Eigenschaft immer größer oder gleich 0 ist.

Der entsprechende C#-Code lautet:

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

Dieser Code führt zu einer vertikalen Einzelspaltenliste mit einem Abstand von 20 zwischen Elementen:

Wenn eine CollectionView - ItemsLayout Eigenschaft auf ein GridItemsLayout -Objekt festlegt, können die GridItemsLayout.VerticalItemSpacing Eigenschaften und GridItemsLayout.HorizontalItemSpacing auf double Werte festgelegt werden, die den leeren Raum vertikal und horizontal zwischen Elementen darstellen:

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

Hinweis

Für die GridItemsLayout.VerticalItemSpacing Eigenschaften und GridItemsLayout.HorizontalItemSpacing sind Überprüfungsrückrufe festgelegt, die sicherstellen, dass die Werte der Eigenschaften immer größer oder gleich 0 sind.

Der entsprechende C#-Code lautet:

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

Dieser Code führt zu einem vertikalen zweispaltigen Raster, das einen vertikalen Abstand von 20 zwischen Elementen und einen horizontalen Abstand von 30 zwischen Elementen aufweist:

Elementdimensionierung

Standardmäßig wird jedes Element in einem CollectionView einzeln gemessen und dimensioniert, vorausgesetzt, die UI-Elemente in der DataTemplate geben keine festen Größen an. Dieses Verhalten, das geändert werden kann, wird durch den CollectionView.ItemSizingStrategy Eigenschaftswert angegeben. Dieser Eigenschaftswert kann auf eines der ItemSizingStrategy Enumerationsmber festgelegt werden:

MeasureAllItems – Jedes Element wird einzeln gemessen. Dies ist der Standardwert.
MeasureFirstItem – nur das erste Element wird gemessen, wobei alle nachfolgenden Elemente die gleiche Größe wie das erste Element erhalten.

Wichtig

Die MeasureFirstItem Größenanpassungsstrategie führt zu einer höheren Leistung, wenn sie in Situationen verwendet wird, in denen die Elementgröße für alle Elemente einheitlich sein soll.

Das folgende Codebeispiel zeigt das Festlegen der ItemSizingStrategy Eigenschaft:

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

Der entsprechende C#-Code lautet:

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

Dynamische Größenänderung von Elementen

Elemente in einem CollectionView können zur Laufzeit dynamisch geändert werden, indem layoutbezogene Eigenschaften von Elementen innerhalb von DataTemplategeändert werden. Im folgenden Codebeispiel werden beispielsweise die HeightRequest Eigenschaften und WidthRequest eines Image Objekts geändert:

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

Der OnImageTapped Ereignishandler wird als Reaktion auf ein Image Objekt ausgeführt, auf das getippt wird, und ändert die Dimensionen des Bilds, sodass es einfacher angezeigt wird:

Rechts-nach-Links-Layout

CollectionView kann den Inhalt in einer Flussrichtung von rechts nach links layouten, indem die FlowDirection -Eigenschaft auf festgelegt wird RightToLeft. Die FlowDirection Eigenschaft sollte jedoch idealerweise für ein Seiten- oder Stammlayout festgelegt werden, wodurch alle Elemente innerhalb der Seite oder des Stammlayouts auf die Flussrichtung reagieren:

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

Der Standardwert FlowDirection für ein Element mit einem übergeordneten Element ist MatchParent. Daher erbt der CollectionView - FlowDirection Eigenschaftswert von , der StackLayoutwiederum den FlowDirection Eigenschaftswert von ContentPageerbt. Dies führt zu einem Rechts-nach-Links-Layout, das in den folgenden Screenshots dargestellt ist:

Weitere Informationen zur Flussrichtung finden Sie unter Lokalisierung von rechts nach links.

Xamarin.Forms CollectionView-Layout

Vertikale Liste

Horizontale Liste

Vertikales Raster

Horizontales Raster

Kopf- und Fußzeilen

Anzeigen von Zeichenfolgen in Kopf- und Fußzeile

Anzeigen von Ansichten in Kopf- und Fußzeile

Anzeigen einer kopf- und fußzeilenbasierten Vorlage

Elementabstand

Elementdimensionierung

Dynamische Größenänderung von Elementen

Rechts-nach-Links-Layout

Verwandte Links

Zusätzliche Ressourcen