WPF ListView で一部のセル（カラム）のみ背景色できますか？

ListView で下記のようにすると背景色が個別にせっとできていますが、行全体になっています。
これを特定のセルを指定することは可能でしょうか？

列1	列2	列3

WPF C# VS2015	aaa	bbb

上記のようなとき「aaa のみに背景色を指定する」という具合

C#
1
2    <Window.Resources>
3        <local:UserComment x:Key="comment"/>
4
5<StackPanel>
6     <ListView Margin = "8,0" x:Name="lvUsers" MouseMove="listView_MouseMove" BorderThickness="1" Height="485" Width="340"
7                     ItemsSource="{Binding Source={StaticResource comment}}" ScrollViewer.VerticalScrollBarVisibility="Auto">
8            <ListView.Resources>
9                  <Style TargetType="{x:Type ListViewItem}">
10                         <Style.Resources>
11                                <Style TargetType="{x:Type TextBlock}">
12                                       <Setter Property="ToolTip" Value="{Binding Text, RelativeSource={RelativeSource Self}}" />
13                                       <Setter Property="Background" Value="{Binding BkColor}"/>
14                                       <Style.Triggers>
15                                              <DataTrigger Binding="{Binding IsChecked, ElementName=check3}" Value="True">
16                                                     <!-- <Setter Property="FontWeight" Value="Bold" /> -->
17                                                     <Setter Property="TextWrapping" Value="Wrap" />
18                                              </DataTrigger>
19                                              <!-- <DataTrigger Binding="{Binding BkColor}" Value="Blue">
20                                              	     <Setter Property="Background" Value="{Binding BkColor}"/>
21                                              </DataTrigger>-->
22                                       </Style.Triggers>
23                                 </Style>
24                          </Style.Resources>
25                   	  <Setter Property="Template">
26                          	<Setter.Value>
27                                 	<ControlTemplate TargetType="{x:Type ListViewItem}">
28                                        <!-- まず、元の見た目を再現 -->
29                                		<GridViewRowPresenter />
30                          		</ControlTemplate>
31                          	</Setter.Value>
32                   	</Setter>
33                   </Style>
34            </ListView.Resources>
35
36            <ListView.ItemsPanel>
37                   <ItemsPanelTemplate>
38                          <StackPanel Orientation="Vertical" HorizontalAlignment="Center" />
39                   </ItemsPanelTemplate>
40            </ListView.ItemsPanel>
41            <ListView.View>
42                   <GridView>
43                          <GridViewColumn Header = "No" Width="30" DisplayMemberBinding="{Binding No}" />
44                          <GridViewColumn Header = "Name" Width="80" DisplayMemberBinding="{Binding Name}" />
45                          <GridViewColumn Header = "Data" Width="170" DisplayMemberBinding="{Binding Data}" />
46                   </GridView>
47            </ListView.View>
48      </ListView>
49</StackPanel>

C#
1    public class UserCommentMember
2    {
3        public string _no = string.Empty;
4        public string _name = string.Empty;
5        public string _data = string.Empty;
6        public string _bkColor = string.Empty;
7    }
8　　　:
9        public string BkColor
10        {
11            get { return comment._bkColor; }
12            set
13            {
14                if (value != comment._bkColor)
15                {
16                    comment._bkColor = value;
17                    NotifyPropertyChanged("BkColor");
18                }
19            }
20        }

行動規範の内容に同意します

回答1件

ベストアンサー

これを特定のセルを指定することは可能でしょうか？

GridViewColumn.CellTemplateで変更することになります。

雑で申し訳ないですが、色の変更までの例です。

xml
1<Window
2  x:Class="Questions248072.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Title="MainWindow"
6  Width="800"
7  Height="450">
8  <Grid>
9    <ListView ItemsSource="{Binding Users}">
10      <ListView.Resources>
11
12        <ContextMenu x:Key="ContextMenu">
13          <MenuItem
14            Click="MenuItem_Click"
15            Header="通常"
16            IsChecked="{Binding IsWhite, Mode=OneWay}" />
17          <MenuItem
18            Click="MenuItem_Click"
19            Header="黄色"
20            IsChecked="{Binding IsYellow, Mode=OneWay}" />
21          <MenuItem
22            Click="MenuItem_Click"
23            Header="赤"
24            IsChecked="{Binding IsRed, Mode=OneWay}" />
25        </ContextMenu>
26      </ListView.Resources>
27      
28      <ListView.ItemContainerStyle>
29        <Style TargetType="{x:Type ListViewItem}">
30          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
31          <Setter Property="ContextMenu" Value="{StaticResource ContextMenu}" />
32        </Style>
33      </ListView.ItemContainerStyle>
34      
35      <ListView.View>
36        <GridView>
37          <GridViewColumn
38            Width="170"
39            DisplayMemberBinding="{Binding No}"
40            Header="No" />
41
42          <GridViewColumn Width="80" Header="Name">
43            <GridViewColumn.CellTemplate>
44              <DataTemplate>
45                <Border x:Name="bg" Margin="-6,0,-6,0">
46                  <TextBlock Margin="6,0,6,0" Text="{Binding Name}" />
47                </Border>
48                <DataTemplate.Triggers>
49                  <DataTrigger Binding="{Binding BkColor}" Value="Red">
50                    <Setter TargetName="bg" Property="Background" Value="Red" />
51                  </DataTrigger>
52                  <DataTrigger Binding="{Binding BkColor}" Value="Yellow">
53                    <Setter TargetName="bg" Property="Background" Value="#FE0" />
54                  </DataTrigger>
55                </DataTemplate.Triggers>
56              </DataTemplate>
57            </GridViewColumn.CellTemplate>
58          </GridViewColumn>
59
60          <GridViewColumn
61            Width="80"
62            DisplayMemberBinding="{Binding Data}"
63            Header="Data" />
64        </GridView>
65      </ListView.View>
66    </ListView>
67  </Grid>
68</Window>

