Xamarin.Forms CollectionView Layout

Scaricare l'esempio Scaricare l'esempio

CollectionView definisce le proprietà seguenti che controllano il layout:

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che le proprietà possono essere destinazioni di data binding.

Per impostazione predefinita, CollectionView un oggetto visualizza gli elementi in un elenco verticale. È tuttavia possibile usare uno dei layout seguenti:

  • Elenco verticale: elenco a colonna singola che aumenta verticalmente man mano che vengono aggiunti nuovi elementi.
  • Elenco orizzontale: elenco a riga singola che aumenta orizzontalmente man mano che vengono aggiunti nuovi elementi.
  • Griglia verticale: griglia a più colonne che aumenta verticalmente man mano che vengono aggiunti nuovi elementi.
  • Griglia orizzontale: griglia a più righe che aumenta orizzontalmente man mano che vengono aggiunti nuovi elementi.

Questi layout possono essere specificati impostando la proprietà Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout sulla classe che deriva dalla ItemsLayout classe . Questa classe definisce le proprietà seguenti:

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che le proprietà possono essere destinazioni di data binding. Per altre informazioni sui punti di ancoraggio, vedere Punti di ancoraggio nella guida.

L'enumerazione ItemsLayoutOrientation definisce i membri seguenti:

  • Vertical indica che l'oggetto CollectionView verrà espanso verticalmente quando vengono aggiunti elementi.
  • Horizontal indica che l'oggetto CollectionView verrà espanso orizzontalmente quando vengono aggiunti elementi.

La classe eredita dalla classe e definisce una proprietà, di tipo , che rappresenta LinearItemsLayout lo spazio vuoto intorno a ogni ItemsLayoutItemSpacingdouble elemento. Il valore predefinito di questa proprietà è 0 e il relativo valore deve essere sempre maggiore o uguale a 0. La LinearItemsLayout classe definisce anche membri VerticalHorizontal statici e . Questi membri possono essere usati rispettivamente per creare elenchi verticali o orizzontali. In alternativa, è LinearItemsLayout possibile creare un oggetto , specificando un membro di enumerazione come ItemsLayoutOrientation argomento.

La GridItemsLayout classe eredita dalla classe e definisce le proprietà ItemsLayout seguenti:

  • VerticalItemSpacing, di tipo double , che rappresenta lo spazio vuoto verticale intorno a ogni elemento. Il valore predefinito di questa proprietà è 0 e il relativo valore deve essere sempre maggiore o uguale a 0.
  • HorizontalItemSpacing, di tipo double , che rappresenta lo spazio vuoto orizzontale intorno a ogni elemento. Il valore predefinito di questa proprietà è 0 e il relativo valore deve essere sempre maggiore o uguale a 0.
  • Span, di tipo int , che rappresenta il numero di colonne o righe da visualizzare nella griglia. Il valore predefinito di questa proprietà è 1 e il relativo valore deve essere sempre maggiore o uguale a 1.

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che le proprietà possono essere destinazioni di data binding.

Nota

CollectionView usa i motori di layout nativi per eseguire il layout.

Elenco verticale

Per impostazione predefinita, CollectionView visualizza gli elementi in un layout elenco verticale. Non è quindi necessario impostare la proprietà Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">per ItemsLayout usare questo layout:

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

Tuttavia, per completezza, in XAML è possibile impostare per visualizzare i relativi elementi in un elenco verticale impostando la relativa proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout su VerticalList :

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

In alternativa, questa operazione può essere eseguita anche impostando la proprietà Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">su un oggetto , specificando il membro di enumerazione come valore della ItemsLayoutLinearItemsLayoutVerticalItemsLayoutOrientationOrientation proprietà:

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

Il codice C# equivalente è il seguente:

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

Il risultato è un elenco a colonna singola, che aumenta verticalmente man mano che vengono aggiunti nuovi elementi:

Screenshot di un layout elenco verticaleCollectionView, in iOS e Android

Elenco orizzontale

In XAML, un oggetto può visualizzare i relativi elementi in un elenco orizzontale impostando la relativa proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout su 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>

In alternativa, questo layout può essere ottenuto anche impostando la proprietà Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">su un oggetto , specificando il membro di enumerazione come valore della ItemsLayoutLinearItemsLayoutHorizontalItemsLayoutOrientationOrientation proprietà:

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

Il codice C# equivalente è il seguente:

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

Il risultato è un elenco di righe singole, che aumenta orizzontalmente man mano che vengono aggiunti nuovi elementi:

Screenshot di un layout elencoorizzontale collectionView, in iOS e Android elenco orizzontale di CollectionView)

Griglia verticale

In XAML, un oggetto può visualizzare i relativi elementi in una griglia verticale impostando la relativa proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout su 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>

In alternativa, questo layout può essere ottenuto anche impostando la proprietà data-linktype="absolute-path">di Xamarin_Forms _StructuredItemsView_ItemsLayout" su un oggetto la cui proprietà ItemsLayoutGridItemsLayoutItemsLayout data-linktype="absolute-path"_ItemsLayout_Orientation" di Xamarin_Forms "data-linktype="absolute-path">OrientationVertical è impostata su :

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

