Zenn
🗿

[WPF/C#] ListViewのヘッダの中身をカスタムしたい

2021/07/31に公開
C#
WPF
XAML
listview
tech

もくじ

https://qiita.com/tera1707/items/4fda73d86eded283ec4f

やりたいこと

WPFでListViewを使うときに、ヘッダ部分の見た目を標準からちょっといじくりたい。
こんな感じに、ヘッダ部分に変なものを入れたい。

やり方

<GridViewColumn.Header>に好きなものを入れる。下記のような感じ。

        <ListView ItemsSource="{Binding DataList}">
            <ListView.View>
                <GridView>
                    <!-- ヘッダ：GridViewColumnHeaderで指定 -->
                    <!-- セル　：DisplayMemberBindingで指定 -->
                    <GridViewColumn DisplayMemberBinding="{Binding Name}" Width="100">
                        <GridViewColumn.Header>
                            <StackPanel Orientation="Horizontal">
                                <Ellipse Stroke="Red" StrokeThickness="1" Width="10" Height="10" />
                                <TextBlock Text=" ヘッダの文言"/>
                            </StackPanel>
                        </GridViewColumn.Header>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>

image.png

サンプルコード全体

試してみたコード全体

MainWindow.xaml
<Window x:Class="ListViewTet.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListViewTet"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <ListView ItemsSource="{Binding DataList}">
            <ListView.View>
                <GridView>
                    <!-- ヘッダ：GridViewColumnHeaderで指定 -->
                    <!-- セル　：DisplayMemberBindingで指定 -->
                    <GridViewColumn DisplayMemberBinding="{Binding Name}" Width="100">
                        <GridViewColumn.Header>
                            <StackPanel Orientation="Horizontal">
                                <Ellipse Stroke="Red" StrokeThickness="1" Width="10" Height="10" />
                                <TextBlock Text=" ヘッダの文言"/>
                            </StackPanel>
                        </GridViewColumn.Header>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>
MainWindow.xaml.cs
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows;
using System.Windows.Media;

namespace ListViewTet
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        #region INotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName) => this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        #endregion

        public ObservableCollection<MyData> DataList { get; set; } = new ObservableCollection<MyData>();

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;

            DataList.Add(new MyData() { No = 1, Brush = new SolidColorBrush(Colors.Red), Name = "Red" });
            DataList.Add(new MyData() { No = 2, Brush = new SolidColorBrush(Colors.Blue), Name = "Blue" });
            DataList.Add(new MyData() { No = 3, Brush = new SolidColorBrush(Colors.Green), Name = "Green" });
        }
    }

    public class MyData
    {
        public int No { get; set; }
        public SolidColorBrush Brush { get; set; }
        public string Name { get; set; }
    }
}

Discussion