cs
1using System.Collections.ObjectModel;
2using System.ComponentModel;
3using System.Runtime.CompilerServices;
4using System.Windows;
5using System.Windows.Controls;
6
7namespace Questions248072
8{
9    public class User : INotifyPropertyChanged
10    {
11        public string No { get; set; }
12        public string Name { get; set; }
13        public string Data { get; set; }
14        public string BkColor { get => _BkColor; set => Set(ref _BkColor, value, null); } // 面倒なので全プロパティ発砲
15        public string _BkColor;
16
17        // 全くイケていないがコンバータを書くより手軽なので。。。
18        public bool IsRed => BkColor == "Red";
19        public bool IsYellow => BkColor == "Yellow";
20        public bool IsWhite => !IsRed && !IsYellow;
21
22        #region INotifyPropertyChanged
23        public event PropertyChangedEventHandler PropertyChanged;
24        protected bool Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
25        {
26            if(Equals(storage, value)) return false;
27            storage = value;
28            OnPropertyChanged(propertyName);
29            return true;
30        }
31        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
32            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
33        #endregion
34    }
35
36    public partial class MainWindow : Window
37    {
38        public ObservableCollection<User> Users { get; }
39
40        public MainWindow()
41        {
42            InitializeComponent();
43
44            Users = new ObservableCollection<User>
45            {
46                new User{ No = "WPF C# VS2015", Name = "aaa", Data = "bbb", BkColor = "Red", },
47                new User{ No = "WPF C# VS2017", Name = "aaa", Data = "bbb", BkColor = "Yellow", },
48                new User{ No = "WPF C# VS2019", Name = "aaa", Data = "bbb", },
49            };
50
51            DataContext = this;
52        }
53
54        private void MenuItem_Click(object sender, RoutedEventArgs e)
55        {
56            if(sender is MenuItem menuItem)
57            {
58                if(menuItem.DataContext is User user)
59                {
60                    switch(menuItem.Header)
61                    {
62                        case "通常":
63                            user.BkColor = "";
64                            break;
65                        case "黄色":
66                            user.BkColor = "Yellow";
67                            break;
68                        case "赤":
69                            user.BkColor = "Red";
70                            break;
71                    }
72                }
73            }
74        }
75    }
76}

投稿2020/03/19 11:32

編集2023/07/21 09:04

TN8001

総合スコア9862

byori

2020/03/20 05:56

TN8001 さま、 GridViewColumn を下記のように変更することで実現しました。ありがとうございます。 ```Xaml <GridViewColumn Width="80" Header="Name"> <GridViewColumn.CellTemplate> <DataTemplate> <Border x:Name="bg" Margin="-6,0,-6,0"> <TextBlock Margin="6,0,6,0" Text="{Binding Name}" /> </Border> <DataTemplate.Resources> <Style TargetType="{x:Type TextBlock}"> <Setter Property="Background" Value="{Binding BkColor}" /> </Style> </DataTemplate.Resources> </DataTemplate> </GridViewColumn.CellTemplate> </GridViewColumn> ``` 質問のタイトルと離れますが、可能でしたら下記のコードの働きを教えてください。宣言の => と Set() ``` public string BkColor { get => _BkColor; set => Set(ref _BkColor, value, null); } // 面倒なので全プロパティ発砲 // 全くイケていないがコンバータを書くより手軽なので。。。 public bool IsRed => BkColor == "Red"; public bool IsYellow => BkColor == "Yellow"; public bool IsWhite => !IsRed && !IsYellow; : protected bool Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null) { if(Equals(storage, value)) return false; storage = value; OnPropertyChanged(propertyName); return true; } ```

TN8001

2020/03/20 06:56 編集

まず public bool IsRed => BkColor == "Red"; は public bool IsRed { get { return BkColor == "Red"; } } と全く同じ意味です。いろいろなところで＝＞による短縮表記ができるようになっています。 VisualStudioであればドライバーアイコン（[Alt]+[Enter]もしくは[Ctrl]+[.]）で相互変換できます。 https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/classes-and-structs/properties このあたりを見てください。次にSet()ですが、 WPFに必須のINotifyPropertyChangedはご存じでしょうか？ご存じなければ良記事がいっぱいあるので一通り目を通してください。実コードではPrismやReactivePropertyを利用したりするでしょうが、回答コードは単独で確認しやすいよう自前実装することも多いです。 SetProperty()メソッドになっていることが多いですが、長いので私はSet()にしています。簡単に説明すると、 1. ListViewのコンテキストメニューでMenuItem_Clickを呼ぶ 2. BkColorプロパティを何かに変える 3. プロパティのセッターでSet()メソッドを呼ぶ 4. Set()メソッドで値を変えつつPropertyChangedイベントを発砲する 5. xamlのバインドの仕組みでPropertyChangedイベントがあった場合、自動的に反映されるようになっている 6. 結果ListViewの色が変更されるという感じです。定型コードなので流れがわかっていれば十分だと思います。プロパティを変えるだけでViewも変更されるのが、MVVMの気持ちのいいところです^^

byori

2020/03/20 09:04

ご丁寧な説明ありがとうございます。よく見かけるサンプルと異なる表現でしたのでコードは実行できるのですが意味がよくわかりませんでした。ありがとうございます。

行動規範の内容に同意します