Il codice C# equivalente è il seguente:

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

Per impostazione predefinita, un oggetto GridItemsLayout verticale visualizza gli elementi in una singola colonna. Tuttavia, in questo esempio la GridItemsLayout.Span proprietà viene impostata su 2. Il risultato è una griglia a due colonne, che aumenta verticalmente man mano che vengono aggiunti nuovi elementi:

Screenshot di un layout di griglia verticaleCollectionView, in iOS e Android

Griglia orizzontale

In XAML, un oggetto può visualizzare i relativi elementi in una griglia orizzontale impostando la relativa proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout su 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>

In alternativa, questo layout può essere ottenuto anche impostando la proprietà data-linktype="absolute-path">di Xamarin_Forms _StructuredItemsView_ItemsLayout" su un oggetto la cui proprietà ItemsLayoutGridItemsLayoutItemsLayout data-linktype="absolute-path"_ItemsLayout_Orientation" di Xamarin_Forms "data-linktype="absolute-path">OrientationHorizontal è impostata su :

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

Il codice C# equivalente è il seguente:

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

Per impostazione predefinita, un oggetto GridItemsLayout orizzontale visualizza gli elementi in una singola riga. Tuttavia, in questo esempio la GridItemsLayout.Span proprietà viene impostata su 4. Il risultato è una griglia di quattro righe, che aumenta orizzontalmente man mano che vengono aggiunti nuovi elementi:

