WPF ListBox等ItemsControl交替（Alternation）变化效果

---

前言

最近遇到一个需求，就是让表格等控件的内容显示交替变化。交替变化的内容，有利于缓解用户的视觉疲劳，个人感觉是一个很好的需求，要怎么实现呢？先看看效果吧！

---

一、AlternationCount 属性

AlternationCount 属性指定了ItemsControl按AlternationCount 值轮换数量。如果这个值是2，那么内容（Item）相关每两个交替变化；如果这个值是3，则每三个交替变化；

二、实现的源代码

1.Xaml

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <DataGrid 
                  Grid.Row="0"
                  Grid.Column="0"
                  Margin="5"
                  ItemsSource="{Binding Items}"
                  AlternatingRowBackground="LightBlue"
                  AlternationCount="2" />

        <ListBox Grid.Row="0"
                 Grid.Column="1"
                 Margin="5"
                 ItemsSource="{Binding Items}"
                 AlternationCount="2">

            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                            <Setter Property="Background" Value="LightBlue"  />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Id}" Width="20" Margin="0 0 20 0"></TextBlock>
                        <TextBlock Text="{Binding FirstName}" Margin="0 0 20 0"></TextBlock>
                        <TextBlock Text="{Binding LastName}" Margin="0 0 20 0"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ListView Grid.Row="1" 
                  Grid.Column="0" 
                  Margin="5"
                  HorizontalContentAlignment="Left"
                  ItemsSource="{Binding Items}"
                  AlternationCount="3">
            <ListView.Resources>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                </Style>
            </ListView.Resources>
            <ListView.ItemContainerStyle>
                <Style TargetType="{x:Type ListViewItem}">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex"  Value="0">
                            <Setter Property="Background" Value="LightCoral"  />
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                            <Setter Property="Background" Value="Cornsilk"  />
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex"  Value="2">
                            <Setter Property="Background" Value="Green"  />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.View >
                <GridView>
                    <GridViewColumn Header="Id"  DisplayMemberBinding="{Binding Id}" />
                    <GridViewColumn Header="FirstName"  DisplayMemberBinding="{Binding FirstName}" />
                    <GridViewColumn Header="LastName"  DisplayMemberBinding="{Binding LastName}" />
                </GridView>
            </ListView.View>
        </ListView>

        <TabControl Grid.Row="1"
                  Grid.Column="1"
                  SelectedValuePath="Id"
                  AlternationCount="2">
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex"  Value="1">
                            <Setter Property="Background" Value="LightBlue"  />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TabControl.ItemContainerStyle>
            <TabItem  Header="666"></TabItem>
            <TabItem  Header="666"></TabItem>
            <TabItem  Header="666"></TabItem>
            <TabItem  Header="666"></TabItem>
        </TabControl> 
    </Grid>
</Window>

2.Xaml.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApp1
{
    //Defines the customer object
    public class Customer
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Customer> Items { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            Items = new ObservableCollection<Customer>();
            for (int i = 0; i < 10; i++)
            {
                Customer c = new Customer();
                c.Id = i + 1;
                c.FirstName = $"FirstName{c.Id}";
                c.LastName = $"LastName{c.Id}";
                Items.Add(c);
            }
            this.DataContext = this;
        }
    }
}

总结

总之，时显示方式就是ItemsControl的AlternationCount 属性搭配Trigger。另外，MSDN官方示例也提供了背景色交替轮换的一种实现的代码