Procedura: alternare il colore di sfondo delle righe di un ListView
Aggiornamento: novembre 2007
In questo esempio vengono illustrati tre metodi che è possibile utilizzare per alternare il colore Background per le righe di un controllo ListView.
Esempio
Nelle sezioni seguenti vengono forniti tre metodi per creare un controllo ListView con righe che si alternano nel colore Background. Viene inoltre descritto un metodo per aggiornare la visualizzazione quando si aggiungono o rimuovono righe.
Metodo 1: definire uno stile che utilizza un oggetto IValueConverter per alternare il colore di sfondo
Nell'esempio seguente viene illustrato come definire un oggetto Style per un controllo ListViewItem che associa il valore della proprietà Background a un oggetto 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>
Nell'esempio seguente viene definito un oggetto ResourceKey per l'oggetto IValueConverter.
<namespc:BackgroundConverter x:Key="myConverter"/>
Nell'esempio seguente viene illustrata la definizione dell'oggetto IValueConverter che imposta la proprietà Background in base all'indice della riga.
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;
}
}
Nell'esempio seguente viene illustrato come definire un oggetto ListView che utilizza l'oggetto Style come ItemContainerStyle per fornire il layout richiesto.
<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>
Metodo 2: derivare una nuova classe da ListView per alternare il colore di sfondo
Nell'esempio seguente viene illustrato come definire una classe che deriva da ListView. Questa classe esegue l'override del metodo PrepareContainerForItemOverride per creare righe che hanno colori Background alterni.
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;
}
}
}
}
Nell'esempio seguente viene illustrato come creare un'istanza di questa classe. Il prefisso namespc viene mappato a uno spazio dei nomi Common Language Runtime (CLR) e all'assembly corrispondente in cui è definito l'oggetto StyleSelector.
<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>
Metodo 3: utilizzare un oggetto StyleSelector per alternare il colore di sfondo
Nell'esempio seguente viene illustrato come definire un oggetto StyleSelector che definisce un oggetto Style per una riga. Il colore Background viene definito in base all'indice della riga.
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;
}
}
Nell'esempio seguente viene illustrato come definire un oggetto ResourceKey per l'oggetto StyleSelector. Il prefisso namespc viene mappato a uno spazio dei nomi CLR e all'assembly corrispondente in cui è definito l'oggetto StyleSelector. Per ulteriori informazioni, vedere Spazi dei nomi XAML e mapping dello spazio dei nomi.
<namespc:ListViewItemStyleSelector x:Key="myStyleSelector"/>
Nell'esempio seguente viene illustrato come impostare la proprietà ItemContainerStyleSelector di un oggetto ListView su questa risorsa 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>
Aggiornare ListView dopo una modifica nell'insieme ListViewItem
Se si aggiunge o rimuove un oggetto ListViewItem da un controllo ListView, è necessario aggiornare i controlli ListViewItem per ricreare il colore Background alterno. Nell'esempio seguente viene illustrato come aggiornare i controlli ListViewItem.
ICollectionView dataView =
CollectionViewSource.GetDefaultView(theListView.ItemsSource);
dataView.Refresh();
Vedere anche
Concetti
Panoramica sul controllo ListView