Comment : alterner la couleur d'arrière-plan pour les lignes d'un ListView
Mise à jour : novembre 2007
Cet exemple montre trois méthodes que vous pouvez utiliser pour alterner la couleur d'Background des lignes d'un ListView.
Exemple
Les sections suivantes fournissent trois méthodes pour créer un ListView avec des lignes dont la couleur Background varie. L'exemple présente également une méthode pour la mise à jour de l'affichage lors de l'ajout ou de la suppression de lignes.
Méthode 1 : définir un style qui utilise IValueConverter pour alterner la couleur d'arrière-plan
L'exemple suivant indique comment définir un Style pour un contrôle ListViewItem qui lie la valeur de la propriété Background à un IValueConverter.
<Style x:Key="myItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background">
<Setter.Value>
<Binding RelativeSource="{RelativeSource Self}"
Converter="{StaticResource myConverter}"/>
</Setter.Value>
</Setter>
</Style>
L'exemple suivant définit une ResourceKey pour le IValueConverter.
<namespc:BackgroundConverter x:Key="myConverter"/>
L'exemple suivant montre la définition du IValueConverter qui définit la propriété Background selon l'index de ligne.
public sealed class BackgroundConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
CultureInfo culture)
{
ListViewItem item = (ListViewItem)value;
ListView listView =
ItemsControl.ItemsControlFromItemContainer(item) as ListView;
// Get the index of a ListViewItem
int index =
listView.ItemContainerGenerator.IndexFromContainer(item);
if (index % 2 == 0)
{
return Brushes.LightBlue;
}
else
{
return Brushes.Beige;
}
}
L'exemple suivant indique comment définir un ListView qui utilise un Style comme ItemContainerStyle pour fournir la disposition requise.
<ListView Name="theListView"
ItemsSource="{Binding Source={StaticResource EmployeeData},
XPath=Employee}"
ItemContainerStyle="{StaticResource myItemStyle}" >
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}"
Header="First Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}"
Header="Last Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}"
Header="Favorite City" Width="120"/>
</GridView>
</ListView.View>
</ListView>
Méthode 2 : dériver une nouvelle classe depuis ListView pour alterner la couleur d'arrière-plan
L'exemple suivant indique comment définir une classe qui dérive de ListView. Cette classe substitue la méthode PrepareContainerForItemOverride pour créer des lignes avec des couleurs Background alternées.
public class SubListView : ListView
{
protected override void
PrepareContainerForItemOverride(DependencyObject element,
object item)
{
base.PrepareContainerForItemOverride(element, item);
if (View is GridView)
{
int index = ItemContainerGenerator.IndexFromContainer(element);
ListViewItem lvi = element as ListViewItem;
if (index % 2 == 0)
{
lvi.Background = Brushes.LightBlue;
}
else
{
lvi.Background = Brushes.Beige;
}
}
}
}
L'exemple suivant indique comment créer une instance de cette classe. Le préfixe namespc correspond à un espace de noms Common Language Runtime (CLR) et à l'assembly correspondant où le StyleSelector est défini.
<namespc:SubListView
ItemsSource="{Binding Source={StaticResource EmployeeData},
XPath=Employee}">
<namespc:SubListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}"
Header="First Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}"
Header="Last Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}"
Header="Favorite City" Width="120"/>
</GridView>
</namespc:SubListView.View>
</namespc:SubListView>
Méthode 3 : utiliser un StyleSelector pour alterner la couleur d'arrière-plan
L'exemple suivant indique comment définir un StyleSelector qui définit un Style pour une ligne. Cet exemple définit la couleur Background selon l'index de ligne.
public class ListViewItemStyleSelector : StyleSelector
{
public override Style SelectStyle(object item,
DependencyObject container)
{
Style st = new Style();
st.TargetType = typeof(ListViewItem);
Setter backGroundSetter = new Setter();
backGroundSetter.Property = ListViewItem.BackgroundProperty;
ListView listView =
ItemsControl.ItemsControlFromItemContainer(container)
as ListView;
int index =
listView.ItemContainerGenerator.IndexFromContainer(container);
if (index % 2 == 0)
{
backGroundSetter.Value = Brushes.LightBlue;
}
else
{
backGroundSetter.Value = Brushes.Beige;
}
st.Setters.Add(backGroundSetter);
return st;
}
}
L'exemple suivant indique comment définir une ResourceKey pour le StyleSelector. Le préfixe namespc correspond à un espace de noms CLR et à l'assembly correspondant où le StyleSelector est défini. Pour plus d'informations, consultez Espaces de noms XAML et mappage d'espace de noms.
<namespc:ListViewItemStyleSelector x:Key="myStyleSelector"/>
L'exemple suivant indique comment affecter à la propriété ItemContainerStyleSelector d'un ListView cette ressource StyleSelector.
<ListView
ItemsSource="{Binding Source={StaticResource EmployeeData},
XPath=Employee}"
ItemContainerStyleSelector="{DynamicResource myStyleSelector}" >
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FirstName}"
Header="First Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=LastName}"
Header="Last Name" Width="120"/>
<GridViewColumn DisplayMemberBinding="{Binding XPath=FavoriteCity}"
Header="Favorite City" Width="120"/>
</GridView>
</ListView.View>
</ListView>
Mettre à jour le ListView après une modification de la collection ListViewItem
Si vous ajoutez ou supprimez un ListViewItem d'un contrôle ListView, vous devez mettre à jour les contrôles ListViewItem pour recréer la couleur Background alternée. L'exemple suivant indique comment mettre à jour les contrôles ListViewItem.
ICollectionView dataView =
CollectionViewSource.GetDefaultView(theListView.ItemsSource);
dataView.Refresh();