ListView 实现斑马线颜色间隔效果（ListViewItem颜色间隔显示）

最新推荐文章于 2024-04-12 19:33:34 发布

原创最新推荐文章于 2024-04-12 19:33:34 发布 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ListView 颜色间隔 #斑马线颜色间隔

WPF 专栏收录该内容

53 篇文章

订阅专栏

本文介绍三种在WPF中实现ListView隔行变色的方法：使用转换器、继承ListView和使用StyleSelector。通过示例代码展示了如何改变ListViewItem的背景色以实现视觉上的区分。

第一种方式：使用转换器实现

1、转换器功能实现
//ListViewItem 隔行显示不同的颜色，用于界面样式背景颜色绑定
public sealed class BackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        ListViewItem item = (ListViewItem)value;
        ListView listView = ItemsControl.ItemsControlFromItemContainer(item) as ListView; // Use the ItemsControl.ItemsContainerFromItemContainer(item) to get the ItemsControl.. and cast  

        // Get the index of a ListViewItem  
        int index = listView.ItemContainerGenerator.IndexFromContainer(item); // this is a state-of-art way to get the index of an Item from a ItemsControl  
        if (index % 2 == 0)
            return new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF33C3FB"));//Brushes.Teal;//
        else
        {
            return new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF009DD0"));//Brushes.LightGreen;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2、转换器添加到资源字典

//添加到Converter.xaml中，转换器资源字典
<converter:BackgroundConverter x:Key="BackgroundConverter"/>

3、样式改写

//添加到style.xaml中，公共样式资源字典
<!--ListView-->
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
    <Setter Property="Margin" Value="2,1,2,0"/>
    <Setter Property="Background">
        <Setter.Value>
            <Binding RelativeSource="{RelativeSource Self}" Converter="{StaticResource BackgroundConverter}" />
        </Setter.Value>
    </Setter>
</Style>

4、样式引用

<ListView x:Name="ShowTipList" Height="110" Background="{StaticResource ThemeColor1}" ScrollViewer.VerticalScrollBarVisibility="Auto"
    ItemContainerStyle="{StaticResource ListViewItemStyle}"
    ItemsSource="{Binding DataList, Mode=TwoWay}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
    cal:Message.Attach="[Event MouseDoubleClick] = [Action Capsule_MouseDoubleClick($view, $eventArgs)]">

效果图：

第二种方法：继承ListView；

1、定义一个继承ListView的类，要使用GridView

public sealed class SubListView : System.Windows.Controls.ListView
{
    protected override void PrepareContainerForItemOverride(System.Windows.DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        if (View is System.Windows.Controls.GridView)
        {
            int index = ItemContainerGenerator.IndexFromContainer(element); // The ItemContainerGenerator has method to get index for a given Item  
            System.Windows.Controls.ListViewItem lvi = element as System.Windows.Controls.ListViewItem;
            if (index % 2 == 0)
                lvi.Background = Brushes.Cyan;
            else
            {
                lvi.Background = Brushes.Teal;
            }
        }
    }
}

2、调用：要使用GridView

添加样式隐藏GridView的列头
<!--GridViewColumnHeader-->
<Style x:Key="myHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

<local:SubListView xmlns:namespc="clr-namespace:AlternativeBackgroundListView.Controls"   x:Name="SubListView"   ItemsSource="{Binding Customers}"  Grid.Row="1"  >  
    <local:SubListView.View>  
        <GridView  AllowsColumnReorder="True"  ColumnHeaderToolTip="Some Tooltip"   ColumnHeaderContainerStyle="{StaticResource myHeaderStyle}">  
            <GridViewColumn Header="Name"   DisplayMemberBinding="{Binding Name}"   Width="Auto"   />
            </GridViewColumn>  
        </GridView>  
    </local:SubListView.View>  
</local:SubListView>  

//类定义
public class Customers
{
    string Name {get;set;}
    ………………
    ………………
}

效果图：

第三种方法：使用StyleSelector

1、C# 代码
public class ListViewItemStyleSelector : System.Windows.Controls.StyleSelector
{
    public override System.Windows.Style SelectStyle(object item, System.Windows.DependencyObject container)
    {
        System.Windows.Style st = new System.Windows.Style();
        st.TargetType = typeof(System.Windows.Controls.ListViewItem);
        System.Windows.Setter backgroundSetter = new System.Windows.Setter();
        backgroundSetter.Property = System.Windows.Controls.ListViewItem.BackgroundProperty;
        System.Windows.Controls.ListView listView = System.Windows.Controls.ItemsControl.ItemsControlFromItemContainer(container) as System.Windows.Controls.ListView;
        int index = listView.ItemContainerGenerator.IndexFromContainer(container);
        if (index % 2 == 0)
            backgroundSetter.Value = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF33C3FB"));//Brushes.LightBlue;
        else
        {
            backgroundSetter.Value = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF009DD0"));//Brushes.Beige;
        }
        st.Setters.Add(backgroundSetter);
        return st;
    }
}

2、Xaml代码

引入资源
<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
        </ResourceDictionary.MergedDictionaries>
        <local:ListViewItemStyleSelector x:Key="myStyleSelector"/>
    </ResourceDictionary>
</UserControl.Resources>

//调用示例
<ListView x:Name="ListViewWithStyleSelector" Height="280" ItemsSource="{Binding DataList}" Background="{StaticResource ThemeColor1}" ItemContainerStyleSelector="{DynamicResource myStyleSelector}" />


//其他调用示例
<!-- THe key is ItemContainerStyleSelector -->  
<ListView x:Name="ListViewWithStyleSelector" ItemsSource="{Binding Customers}"  
       ItemContainerStyleSelector="{DynamicResource myStyleSelector}" >  
<ListView.Resources>  

</ListView.Resources>  
<ListView.View>  
     <GridView AllowsColumnReorder="True" ColumnHeaderToolTip="Some Tooltip">  
         <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" Width="Auto" />
         <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}" Width="Auto" />
         <GridViewColumn Header="Address" DisplayMemberBinding="{Binding Address}" Width="Auto" />
     </GridView>  
</ListView.View>  
</ListView>

效果图：