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 lesCollectionViewdé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 :
Verticalindique que laCollectionViewvaleur s’étend verticalement à mesure que les éléments sont ajoutés.Horizontalindique que laCollectionViewvaleur 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 VerticalItemsLayoutOrientation 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 HorizontalItemsLayoutOrientation 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.VerticalItemSpacingGridItemsLayout.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 StackLayoutproprié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.