Screenshot di un layout griglia orizzontale CollectionView, in iOS e AndroidCollectionView horizontal grid layout (Layout griglia orizzontale di

Intestazioni e piè di pagina

CollectionView può presentare un'intestazione e un piè di pagina che scorrono con gli elementi nell'elenco. L'intestazione e il piè di pagina possono essere stringhe, visualizzazioni o DataTemplate oggetti.

CollectionView definisce le proprietà seguenti per specificare l'intestazione e il piè di pagina:

  • Header, di tipo , che specifica la stringa, l'associazione o la visualizzazione che object verrà visualizzata all'inizio dell'elenco.
  • HeaderTemplate, di tipo DataTemplate , che specifica DataTemplate l'oggetto da utilizzare per formattare Header l'oggetto .
  • Footer, di tipo , che specifica la stringa, l'associazione o la visualizzazione che verrà object visualizzata alla fine dell'elenco.
  • FooterTemplate, di tipo DataTemplate , che specifica DataTemplate l'oggetto da utilizzare per formattare Footer l'oggetto .

Queste proprietà sono supportate da BindableProperty oggetti , il che significa che le proprietà possono essere destinazioni di data binding.

Quando un'intestazione viene aggiunta a un layout che aumenta orizzontalmente, da sinistra a destra, l'intestazione viene visualizzata a sinistra dell'elenco. Analogamente, quando un piè di pagina viene aggiunto a un layout che aumenta orizzontalmente, da sinistra a destra, il piè di pagina viene visualizzato a destra dell'elenco.

Le Header proprietà e possono essere impostate su Footerstring valori, come illustrato nell'esempio seguente:

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

Il codice C# equivalente è il seguente:

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

Questo codice genera gli screenshot seguenti, con l'intestazione mostrata nello screenshot iOS e il piè di pagina visualizzato nello screenshot di Android:

Screenshot dell'intestazione e del piè di pagina di una stringaCollectionView, nell'intestazionee nel piè di pagina della per iOS e Android

Le Header proprietà e possono essere impostate su una Footer vista. Può trattarsi di una singola visualizzazione o di una visualizzazione che contiene più visualizzazioni figlio. Nell'esempio seguente vengono illustrate Header le proprietà e impostate su un oggetto che contiene un oggetto FooterStackLayoutLabel :

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

Il codice C# equivalente è il seguente:

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

Questo codice genera gli screenshot seguenti, con l'intestazione mostrata nello screenshot iOS e il piè di pagina visualizzato nello screenshot di Android:

visualizzazione CollectionView Screenshot diun'intestazione eun piè di pagina collectionView con visualizzazioni, in iOS e Android CollectionView Intestazione e piè di pagina della visualizzazione

Le HeaderTemplate proprietà e possono essere impostate su oggetti utilizzati per formattare FooterTemplateDataTemplate l'intestazione e il piè di pagina. In questo scenario le proprietà e devono essere associate all'origine corrente per applicare i modelli, come HeaderFooter illustrato nell'esempio seguente:

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

Il codice C# equivalente è il seguente:

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

Questo codice genera gli screenshot seguenti, con l'intestazione mostrata nello screenshot iOS e il piè di pagina visualizzato nello screenshot di Android:

modello CollectionView Screenshot di un'intestazione e un piè di pagina collectionView con modelli, in intestazione e piè di pagina del modelloCollectionViewe Android

Spaziatura degli elementi

Per impostazione predefinita, non è presente alcuno spazio tra ogni elemento in un oggetto CollectionView . Questo comportamento può essere modificato impostando le proprietà nel layout degli elementi utilizzato da CollectionView .

Quando un oggetto imposta la proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">su un oggetto , la proprietà può essere impostata su un valore che rappresenta lo spazio tra gli ItemsLayoutLinearItemsLayoutLinearItemsLayout.ItemSpacingdouble elementi:

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

Nota

La proprietà ha un callback di convalida impostato, che garantisce che il valore della proprietà sia sempre maggiore o LinearItemsLayout.ItemSpacing uguale a 0.

Il codice C# equivalente è il seguente:

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

Questo codice genera un elenco verticale a colonna singola, con una spaziatura di 20 tra gli elementi:

Screenshot di un controllo CollectionView con spaziatura degli elementi, in iOS e Android

Quando un oggetto imposta la proprietà CollectionViewCollectionView Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">su un oggetto , le proprietà e possono essere impostate su valori che rappresentano lo spazio vuoto verticalmente e orizzontalmente tra gli ItemsLayoutGridItemsLayoutGridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacingdouble elementi:

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

Nota

Per le proprietà e sono impostati callback di convalida, che assicurano che i valori delle proprietà siano sempre maggiori o GridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing uguali a 0.

Il codice C# equivalente è il seguente:

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

Questo codice genera una griglia verticale a due colonne, con una spaziatura verticale di 20 tra gli elementi e una spaziatura orizzontale di 30 tra gli elementi:

Screenshot di un controllo CollectionView con spaziatura degli elementi, nella spaziatura Android

Dimensionamento degli elementi

Per impostazione predefinita, ogni elemento in un oggetto viene misurato e ridimensionato singolarmente, a condizione che gli elementi dell'interfaccia utente in non CollectionViewDataTemplate specificano dimensioni fisse. Questo comportamento, che può essere modificato, viene specificato dal valore della proprietà _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">. CollectionView.ItemSizingStrategy Il valore di questa proprietà può essere impostato su uno dei membri ItemSizingStrategy dell'enumerazione :

  • MeasureAllItems : ogni elemento viene misurato singolarmente. Si tratta del valore predefinito.
  • MeasureFirstItem : viene misurato solo il primo elemento, con tutti gli elementi successivi delle stesse dimensioni del primo elemento.

Importante

La strategia di ridimensionamento comporta un aumento delle prestazioni se usata in situazioni in cui le dimensioni dell'elemento devono MeasureFirstItem essere uniformi tra tutti gli elementi.

L'esempio di codice seguente illustra l'impostazione Xamarin_Forms _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">ItemSizingStrategy proprietà:

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

Il codice C# equivalente è il seguente:

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

Ridimensionamento dinamico degli elementi

Gli elementi in un CollectionView oggetto possono essere ridimensionati dinamicamente in fase di esecuzione modificando le proprietà correlate al layout degli elementi all'interno di DataTemplate . Ad esempio, l'esempio di codice seguente modifica le proprietà Xamarin_Forms _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequest and Xamarin_Forms HeightRequest _VisualElement_WidthRequest" data-linktype="absolute-path">WidthRequest di un Image oggetto:

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

Il gestore eventi viene eseguito in risposta a un oggetto toccato e modifica le dimensioni dell'immagine in modo che sia OnImageTappedImage più facilmente visualizzabile:

Screenshot di un controllo CollectionView con ridimensionamento dinamico degli elementi, iniOS e Android ridimensionamento dinamico degli elementi

Layout da destra a sinistra

CollectionViewpuò eseguire il layout del contenuto in una direzione di flusso da destra a sinistra impostando la relativa proprietà CollectionView Xamarin_Forms _VisualElement_FlowDirection" data-linktype="absolute-path">su FlowDirection Xamarin_Forms _FlowDirection_RightToLeft" data-linktype="absolute-path">RightToLeft . Tuttavia, la proprietà deve essere idealmente impostata in un layout di pagina o radice, in modo che tutti gli elementi all'interno della pagina, o layout radice, rispondano FlowDirection alla direzione del flusso:

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

Il valore Xamarin_Forms _VisualElement_FlowDirection" data-linktype="absolute-path">per un elemento con un elemento padre è Xamarin_Forms FlowDirectionFlowDirection _FlowDirection_MatchParent" data-linktype="absolute-path">MatchParent . Pertanto, eredita il valore della proprietà da , che a sua volta CollectionView eredita il valore della proprietà da FlowDirectionStackLayoutFlowDirectionContentPage . Il risultato è il layout da destra a sinistra illustrato negli screenshot seguenti:

Layout elenco verticale da destra a sinistra di un layout elenco verticale da destra a sinistraCollectionView,in iOS e Android layout elenco verticale da destra a sinistra

Per altre informazioni sulla direzione del flusso, vedere Localizzazione da destra a sinistra.