Zebra-Color-Style ListViewItem按第二列中的文本进行GROUPED

时间:2017-03-08 13:59:21

标签: c# wpf listview listviewitem

我想为一组ListViewItems的背景着色,这样我就可以通过第二列中的值看到分组。

以下是C#代码示例:

class Bla
{
    public int col1 { get; set; }
    public int col2 { get; set; }
}

public partial class MainWindow : Window
{
    ObservableCollection<Bla> obsListItems = new ObservableCollection<Bla>();

    public MainWindow()
    {
        InitializeComponent();

        obsListItems.Add(new Bla
        {
            col1 = 1, col2 = 111
        });
        obsListItems.Add(new Bla
        {
            col1 = 2, col2 = 111
        });
        obsListItems.Add(new Bla
        {
            col1 = 3, col2 = 222
        });
        obsListItems.Add(new Bla
        {
            col1 = 4, col2 = 333
        });
        obsListItems.Add(new Bla
        {
            col1 = 5, col2 = 333
        });
        obsListItems.Add(new Bla
        {
            col1 = 6, col2 = 444
        });

        obsListItems.Add(new Bla
        {
            col1 = 7, col2 = 444
        });

        Zebra.ItemsSource = obsListItems;

        this.DataContext = this;
    }
}

如您所见,col1的值是唯一的,而col2的值是重复的。

如果col2的值为111和333,那么背景颜色应该变成 - 绿色,而其余部分保持背景颜色。

顺便说一句:当然这些都是模型...在未来的使用中,会有更多的ListViewItems具有不同的值,直接来自数据库并按第二列的值排序。

这是我的WPF控件:

<ListView x:Name="Zebra"
              ItemsSource="{Binding Path=obsListItems}"
              SelectionMode="Single" Background="#FFC8F0F1" FontSize="16" Margin="0,0,0,10">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Column 1"
                                        DisplayMemberBinding="{Binding col1}"
                                        Width="70" />
                <GridViewColumn Header="Column 2"
                                        DisplayMemberBinding="{Binding col2}"
                                        Width="90" />
            </GridView>
        </ListView.View>
    </ListView>

@offtopic:删除此行后:

Zebra.ItemsSource = obsListItems;

它不再起作用了。我认为使用ItemsSource =“{Binding Path = obsListItems}”将使用this.Datacontext = this。谁知道为什么?

1 个答案:

答案 0 :(得分:1)

  

任何人都知道为什么?

您只能绑定到公共属性

public ObservableCollection<Bla> obsListItems { get; } new ObservableCollection<Bla>();

关于&#34;斑马&#34;着色你应该能够用转换器完成这个。请参考以下代码示例:

namespace WpfApplication1
{
    public class ColorConverter : IValueConverter
    {
        private static List<System.Windows.Media.Brush> _brushesToChooseFrom = new List<System.Windows.Media.Brush>()
        {
            System.Windows.Media.Brushes.Green,
            System.Windows.Media.Brushes.Red,
            System.Windows.Media.Brushes.Violet,
            System.Windows.Media.Brushes.Yellow
        };
        private Dictionary<int, System.Windows.Media.Brush> _usedBrushes = new Dictionary<int, System.Windows.Media.Brush>();
        private int index = 0;

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            int col2 = (int)value;
            if(!_usedBrushes.ContainsKey(col2))
            {
                System.Windows.Media.Brush brush = _brushesToChooseFrom[index++];
                if (index == _brushesToChooseFrom.Count)
                    index = 0;
                _usedBrushes.Add(col2, brush);
            }

            return _usedBrushes[col2];
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}
<ListView x:Name="Zebra"
              ItemsSource="{Binding Path=obsListItems}"
              SelectionMode="Single" Background="#FFC8F0F1" FontSize="16" Margin="0,0,0,10"
              xmlns:local="clr-namespace:WpfApplication1">
    <ListView.Resources>
        <local:ColorConverter x:Key="conv" />
    </ListView.Resources>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="{Binding col2, Converter={StaticResource conv}}" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Column 1"
                                        DisplayMemberBinding="{Binding col1}"
                                        Width="70" />
            <GridViewColumn Header="Column 2"
                                        DisplayMemberBinding="{Binding col2}"
                                        Width="90" />
        </GridView>
    </ListView.View>
</ListView>

enter image description here