Alternate background color in Listview XAML

33,713

Solution 1

I tried this and it works for me.

<Window x:Class="TryResponses.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:TryResponses"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <vm:MainWindowViewModel x:Key="MainWindowViewModel" />
</Window.Resources>
<Grid Background="LightGray" DataContext="{StaticResource MainWindowViewModel}">
    <Grid.Resources>
        <Style TargetType="ListViewItem">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"  Value="0">
                    <Setter Property="Background" Value="LightBlue" />
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                    <Setter Property="Background" Value="LightGray" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <DataTemplate DataType="system:String">
            <!-- put your data template here -->
        </DataTemplate>
    </Grid.Resources>
    <ListView ItemsSource="{Binding Items}" AlternationCount="2" />
</Grid>

I hope this will help.

Regards

Claude

Solution 2

You should use AlternationCount property and it works on ListBox,ListView or any other control that inherits from ItemsControl. The property definition and two examples are included at
https://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.alternationcount%28v=vs.110%29.aspx)

Share:
33,713
user1428798
Author by

user1428798

Updated on June 26, 2021

Comments

  • user1428798
    user1428798 almost 3 years

    I'm using a listView based on itemTemplate. So i need in my template to alternate the background color :
    - fist row: white
    - second row:gray
    - third row: white
    - forth: gray

    this is my template:

         <DataTemplate x:Key="ItemFlight" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="#28AADB" Margin="2">
                    <Image Source="{Binding Path=IsArrival, Converter={StaticResource BooleanToImageDisplayConverter}}" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
                </Border>
                <Grid Grid.Column="1" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="4*"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="6*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
    
                    <TextBlock Text="{Binding FlightName}" FontWeight="Bold" Grid.Column="0" Grid.Row="0"  Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding ArrivalOrDepartDateTime, Converter={StaticResource DateTimeConverter}}"  FontWeight="Bold" Grid.Column="0" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Grid.Column="1" Grid.Row="0" Margin="10"  Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
                    <TextBlock Text="{Binding CityInfo.Name}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding DepartureTime}"  Grid.Column="1" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding CityInfo.Name}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"  Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}"/>
                    <TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}"  Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding ArrivalTime}" Grid.Column="2" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
    
                    <TextBlock Text="{Binding Status}" Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Margin="15" Style="{StaticResource MyTextBlockStyle}"  Foreground="#EA6A1E" FontSize="20" TextWrapping="Wrap" />
    
                </Grid>
            </Grid>
        </DataTemplate>
    

    How Can I do this please??