Xamarin.Forms Disposition CollectionView
CollectionView
définit les propriétés suivantes qui contrôlent la disposition :
ItemsLayout
, de typeIItemsLayout
, spécifie la disposition à utiliser.ItemSizingStrategy
, de typeItemSizingStrategy
, spécifie la stratégie de mesure d’élément à utiliser.
Ces propriétés sont sauvegardées par BindableProperty
des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.
Par défaut, un CollectionView
élément affiche ses éléments dans une liste verticale. Toutefois, l’une des dispositions suivantes peut être utilisée :
- Liste verticale : une seule liste de colonnes qui augmente verticalement à mesure que de nouveaux éléments sont ajoutés.
- Liste horizontale : une seule liste de lignes qui augmente horizontalement à mesure que de nouveaux éléments sont ajoutés.
- Grille verticale : grille à plusieurs colonnes qui augmente verticalement à mesure que de nouveaux éléments sont ajoutés.
- Grille horizontale : grille à plusieurs lignes qui augmente horizontalement à mesure que de nouveaux éléments sont ajoutés.
Ces dispositions peuvent être spécifiées en définissant la propriété sur la ItemsLayout
classe qui dérive de la ItemsLayout
classe. Cette classe définit les propriétés suivantes :
Orientation
, de typeItemsLayoutOrientation
, spécifie la direction dans laquelle lesCollectionView
développements sont ajoutés à mesure que des éléments sont ajoutés.SnapPointsAlignment
, de typeSnapPointsAlignment
, spécifie comment les points d’alignement sont alignés avec les éléments.SnapPointsType
, de typeSnapPointsType
, spécifie le comportement des points d’ancrage lors du défilement.
Ces propriétés sont sauvegardées par BindableProperty
des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données. Pour plus d’informations sur les points d’ancrage, voir Points d’alignement dans le guide deXamarin.Forms défilement CollectionView.
L’énumération ItemsLayoutOrientation
définit les membres suivants :
Vertical
indique que laCollectionView
valeur s’étend verticalement à mesure que les éléments sont ajoutés.Horizontal
indique que laCollectionView
valeur s’étend horizontalement à mesure que les éléments sont ajoutés.
La LinearItemsLayout
classe hérite de la ItemsLayout
classe et définit une ItemSpacing
propriété, de type double
, qui représente l’espace vide autour de chaque élément. La valeur par défaut de cette propriété est 0 et sa valeur doit toujours être supérieure ou égale à 0. La LinearItemsLayout
classe définit également des membres et Horizontal
statiquesVertical
. Ces membres peuvent être utilisés pour créer des listes verticales ou horizontales, respectivement. Vous pouvez également créer un LinearItemsLayout
objet, en spécifiant un membre d’énumération ItemsLayoutOrientation
en tant qu’argument.
La GridItemsLayout
classe hérite de la ItemsLayout
classe et définit les propriétés suivantes :
VerticalItemSpacing
, de typedouble
, qui représente l’espace vide vertical autour de chaque élément. La valeur par défaut de cette propriété est 0 et sa valeur doit toujours être supérieure ou égale à 0.HorizontalItemSpacing
, de typedouble
, qui représente l’espace vide horizontal autour de chaque élément. La valeur par défaut de cette propriété est 0 et sa valeur doit toujours être supérieure ou égale à 0.Span
, de typeint
, qui représente le nombre de colonnes ou de lignes à afficher dans la grille. La valeur par défaut de cette propriété est 1 et sa valeur doit toujours être supérieure ou égale à 1.
Ces propriétés sont sauvegardées par BindableProperty
des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.
Remarque
CollectionView
utilise les moteurs de disposition natifs pour effectuer la disposition.
Liste verticale
Par défaut, CollectionView
affiche ses éléments dans une disposition de liste verticale. Par conséquent, il n’est pas nécessaire de définir la ItemsLayout
propriété pour utiliser cette disposition :
<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>
Toutefois, pour l’exhaustivité, en XAML, un CollectionView
élément peut être défini pour afficher ses éléments dans une liste verticale en définissant sa ItemsLayout
propriété sur VerticalList
:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalList">
...
</CollectionView>
Vous pouvez également effectuer cette opération en définissant la ItemsLayout
propriété sur un LinearItemsLayout
objet, en spécifiant le Vertical
ItemsLayoutOrientation
membre d’énumération comme Orientation
valeur de propriété :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Vertical
};
Cela entraîne l’ajout d’une seule liste de colonnes, qui augmente verticalement à mesure que de nouveaux éléments sont ajoutés :
Liste horizontale
En XAML, un CollectionView
peut afficher ses éléments dans une liste horizontale en définissant sa ItemsLayout
propriété sur 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>
Vous pouvez également effectuer cette disposition en définissant la ItemsLayout
propriété sur un LinearItemsLayout
objet, en spécifiant le Horizontal
ItemsLayoutOrientation
membre d’énumération comme Orientation
valeur de propriété :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Horizontal
};
Cela entraîne l’ajout d’une liste de lignes unique, qui augmente horizontalement à mesure que de nouveaux éléments sont ajoutés :
Grille verticale
En XAML, un CollectionView
peut afficher ses éléments dans une grille verticale en définissant sa ItemsLayout
propriété sur 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>
Vous pouvez également effectuer cette disposition en définissant la propriété sur un GridItemsLayout
objet dont Orientation
la ItemsLayout
propriété est définie sur Vertical
:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};
Par défaut, un vertical GridItemsLayout
affiche les éléments d’une seule colonne. Toutefois, cet exemple définit la GridItemsLayout.Span
propriété sur 2. Cela entraîne l’ajout d’une grille à deux colonnes, qui augmente verticalement à mesure que de nouveaux éléments sont ajoutés :
Grille horizontale
En XAML, un CollectionView
peut afficher ses éléments dans une grille horizontale en définissant sa ItemsLayout
propriété sur 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>
Vous pouvez également effectuer cette disposition en définissant la propriété sur un GridItemsLayout
objet dont Orientation
la ItemsLayout
propriété est définie sur Horizontal
:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="4" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};
Par défaut, un horizontal GridItemsLayout
affiche les éléments d’une seule ligne. Toutefois, cet exemple définit la GridItemsLayout.Span
propriété sur 4. Cela entraîne l’ajout d’une grille à quatre lignes, qui augmente horizontalement à mesure que de nouveaux éléments sont ajoutés :
En-têtes et pieds de page
CollectionView
peut présenter un en-tête et un pied de page qui défilent avec les éléments de la liste. L’en-tête et le pied de page peuvent être des chaînes, des vues ou DataTemplate
des objets.
CollectionView
définit les propriétés suivantes pour spécifier l’en-tête et le pied de page :
Header
, de typeobject
, spécifie la chaîne, la liaison ou la vue qui sera affichée au début de la liste.HeaderTemplate
, de typeDataTemplate
, spécifie l’utilisationDataTemplate
à utiliser pour mettre en forme leHeader
.Footer
, de typeobject
, spécifie la chaîne, la liaison ou la vue qui sera affichée à la fin de la liste.FooterTemplate
, de typeDataTemplate
, spécifie l’utilisationDataTemplate
à utiliser pour mettre en forme leFooter
.
Ces propriétés sont sauvegardées par BindableProperty
des objets, ce qui signifie que les propriétés peuvent être des cibles de liaisons de données.
Lorsqu’un en-tête est ajouté à une disposition qui augmente horizontalement, de gauche à droite, l’en-tête s’affiche à gauche de la liste. De même, lorsqu’un pied de page est ajouté à une disposition qui augmente horizontalement, de gauche à droite, le pied de page s’affiche à droite de la liste.
Afficher les chaînes dans l’en-tête et le pied de page
Les Header
propriétés peuvent Footer
être définies string
sur des valeurs, comme illustré dans l’exemple suivant :
<CollectionView ItemsSource="{Binding Monkeys}"
Header="Monkeys"
Footer="2019">
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
Header = "Monkeys",
Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
Ce code génère les captures d’écran suivantes, avec l’en-tête affiché dans la capture d’écran iOS et le pied de page affiché dans la capture d’écran Android :
Afficher les vues dans l’en-tête et le pied de page
Les Header
propriétés et Footer
les propriétés peuvent chacune être définies sur une vue. Il peut s’agir d’une vue unique ou d’une vue contenant plusieurs vues enfants. L’exemple suivant montre les Header
propriétés et Footer
les propriétés définies sur un StackLayout
objet qui contient un Label
objet :
<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>
Le code C# équivalent est :
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");
Ce code génère les captures d’écran suivantes, avec l’en-tête affiché dans la capture d’écran iOS et le pied de page affiché dans la capture d’écran Android :
Afficher un en-tête et un pied de page modèles
Les propriétés et FooterTemplate
les HeaderTemplate
propriétés peuvent être définies sur DataTemplate
des objets utilisés pour mettre en forme l’en-tête et le pied de page. Dans ce scénario, les propriétés et Footer
les Header
propriétés doivent être liées à la source actuelle pour que les modèles soient appliqués, comme illustré dans l’exemple suivant :
<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>
Le code C# équivalent est :
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");
Ce code génère les captures d’écran suivantes, avec l’en-tête affiché dans la capture d’écran iOS et le pied de page affiché dans la capture d’écran Android :
Espacement des éléments
Par défaut, il n’y a pas d’espace entre chaque élément d’un CollectionView
. Ce comportement peut être modifié en définissant des propriétés sur la disposition des éléments utilisés par le CollectionView
.
Lorsqu’une CollectionView
propriété définit sa ItemsLayout
propriété sur un LinearItemsLayout
objet, la LinearItemsLayout.ItemSpacing
propriété peut être définie sur une double
valeur qui représente l’espace entre les éléments :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Remarque
La LinearItemsLayout.ItemSpacing
propriété a un jeu de rappels de validation, ce qui garantit que la valeur de la propriété est toujours supérieure ou égale à 0.
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
ItemSpacing = 20
}
};
Ce code génère une liste de colonnes unique verticale, qui a un espacement de 20 entre les éléments :
Lorsqu’une CollectionView
propriété définit sa ItemsLayout
propriété sur un GridItemsLayout
objet, les GridItemsLayout.VerticalItemSpacing
GridItemsLayout.HorizontalItemSpacing
propriétés peuvent être définies sur double
des valeurs qui représentent l’espace vide verticalement et horizontalement entre les éléments :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2"
VerticalItemSpacing="20"
HorizontalItemSpacing="30" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Remarque
Les GridItemsLayout.VerticalItemSpacing
rappels de validation et GridItemsLayout.HorizontalItemSpacing
les propriétés sont définis, ce qui garantit que les valeurs des propriétés sont toujours supérieures ou égales à 0.
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
{
VerticalItemSpacing = 20,
HorizontalItemSpacing = 30
}
};
Ce code entraîne une grille à deux colonnes verticale, qui a un espacement vertical de 20 éléments entre les éléments et un espacement horizontal de 30 entre les éléments :
Dimensionnement des éléments
Par défaut, chaque élément d’un élément CollectionView
est mesuré et dimensionné individuellement, à condition que les éléments de l’interface utilisateur dans le DataTemplate
fichier ne spécifient pas de tailles fixes. Ce comportement, qui peut être modifié, est spécifié par la valeur de la CollectionView.ItemSizingStrategy
propriété. Cette valeur de propriété peut être définie sur l’un ItemSizingStrategy
des membres d’énumération :
MeasureAllItems
: chaque élément est mesuré individuellement. Il s’agit de la valeur par défaut.MeasureFirstItem
: seul le premier élément est mesuré, avec tous les éléments suivants ayant la même taille que le premier élément.
Important
La MeasureFirstItem
stratégie de dimensionnement entraîne une augmentation des performances lorsqu’elle est utilisée dans les situations où la taille de l’élément est destinée à être uniforme sur tous les éléments.
L’exemple de code suivant montre comment définir la ItemSizingStrategy
propriété :
<CollectionView ...
ItemSizingStrategy="MeasureFirstItem">
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};
Redimensionnement dynamique des éléments
Les éléments d’un élément CollectionView
peuvent être redimensionnés dynamiquement au moment de l’exécution en modifiant les propriétés associées à la disposition des éléments dans le DataTemplate
. Par exemple, l’exemple de code suivant modifie les propriétés et WidthRequest
les HeightRequest
propriétés d’un Image
objet :
void OnImageTapped(object sender, EventArgs e)
{
Image image = sender as Image;
image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}
Le OnImageTapped
gestionnaire d’événements est exécuté en réponse à un Image
objet appuyé et modifie les dimensions de l’image afin qu’elle soit plus facilement consultée :
Disposition de droite à gauche
Pour que CollectionView
applique à son contenu une direction de flux de droite à gauche, définissez sa propriété FlowDirection
sur RightToLeft
. Cependant, la propriété FlowDirection
doit idéalement être définie sur une page ou une disposition racine. Ainsi, tous les éléments de la page ou de la disposition racine répondent à la direction de flux :
<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>
La valeur par défaut de FlowDirection
pour un élément avec un parent est MatchParent
. Par conséquent, la CollectionView
propriété hérite de la FlowDirection
valeur de la StackLayout
propriété, qui hérite à son tour de la FlowDirection
valeur de propriété de l’objet ContentPage
. La disposition de droite à gauche s’affiche dans les captures d’écran suivantes :
Pour plus d’informations sur la direction du flux, consultez localisation de droite à gauche.