Xamarin.Forms Diseño de CollectionView

  • Artículo
  • 13 minutos para leer

Ejemplo de descarga Descarga del ejemplo

CollectionView define las siguientes propiedades que controlan el diseño:

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos.

De forma predeterminada, CollectionView un elemento mostrará sus elementos en una lista vertical. Sin embargo, se puede usar cualquiera de los diseños siguientes:

  • Lista vertical: una lista de columnas única que crece verticalmente a medida que se agregan nuevos elementos.
  • Lista horizontal: una lista de filas única que crece horizontalmente a medida que se agregan nuevos elementos.
  • Cuadrícula vertical: una cuadrícula de varias columnas que crece verticalmente a medida que se agregan nuevos elementos.
  • Cuadrícula horizontal: una cuadrícula de varias filas que crece horizontalmente a medida que se agregan nuevos elementos.

Estos diseños se pueden especificar estableciendo la propiedad Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">en la clase que deriva de ItemsLayout la clase ItemsLayout . Esta clase define las propiedades siguientes:

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos. Para obtener más información sobre los puntos de instantánea, consulte Puntos de ajuste en la guía.

La enumeración ItemsLayoutOrientation define los miembros siguientes:

  • Vertical indica que se CollectionView expandirá verticalmente a medida que se agregan elementos.
  • Horizontal indica que se CollectionView expandirá horizontalmente a medida que se agregan elementos.

La clase hereda de la clase y define una propiedad, de tipo , que representa LinearItemsLayout el espacio vacío alrededor de cada ItemsLayoutItemSpacingdouble elemento. El valor predeterminado de esta propiedad es 0 y su valor siempre debe ser mayor o igual que 0. La LinearItemsLayout clase también define miembros VerticalHorizontal estáticos y . Estos miembros se pueden usar para crear listas verticales u horizontales, respectivamente. Como alternativa, se LinearItemsLayout puede crear un objeto , especificando un miembro de ItemsLayoutOrientation enumeración como argumento.

La GridItemsLayout clase hereda de la ItemsLayout clase y define las siguientes propiedades:

  • VerticalItemSpacing, de tipo double , que representa el espacio vacío vertical alrededor de cada elemento. El valor predeterminado de esta propiedad es 0 y su valor siempre debe ser mayor o igual que 0.
  • HorizontalItemSpacing, de tipo double , que representa el espacio vacío horizontal alrededor de cada elemento. El valor predeterminado de esta propiedad es 0 y su valor siempre debe ser mayor o igual que 0.
  • Span, de tipo int , que representa el número de columnas o filas que se mostrarán en la cuadrícula. El valor predeterminado de esta propiedad es 1 y su valor siempre debe ser mayor o igual que 1.

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos.

Nota:

CollectionView usa los motores de diseño nativos para realizar el diseño.

Lista vertical

De forma predeterminada, CollectionView mostrará sus elementos en un diseño de lista vertical. Por lo tanto, no es necesario establecer la propiedad Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout para usar este diseño:

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

Sin embargo, para mayor integridad, en XAML se puede establecer un para mostrar sus elementos en una lista vertical estableciendo su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout en VerticalList :

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

Como alternativa, esto también se puede lograr estableciendo la propiedad Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">en un objeto , especificando el miembro de enumeración como valor de ItemsLayoutLinearItemsLayoutVerticalItemsLayoutOrientationOrientation propiedad:

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

El código de C# equivalente es el siguiente:

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

Esto da como resultado una lista de columnas única, que crece verticalmente a medida que se agregan nuevos elementos:

Captura depantalla de un diseño de lista vertical collectionView, en iOS y Android

Lista horizontal

En XAML, un elemento puede mostrar sus elementos en una lista horizontal estableciendo su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout en 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>

Como alternativa, este diseño también se puede lograr estableciendo la propiedad Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">en un objeto , especificando el miembro de enumeración como valor de ItemsLayoutLinearItemsLayoutHorizontalItemsLayoutOrientationOrientation propiedad:

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

El código de C# equivalente es el siguiente:

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

Esto da como resultado una lista de filas única, que crece horizontalmente a medida que se agregan nuevos elementos:

Captura depantalla de un diseño de lista horizontal CollectionView, en iOS y Android

Cuadrícula vertical

En XAML, un elemento puede mostrar sus elementos en una cuadrícula vertical estableciendo su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout en 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>

Como alternativa, este diseño también se puede lograr estableciendo la propiedad data-linktype="absolute-path">de Xamarin_Forms _StructuredItemsView_ItemsLayout" en un objeto cuya propiedad ItemsLayoutGridItemsLayout Xamarin_Forms ItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationVertical está establecida en :

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

