[WPF] ListView & ItemsControl 홀수/짝수 번째 배경색 변경하기

List를 화면에 표시할때 홀수 번째, 혹은 짝수번째 Item만 Background 색을 바꾸고 싶을때가 있다.

 

이를 위해서 AlternationCount 와 AlternationIndex를 이용하여 해결하는 방법이 있다.

 

<ListView VerticalAlignment="Top"
        HorizontalAlignment="Stretch"
        AlternationCount="2">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border"
                                Padding="0"
                                CornerRadius="6"
                                Height="80"
                                SnapsToDevicePixels="true"
                                BorderThickness="1">
                            <Border.Style>
                                <Style TargetType="Border">
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}, Path=(ItemsControl.AlternationIndex)}"
                                                        Value="0">
                                            <Setter Property="Background" Value="Red"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListViewItem>
        <Grid>

        </Grid>
    </ListViewItem>
    <ListViewItem>
        <Grid>
        </Grid>
    </ListViewItem>
    <ListViewItem>
        <Grid>
        </Grid>
    </ListViewItem>
    <ListViewItem>
        <Grid>
        </Grid>
    </ListViewItem>
</ListView>

AlternationCount는 반복적으로 AlternationIndex의 값을 바꾸기 위한 수치이다.

만약 AlternationCount가 3이라면 AlternationIndex는 0~2 까지 순서대로 나오게 된다.

이점을 이용하여 AlternationIndex를 바인딩하여 Background를 색을 바꾸어주면 된다.

 

ItemsControl에서도 같은 방식을 이용한다.

 

<ItemsControl AlternationCount="2">
    <ItemsControl.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>1</sys:String>
            <sys:String>2</sys:String>
            <sys:String>3</sys:String>
            <sys:String>4</sys:String>
        </x:Array>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Width="300" Height="100" x:Name="gridItem"/>
            <DataTemplate.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                    <Setter Property="Background" Value="red" TargetName="gridItem"></Setter>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="blue"  TargetName="gridItem"></Setter>
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>