Xamarin.Forms Disposition CollectionView
Télécharger l’exempleCollectionView 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 affiche ses éléments dans une liste verticale. Toutefois, l’une des dispositions suivantes peut être utilisée :
- Liste verticale : liste de colonnes unique qui augmente verticalement à mesure que de nouveaux éléments sont ajoutés.
- Liste horizontale : liste de lignes unique qui augmente horizontalement à mesure que de nouveaux éléments sont ajoutés.
- Grille verticale : grille à plusieurs colonnes qui croît verticalement à mesure que de nouveaux éléments sont ajoutés.
- Grille horizontale : grille à plusieurs lignes qui croît 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 leCollectionViewse développe en tant qu’éléments sont ajoutés.SnapPointsAlignment, de typeSnapPointsAlignment, spécifie la façon dont les points d’ancrage 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, consultez Points d’ancrage dans le Xamarin.Forms guide de défilement CollectionView .
L’énumération ItemsLayoutOrientation définit les membres suivants :
Verticalindique que leCollectionViewse développera verticalement à mesure que des éléments sont ajoutés.Horizontalindique que leCollectionViewse développera horizontalement à mesure que des é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.
Notes
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 être complet, en XAML, un CollectionView 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 VerticalItemsLayoutOrientation membre d’énumération comme valeur de propriété Orientation :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Vertical
};
Il en résulte une liste de colonnes unique, 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 HorizontalItemsLayoutOrientation membre d’énumération comme valeur de propriété Orientation :
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Le code C# équivalent est :
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Horizontal
};
Il en résulte 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é a la Verticalvaleur :
<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 dans une seule colonne. Toutefois, cet exemple définit la GridItemsLayout.Span propriété sur 2. Il en résulte 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é a la Horizontalvaleur :
<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 dans une seule ligne. Toutefois, cet exemple définit la GridItemsLayout.Span propriété sur 4. Il en résulte une grille de 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 l’affichage qui s’affiche au début de la liste.HeaderTemplate, de typeDataTemplate, spécifie leDataTemplateà 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 leDataTemplateà 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 s’étend 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 s’étend horizontalement, de gauche à droite, le pied de page est affiché à droite de la liste.
Afficher des chaînes dans l’en-tête et le pied de page
Les Header propriétés et Footer peuvent être définies sur string 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 peuvent chacune être définies sur une vue. Il peut s’agir d’une vue unique ou d’une vue qui contient plusieurs vues enfants. L’exemple suivant montre les Header propriétés et Footer 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 avec modèle
Les HeaderTemplate propriétés et FooterTemplate peuvent être définies sur DataTemplate les objets utilisés pour mettre en forme l’en-tête et le pied de page. Dans ce scénario, les Header propriétés et doivent Footer ê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ée par .CollectionView
Lorsqu’un CollectionView 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>
Notes
La LinearItemsLayout.ItemSpacing propriété a un rappel de validation défini, 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 verticale à colonne unique, qui a un espacement de 20 entre les éléments :
Quand un CollectionView définit sa ItemsLayout propriété sur un GridItemsLayout objet, les GridItemsLayout.VerticalItemSpacing propriétés et GridItemsLayout.HorizontalItemSpacing 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>
Notes
Les GridItemsLayout.VerticalItemSpacing propriétés et GridItemsLayout.HorizontalItemSpacing ont des rappels de validation définis, qui garantissent 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 génère une grille verticale à deux colonnes, qui a un espacement vertical de 20 entre les éléments et un espacement horizontal de 30 entre les éléments :
Dimensionnement de l’élément
Par défaut, chaque élément d’un CollectionView est mesuré et dimensionné individuellement, à condition que les éléments d’interface utilisateur dans le DataTemplate ne spécifient pas de tailles fixes. Ce comportement, qui peut être modifié, est spécifié par la valeur de propriété CollectionView.ItemSizingStrategy . Cette valeur de propriété peut être définie sur l’un des membres de l’énumération ItemSizingStrategy :
MeasureAllItems: chaque élément est mesuré individuellement. Il s'agit de la valeur par défaut.MeasureFirstItem: seul le premier élément est mesuré, 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 des 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 CollectionView peuvent être redimensionnés dynamiquement au moment de l’exécution en modifiant les propriétés liées à la disposition des éléments dans le DataTemplate. Par exemple, l’exemple de code suivant modifie les HeightRequest propriétés et WidthRequest 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 appui sur un Image objet et modifie les dimensions de l’image afin qu’elle soit plus facilement visible :
Disposition de droite à gauche
CollectionView peut mettre en page son contenu dans une direction de flux de droite à gauche en définissant sa FlowDirection propriété sur RightToLeft. Toutefois, la FlowDirection propriété doit idéalement être définie sur une page ou une mise en page racine, ce qui entraîne la réponse de tous les éléments de la page ou de la mise en page racine à la direction du 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 FlowDirection d’un élément avec un parent est MatchParent. Par conséquent, hérite CollectionView de la valeur de propriété FlowDirection du StackLayout, qui hérite à son tour de la valeur de propriété FlowDirection du ContentPage. Cela entraîne la disposition de droite à gauche affichée dans les captures d’écran suivantes :
Pour plus d’informations sur le sens du flux, consultez Localisation de droite à gauche.