El código de C# equivalente es el siguiente:

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

De forma predeterminada, una vertical GridItemsLayout mostrará los elementos de una sola columna. Sin embargo, en este ejemplo se GridItemsLayout.Span establece la propiedad en 2. Esto da como resultado una cuadrícula de dos columnas, que crece verticalmente a medida que se agregan nuevos elementos:

Captura de pantalla de un diseño de cuadrículavertical collectionView, en iOS y Android

Cuadrícula horizontal

En XAML, un elemento puede mostrar sus elementos en una cuadrícula horizontal estableciendo su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">ItemsLayout en 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>

Como alternativa, este diseño también se puede lograr estableciendo la propiedad data-linktype="absolute-path">de Xamarin_Forms _StructuredItemsView_ItemsLayout" en un objeto cuya propiedad ItemsLayoutGridItemsLayout Xamarin_Forms ItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationHorizontal está establecida en :

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

El código de C# equivalente es el siguiente:

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

De forma predeterminada, un horizontal GridItemsLayout mostrará los elementos de una sola fila. Sin embargo, en este ejemplo se GridItemsLayout.Span establece la propiedad en 4. Esto da como resultado una cuadrícula de cuatro filas, que crece horizontalmente a medida que se agregan nuevos elementos:

Captura de pantalla de un diseño de cuadrícula horizontal collectionView, en el diseño de cuadrícula horizontal deiOSy Android

Encabezados y pies de página

CollectionView puede presentar un encabezado y un pie de página que se desplazan con los elementos de la lista. El encabezado y pie de página pueden ser cadenas, vistas u DataTemplate objetos.

CollectionView define las siguientes propiedades para especificar el encabezado y el pie de página:

  • Header, de tipo , especifica la cadena, el enlace o la vista que object se mostrarán al principio de la lista.
  • HeaderTemplate, de tipo DataTemplate , especifica el objeto que se usará para dar formato a DataTemplateHeader .
  • Footer, de tipo , especifica la cadena, el enlace o la vista que object se mostrarán al final de la lista.
  • FooterTemplate, de tipo DataTemplate , especifica el objeto que se usará para dar formato a DataTemplateFooter .

Estas propiedades están copiadas por objetos , lo que significa que las BindableProperty propiedades pueden ser destinos de enlaces de datos.

Cuando se agrega un encabezado a un diseño que crece horizontalmente, de izquierda a derecha, el encabezado se muestra a la izquierda de la lista. De forma similar, cuando se agrega un pie de página a un diseño que crece horizontalmente, de izquierda a derecha, el pie de página se muestra a la derecha de la lista.

Las Header propiedades y se pueden establecer en Footerstring valores, como se muestra en el ejemplo siguiente:

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

El código de C# equivalente es el siguiente:

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

Este código da como resultado las capturas de pantalla siguientes, con el encabezado que se muestra en la captura de pantalla de iOS y el pie de página que se muestra en la captura de pantalla de Android:

de cadena CollectionView Captura de pantalla de un encabezado y pie de página de cadenaCollectionView,en iOS y Android string header and footer

Las Header propiedades y se pueden establecer en una Footer vista. Puede ser una vista única o una vista que contenga varias vistas secundarias. En el ejemplo siguiente se muestran Header las propiedades Footer y establecidas en un objeto que StackLayout contiene un objeto 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>

El código de C# equivalente es el siguiente:

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

Este código da como resultado las capturas de pantalla siguientes, con el encabezado que se muestra en la captura de pantalla de iOS y el pie de página que se muestra en la captura de pantalla de Android:

de la vista CollectionView Captura de pantalla de un encabezado y pie de página collectionView mediante vistas, eniOSy Android

Las HeaderTemplate propiedades y se pueden establecer en objetos que se usan para dar formato al encabezado y al FooterTemplate pie de DataTemplate página. En este escenario, las propiedades y deben enlazarse al origen actual de las plantillas que se aplicarán, como se Header muestra en el ejemplo Footer siguiente:

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

El código de C# equivalente es el siguiente:

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

Este código da como resultado las capturas de pantalla siguientes, con el encabezado que se muestra en la captura de pantalla de iOS y el pie de página que se muestra en la captura de pantalla de Android:

página de CollectionView Captura de pantalla de un encabezado y pie de página collectionView mediante plantillas, eniOSy Android template header and footer

Espaciado de elementos

De forma predeterminada, no hay espacio entre cada elemento de CollectionView . Este comportamiento se puede cambiar estableciendo propiedades en el diseño de elementos usado por CollectionView .

