Cómo: Alternar el color de fondo de las filas de un control ListView
Actualización: noviembre 2007
En este ejemplo se muestran tres métodos que puede usar para alternar la propiedad de color Background para las filas de un objeto ListView.
Ejemplo
En las secciones siguientes se ofrecen tres métodos para crear un objeto ListView con filas que alternan la propiedad de color Background. En el ejemplo también se analiza un método para actualizar la vista al agregar o quitar filas.
Método 1: definir un estilo que use IValueConverter para alternar el color de fondo
En el ejemplo siguiente se muestra cómo definir un objeto Style para un control ListViewItem que enlaza el valor de la propiedad Background a 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>
En el ejemplo siguiente se define un objeto ResourceKey para IValueConverter.
<namespc:BackgroundConverter x:Key="myConverter"/>
En el ejemplo siguiente se muestra la definición de IValueConverter que establece la propiedad Background según el índice de fila.
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;
}
}
En el ejemplo siguiente se muestra cómo definir un objeto ListView que use Style como ItemContainerStyle para proporcionar el diseño necesario.
<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étodo 2: derivar una nueva clase de ListView para alternar el color de fondo
En el ejemplo siguiente se muestra cómo definir una clase que se derive de ListView. Esta clase invalida el método PrepareContainerForItemOverride para crear filas que tienen colores Background alternos.
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;
}
}
}
}
En el ejemplo siguiente se muestra cómo se crea una instancia de esta clase. El prefijo namespc señala a un espacio de nombres de common language runtime (CLR) y el ensamblado correspondiente donde se define 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>
Método 3: usar StyleSelector para alternar el color de fondo
En el ejemplo siguiente se muestra cómo definir un StyleSelector que define un Style para una fila. En este ejemplo se define el color Background según el índice de fila.
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;
}
}
En el ejemplo siguiente se muestra cómo definir un ResourceKey para el StyleSelector. El prefijo namespc señala a un espacio de nombres de CLR y el ensamblado correspondiente donde se define el StyleSelector. Para obtener más información, vea Espacios de nombres y asignación de espacios de nombres de XAML.
<namespc:ListViewItemStyleSelector x:Key="myStyleSelector"/>
En el ejemplo siguiente se muestra cómo establecer la propiedad ItemContainerStyleSelector de un control ListView en este recurso 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>
Actualizar ListView después de un cambio en la colección ListViewItem
Si agrega o quita un ListViewItem de un control ListView, debe actualizar los controles ListViewItem para volver a crear el color Background alterno. En el ejemplo siguiente se muestra cómo actualizar los controles ListViewItem.
ICollectionView dataView =
CollectionViewSource.GetDefaultView(theListView.ItemsSource);
dataView.Refresh();
Vea también
Conceptos
Información general sobre ListView
Información general sobre GridView