2017-03-08 3 views
0

2番目の列の値でグルーピングを見ることができるように、ListViewItemsのグループの背景を色付けしたいと思います。あなたが見ることができるようにcol2には、数字を繰り返したが、COL1の値は、一意であるZebra-Color-Style ListViewItem行2列目のテキストでGROUPED

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; 
    } 
} 

:ここ

は、サンプルC#コードです。

col2の値が111と333の場合、背景色は - 緑色になり、残りは背景色になります。

ところで、これらはモックアップです...将来の使用では、異なる値を持つ多数のListViewItemがデータベースからストレートになり、2列目の値で順序付けされます。

<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:

そしてここでは、私のWPFコントロールのそれはもう働いていない

Zebra.ItemsSource = obsListItems; 

:私はこの行を削除したら。私はItemsSource = "{Binding Path = obsListItems}"を使ってthis.Datacontext = thisの使用法を使うと思っていました。誰でも知っている理由は?

+0

'それに結合するために、公共の財産であることが必要obsListItems':次のコードサンプルを参照してください。それをpublicに変更し、getter/setterを使用すると、バインディングが機能するはずです。 bgの色を変更するには、 'IMultiValueConverter'がうまくいくように思えます。現在のアイテムとアイテムのリストの両方を渡し、リスト内のいくつのアイテムが現在のアイテムの同じ 'col2'を含んでいるかのカウントを取得します。 1より大きい場合は、行の色を緑色にします。あるいは、 'Bla'オブジェクトモデル自体にboolフラグを設定し、DataTriggerを使って背景色を決定します。 – Rachel

答えて

1

誰でも知っていますか?

あなたは唯一の公共プロパティにバインドすることができます:あなたは、コンバータでこれを達成することができるはず着色「シマウマ」について

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

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

+0

ありがとう、これは魅力のように動作します。また、観測可能なコレクションに一般公開されました。私はPropertyChangedメソッドを追加することも忘れていました。今はすべて大丈夫です。 – DougyDoug

関連する問題