Cuando un establece su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">en un objeto ItemsLayoutLinearItemsLayout , LinearItemsLayout.ItemSpacingdouble la propiedad se puede establecer en un valor que representa el espacio entre los elementos:

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

Nota:

La propiedad tiene un conjunto de devolución de llamada de validación, que garantiza que el valor de la propiedad sea siempre mayor o LinearItemsLayout.ItemSpacing igual que 0.

El código de C# equivalente es el siguiente:

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

Este código da como resultado una lista vertical de columnas únicas, que tiene un espaciado de 20 entre los elementos:

de pantalla de collectionView con espaciado deelementos, en iOS y Android

Cuando un establece su propiedad CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">en un objeto , las propiedades y se pueden establecer en valores que representan el espacio vacío vertical y ItemsLayoutGridItemsLayoutGridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing horizontalmente entre los double elementos:

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

Nota:

Las propiedades y tienen devoluciones de llamada de validación establecidas, que garantizan que los valores de las propiedades siempre sean mayores o GridItemsLayout.VerticalItemSpacingGridItemsLayout.HorizontalItemSpacing iguales que 0.

El código de C# equivalente es el siguiente:

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

Este código da como resultado una cuadrícula vertical de dos columnas, que tiene un espaciado vertical de 20 entre elementos y un espaciado horizontal de 30 entre elementos:

Captura de pantalla de collectionView con espaciado de elementos, en el espaciadode elementos Android

Tamaño del elemento

De forma predeterminada, cada elemento de se mide y dimensiona individualmente, siempre que los elementos de la interfaz de usuario de no CollectionViewDataTemplate especifiquen tamaños fijos. Este comportamiento, que se puede cambiar, se especifica mediante el Xamarin_Forms _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">valor de CollectionView.ItemSizingStrategy propiedad. Este valor de propiedad se puede establecer en uno de los miembros de ItemSizingStrategy enumeración:

  • MeasureAllItems : cada elemento se mide individualmente. Este es el valor predeterminado.
  • MeasureFirstItem : solo se mide el primer elemento, con todos los elementos posteriores con el mismo tamaño que el primer elemento.

Importante

La estrategia de tamaño dará como resultado un mayor rendimiento cuando se usa en situaciones en las que el tamaño del elemento está pensado para MeasureFirstItem ser uniforme en todos los elementos.

En el ejemplo de código siguiente se muestra cómo establecer Xamarin_Forms _StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">ItemSizingStrategy propiedad:

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

El código de C# equivalente es el siguiente:

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

Redimensionamiento dinámico de elementos

Los elementos de un objeto se pueden cambiar dinámicamente de tamaño en tiempo CollectionView de ejecución cambiando las propiedades relacionadas con el diseño de los elementos dentro de DataTemplate . Por ejemplo, el ejemplo de código siguiente cambia las propiedades _VisualElement_HeightRequest Xamarin_Forms data-linktype="absolute-path">y HeightRequestHeightRequest Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolute-path">WidthRequestImage de un objeto :

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

El controlador de eventos se ejecuta en respuesta a un objeto que se está pulsando y cambia las dimensiones de la imagen para que se vea OnImageTappedImage más fácilmente:

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

Diseño de derecha a izquierda

CollectionViewpuede diseño de su contenido en una dirección de flujo de derecha a izquierda estableciendo su propiedad CollectionView data-linktype="absolute-path">en Xamarin_Forms _VisualElement_FlowDirection FlowDirection Xamarin_Forms _FlowDirection_RightToLeft" data-linktype="absolute-path">RightToLeft . Sin embargo, lo ideal es que la propiedad se establezca en una página o diseño raíz, lo que hace que todos los elementos de la página, o el diseño raíz, respondan a la dirección FlowDirection del flujo:

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

El valor predeterminado Xamarin_Forms _VisualElement_FlowDirection" data-linktype="absolute-path">para un elemento con un elemento primario es FlowDirection Xamarin_Forms FlowDirection _FlowDirection_MatchParent" data-linktype="absolute-path">MatchParent . Por lo tanto, hereda el valor de propiedad de , que a su vez CollectionViewFlowDirectionStackLayout hereda el FlowDirection valor de propiedad de ContentPage . Esto da como resultado el diseño de derecha a izquierda que se muestra en las capturas de pantalla siguientes:

de lista vertical de derecha a izquierda Captura de pantalla de un diseño de lista vertical collectionView de derecha a izquierda, en el diseño de lista vertical deiOSy Android de derecha a izquierda

Para obtener más información sobre la dirección del flujo, vea Localización de derecha a izquierda.