在Listview XAML中交替显示背景颜色

Question

我正在使用基于itemTemplate的listView。因此，在我的模板中需要交替更改背景颜色：
- 第一行：白色
- 第二行：灰色
- 第三行：白色
- 第四行：灰色

这是我的模板：

     <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>

请问我该如何做到这一点？

- user1428798

---

https://dev59.com/Km855IYBdhLWcg3wVist - Bathineni

在ListView中没有成员AlternationCount="2"。 - user1428798

你需要根据其索引触发一个触发器。我认为对于这样的触发器，使用转换器会很有帮助。 - D J

相关内容：http://refat38.wordpress.com/2011/03/23/wpf-listview-alternate-row-color/ - Nathan Cooper

Answer 1

我尝试过这个方法，它对我有效。

<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>

我希望这能有所帮助。

敬礼

Claude

- Claude Catonio

---

它对我没有起作用。你能否请检查一下我的问题，是否与此相关：http://stackoverflow.com/questions/24990609/give-color-to-alternate-rows-in-listview?noredirect=1#comment38852802_24990609 - Gaurav123

这个解决方案很好用。请确保在集合控件上设置了交替计数。我在我的ListView中添加了样式触发器到ListView.ItemContainerStyle中。谢谢！ - kenjara

做得很好！谢谢。 - honzakuzel1989

这个可以工作，但是现在选择一行会出现非常奇怪的外观，一半的行变浅，另一半没有变化。而且不清楚选择了什么。 - PandaWood

请看下面我的新帖子。 - Claude Catonio

Answer 2

你应该使用AlternationCount属性，它可以在ListBox、ListView或任何继承自ItemsControl的控件上工作。属性定义和两个示例已经包含在以下链接中：
https://msdn.microsoft.com/zh-cn/library/system.windows.controls.itemscontrol.alternationcount%28v=vs.110%29.aspx

- Ahmad

Answer 3

为了更清晰地查看所选行，请尝试以下操作：（不要担心颜色和最终呈现效果，我没有花足够的时间使其性感）

<Grid DataContext="{StaticResource MainWindowViewModel}">
    <Grid.Resources>
        <local:FalseToCollapsedConverter x:Key="FalseToCollapsedConverter" />
    </Grid.Resources>
    <ListView ItemsSource="{Binding Items}" AlternationCount="2" HorizontalContentAlignment="Stretch">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.Resources>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid x:Name="line">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <ContentControl Content="{Binding .}" Margin="4" />
                                <TextBlock Grid.Column="1" Text="V" Margin="4" Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
                                <Border Grid.ColumnSpan="2" Background="#5500FF00" 
                                        BorderBrush="Blue" BorderThickness="2"
                                        Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="FontWeight" Value="Bold" />
                                </Trigger>
                                <Trigger Property="ItemsControl.AlternationIndex"  Value="0">
                                    <Setter TargetName="line" Property="Background" Value="#CCCCFF" />
                                </Trigger>
                                <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                                    <Setter TargetName="line" Property="Background" Value="#CCFFCC" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>
    </ListView>
</Grid>

- Claude Catonio