質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

WPF ListView で一部のセル(カラム)のみ背景色できますか?

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,142

byori

score 17

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

列1 列2 列3
WPF C# VS2015 aaa bbb

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

    <Window.Resources>
        <local:UserComment x:Key="comment"/>

<StackPanel>
     <ListView Margin = "8,0" x:Name="lvUsers" MouseMove="listView_MouseMove" BorderThickness="1" Height="485" Width="340"
                     ItemsSource="{Binding Source={StaticResource comment}}" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListView.Resources>
                  <Style TargetType="{x:Type ListViewItem}">
                         <Style.Resources>
                                <Style TargetType="{x:Type TextBlock}">
                                       <Setter Property="ToolTip" Value="{Binding Text, RelativeSource={RelativeSource Self}}" />
                                       <Setter Property="Background" Value="{Binding BkColor}"/>
                                       <Style.Triggers>
                                              <DataTrigger Binding="{Binding IsChecked, ElementName=check3}" Value="True">
                                                     <!-- <Setter Property="FontWeight" Value="Bold" /> -->
                                                     <Setter Property="TextWrapping" Value="Wrap" />
                                              </DataTrigger>
                                              <!-- <DataTrigger Binding="{Binding BkColor}" Value="Blue">
                                                       <Setter Property="Background" Value="{Binding BkColor}"/>
                                              </DataTrigger>-->
                                       </Style.Triggers>
                                 </Style>
                          </Style.Resources>
                         <Setter Property="Template">
                              <Setter.Value>
                                     <ControlTemplate TargetType="{x:Type ListViewItem}">
                                        <!-- まず、元の見た目を再現 -->
                                        <GridViewRowPresenter />
                                  </ControlTemplate>
                              </Setter.Value>
                       </Setter>
                   </Style>
            </ListView.Resources>

            <ListView.ItemsPanel>
                   <ItemsPanelTemplate>
                          <StackPanel Orientation="Vertical" HorizontalAlignment="Center" />
                   </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.View>
                   <GridView>
                          <GridViewColumn Header = "No" Width="30" DisplayMemberBinding="{Binding No}" />
                          <GridViewColumn Header = "Name" Width="80" DisplayMemberBinding="{Binding Name}" />
                          <GridViewColumn Header = "Data" Width="170" DisplayMemberBinding="{Binding Data}" />
                   </GridView>
            </ListView.View>
      </ListView>
</StackPanel>
    public class UserCommentMember
    {
        public string _no = string.Empty;
        public string _name = string.Empty;
        public string _data = string.Empty;
        public string _bkColor = string.Empty;
    }
   :
        public string BkColor
        {
            get { return comment._bkColor; }
            set
            {
                if (value != comment._bkColor)
                {
                    comment._bkColor = value;
                    NotifyPropertyChanged("BkColor");
                }
            }
        }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

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

<Window
  x:Class="Questions248072.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow"
  Width="800"
  Height="450">
  <Grid>
    <ListView ItemsSource="{Binding Users}">
      <ListView.Resources>

        <ContextMenu x:Key="ContextMenu">
          <MenuItem
            Click="MenuItem_Click"
            Header="通常"
            IsChecked="{Binding IsWhite, Mode=OneWay}" />
          <MenuItem
            Click="MenuItem_Click"
            Header="黄色"
            IsChecked="{Binding IsYellow, Mode=OneWay}" />
          <MenuItem
            Click="MenuItem_Click"
            Header="赤"
            IsChecked="{Binding IsRed, Mode=OneWay}" />
        </ContextMenu>
      </ListView.Resources>

      <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
          <Setter Property="ContextMenu" Value="{StaticResource ContextMenu}" />
        </Style>
      </ListView.ItemContainerStyle>

      <ListView.View>
        <GridView>
          <GridViewColumn
            Width="170"
            DisplayMemberBinding="{Binding No}"
            Header="No" />

          <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.Triggers>
                  <DataTrigger Binding="{Binding BkColor}" Value="Red">
                    <Setter TargetName="bg" Property="Background" Value="Red" />
                  </DataTrigger>
                  <DataTrigger Binding="{Binding BkColor}" Value="Yellow">
                    <Setter TargetName="bg" Property="Background" Value="#FE0" />
                  </DataTrigger>
                </DataTemplate.Triggers>
              </DataTemplate>
            </GridViewColumn.CellTemplate>
          </GridViewColumn>

          <GridViewColumn
            Width="80"
            DisplayMemberBinding="{Binding Data}"
            Header="Data" />
        </GridView>
      </ListView.View>
    </ListView>
  </Grid>
</Window>
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;

namespace Questions248072
{
    public class User : INotifyPropertyChanged
    {
        public string No { get; set; }
        public string Name { get; set; }
        public string Data { get; set; }
        public string BkColor { get => _BkColor; set => Set(ref _BkColor, value, null); } // 面倒なので全プロパティ発砲
        public string _BkColor;

        // 全くイケていないがコンバータを書くより手軽なので。。。
        public bool IsRed => BkColor == "Red";
        public bool IsYellow => BkColor == "Yellow";
        public bool IsWhite => !IsRed && !IsYellow;

        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        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;
        }
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        #endregion
    }

    public partial class MainWindow : Window
    {
        public ObservableCollection<User> Users { get; }

        public MainWindow()
        {
            InitializeComponent();

            Users = new ObservableCollection<User>
            {
                new User{ No = "WPF C# VS2015", Name = "aaa", Data = "bbb", BkColor = "Red", },
                new User{ No = "WPF C# VS2017", Name = "aaa", Data = "bbb", BkColor = "Yellow", },
                new User{ No = "WPF C# VS2019", Name = "aaa", Data = "bbb", },
            };

            DataContext = this;
        }

        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            if(sender is MenuItem menuItem)
            {
                if(menuItem.DataContext is User user)
                {
                    switch(menuItem.Header)
                    {
                        case "通常":
                            user.BkColor = "";
                            break;
                        case "黄色":
                            user.BkColor = "Yellow";
                            break;
                        case "赤":
                            user.BkColor = "Red";
                            break;
                    }
                }
            }
        }
    }
}

アプリ画像

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/20 14: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;
    }
    ```

    キャンセル

  • 2020/03/20 15:54 編集

    まず
    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の気持ちのいいところです^^

    キャンセル

  • 2020/03/20 18:04

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

    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る