WPF: Alternating colors on a ItemsControl?

本秂侑毒 提交于 2019-11-27 23:25:58

Check here http://www.codeproject.com/Articles/35886/WPF-ItemsControl-with-alternating-items-and-hover-.aspx

You have to change your code like this to get it working

    <ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="FooBar" Margin="0,0,0,10">                    
                   ----------------------------
                   ----------------------------
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="Blue" TargetName="FooBar"/>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="Red" TargetName="FooBar"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

Here is an alternative which may be a bit more general

<DataTemplate x:Key="AlternatingTemplate">
    <Border>
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), 
                                                   RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                 Value="0">
                        <Setter Property="Background" Value="White" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=(ItemsControl.AlternationIndex), 
                                                   RelativeSource={RelativeSource AncestorType={x:Type ContentPresenter}}}" 
                                 Value="1">
                        <Setter Property="Background" Value="LightGray" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <ContentPresenter Content="{Binding}" />
    </Border>
</DataTemplate>

Usage:

<ItemsControl AlternationCount="2" 
              ItemTemplate="{StaticResource AlternatingTemplate}" 
              ItemsSource="{Binding SourceOfData}" />

If you don't want to use the DataTemplate approach, you can create a custom control that uses a ContentControl as the item container, therefore allowing you to specify a background color.

Class:

public class ItemsControlAlternating : ItemsControl
{
    static ItemsControlAlternating()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(ItemsControlAlternating),
                 new FrameworkPropertyMetadata(typeof(ItemsControlAlternating)));
    }

    protected override DependencyObject GetContainerForItemOverride()
    {
        return new ContentControl();
    }

    protected override bool IsItemItsOwnContainerOverride(object item)
    {
        return item is ContentControl;
    }
}

Resource Dictionary:

<Style TargetType="{x:Type c:ItemsControlAlternating}">
   <Setter Property="AlternationCount" Value="2"/>
   <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="{x:Type c:ItemsControlAlternating}">
               <ItemsPresenter/>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
   <Setter Property="ItemContainerStyle">
       <Setter.Value>
           <Style TargetType="{x:Type ContentControl}">
               <Setter Property="Template">
                   <Setter.Value>
                       <ControlTemplate TargetType="{x:Type ContentControl}">
                           <Border Background="{TemplateBinding Background}">
                               <ContentPresenter/>
                           </Border>
                       </ControlTemplate>
                   </Setter.Value>
               </Setter>
               <Style.Triggers>
                   <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                       <Setter Property="Background" Value="Gray"/>
                   </Trigger>
                   <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                       <Setter Property="Background" Value="White"/>
                   </Trigger>
               </Style.Triggers>
           </Style>
       </Setter.Value>
   </Setter>
</Style>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!