WPF ItemControl實作斑馬紋

0.效果

1.Converter

/// <summary>
    /// 斑馬紋轉換器
    /// </summary>
    public class ZebraStripeConverter : IValueConverter
    {
        public SolidColorBrush Main { get; set; }
        public SolidColorBrush Assist { get; set; }

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((int)value) % 2 == 1 ? Assist : Main;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return Binding.DoNothing;
        }
    }
           

2.View

<Page.Resources>
        <ResourceDictionary>
            <converter:ZebraStripeConverter x:Key="zebraStripeConverter"
                                            Main="White"
                                            Assist="Blue" />
        </ResourceDictionary>
    </Page.Resources>
           

<ItemsControl Grid.IsSharedSizeScope="True"
                                          AlternationCount="1000"><!--AlternationCount這個屬性必須設定-->
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Border x:Name="Border"
                                                Padding="8" 
                                                CornerRadius="20"
                                                Background="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(ItemsControl.AlternationIndex),Converter={StaticResource zebraStripeConverter}}">
                                        </Border>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>