◆ WPF の ListView (GridView) にソート機能をつける
◆ ライブラリをリソースに追加して ListView の Style に設定するだけ
◆ それだけでヘッダクリックでソート機能がつく……けど見る専用のところしか向いてない
  ◆ View のみでソートするので ViewModel 側との連携が機能しなくなる

続けて前に作ったものの紹介です
たぶんあとひとつかふたつ続きます

これは WPF の GridView でヘッダをクリックしたらソートされるものです
前のこの記事の改良版のようです
(自分でもあまり違いを覚えてないです)

見た目はこういうのです

sgv01

sgv02

ソース

[SortableGridView.xaml]
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:wpftestpro"
x:Class="wpftestpro.SortableGridView">
<Style TargetType="ListView" x:Key="SortableGridListView">
<EventSetter Event="ButtonBase.Click" Handler="OnClickGridViewColumnHeader"/>
<Style.Resources>
<LinearGradientBrush x:Key="GridViewColumnHeaderBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.4091"/>
<GradientStop Color="#FFF7F8F9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderBorderBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF2F2F2" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderHoverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFBDEDFF" Offset="0"/>
<GradientStop Color="#FFB7E7FB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderPressBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF8DD6F7" Offset="0"/>
<GradientStop Color="#FF8AD1F5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="GridViewColumnHeaderGripper" TargetType="{x:Type Thumb}">
<Setter Property="Canvas.Right" Value="-9"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" Padding="{TemplateBinding Padding}">
<Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="2,4,2,4"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="7"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="UpperHighlight" Fill="#FFE3F7FF" Visibility="Collapsed"/>
<Polyline x:Name="SortTriangle" Points="0,3 5,0 10,3" Stroke="#FFAAAAAA" StrokeThickness="2" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Top" />
<Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
<ContentPresenter x:Name="HeaderContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<Border x:Name="HeaderHoverBorder" BorderThickness="1,0,1,1" Margin="1,1,0,0"/>
<Border x:Name="HeaderPressBorder" BorderThickness="1,1,1,0" Margin="1,0,0,1"/>
<Canvas>
<Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
<Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF88CBEB"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
<Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF95DAF9"/>
<Setter Property="BorderBrush" TargetName="HeaderPressBorder" Value="#FF7A9EB1"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Fill" TargetName="UpperHighlight" Value="#FFBCE4F9"/>
<Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
<Setter Property="Margin" TargetName="HeaderContent" Value="1,1,0,0"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="20"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="local:SortableGridView.Order" Value="Asc">
<Setter Property="Visibility" TargetName="SortTriangle" Value="Visible"/>
</Trigger>
<Trigger Property="local:SortableGridView.Order" Value="Desc">
<Setter Property="Visibility" TargetName="SortTriangle" Value="Visible"/>
<Setter Property="LayoutTransform" TargetName="SortTriangle">
<Setter.Value>
<RotateTransform Angle="180"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Role" Value="Floating">
<Setter Property="Opacity" Value="0.4082"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Canvas x:Name="PART_FloatingHeaderCanvas">
<Rectangle Fill="#FF000000" Height="{TemplateBinding ActualHeight}" Opacity="0.4697" Width="{TemplateBinding ActualWidth}"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Role" Value="Padding">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="20"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</ResourceDictionary>

[SortableGridView.xaml.cs]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace wpftestpro
{
public partial class SortableGridView : ResourceDictionary
{
public static SortOrder? GetOrder(DependencyObject obj)
{
return (SortOrder?)obj.GetValue(OrderProperty);
}

public static void SetOrder(DependencyObject obj, SortOrder? value)
{
obj.SetValue(OrderProperty, value);
}

// Using a DependencyProperty as the backing store for Order. This enables animation, styling, binding, etc...
public static readonly DependencyProperty OrderProperty =
DependencyProperty.RegisterAttached("Order", typeof(SortOrder?), typeof(SortableGridView), new PropertyMetadata(null));

public SortableGridView()
{
InitializeComponent();
}

public void OnClickGridViewColumnHeader(object sender, RoutedEventArgs e)
{
var listview = sender as ListView;
var header = e.OriginalSource as GridViewColumnHeader;
var binding = (Binding)header?.Column?.DisplayMemberBinding;
if (listview == null || binding == null) return;

// 添付プロパティがあるなら今ソートしてるカラム
if (header.GetValue(OrderProperty) != null)
{
this.reverseSort(listview);
header.SetValue(OrderProperty, 1 - (SortOrder)header.GetValue(OrderProperty));
}
else
{
// 前回のソートヘッダの添付プロパティを削除
var row_presenter = (GridViewHeaderRowPresenter)header.Parent;
var column_headers = typeof(GridViewHeaderRowPresenter)
.GetProperty("ActualColumnHeaders", BindingFlags.Instance | BindingFlags.NonPublic)
.GetValue(row_presenter) as List<GridViewColumnHeader>;

foreach (var column_header in column_headers)
{
column_header.ClearValue(OrderProperty);
}

// カラムに SortOrder 添付プロパティがあればデフォルトオーダー ないなら Asc
var default_order = (SortOrder?)header.Column.GetValue(OrderProperty) ?? SortOrder.Asc;
header.SetValue(OrderProperty, default_order);

this.sort(listview, binding.Path.Path, default_order);
}
}

private void sort(ListView listview, string by, SortOrder order)
{
var items = listview.ItemsSource.Cast<object>();
if (order == SortOrder.Asc)
{
listview.ItemsSource = items.OrderBy(e => e.GetType().GetProperty(by).GetValue(e)).ToList();
}
else
{
listview.ItemsSource = items.OrderByDescending(e => e.GetType().GetProperty(by).GetValue(e)).ToList();
}
}

private void reverseSort(ListView listview)
{
listview.ItemsSource = listview.ItemsSource.Cast<object>().Reverse().ToList();
}
}

public enum SortOrder
{
Asc,
Desc,
}
}


この 2 ファイルです
WPF って見た目をデフォルトからちょっとカスタマイズしようとすると元のデザインの XAML 全部コピーして必要箇所書き換えるのでコードが長くなりがちです
変更箇所はすごくちょっとしたものなのですけどね

Gist

使い方

まずこれらの 2 ファイルをプロジェクトに入れます

そしてプロジェクトの App.xaml からこのリソースディクショナリをロードします

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SortableGridView.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

SortableGridView.xaml の設置場所に応じてパスを変えてください

上での画像のように これをメインウィンドウに設定するならメインウィンドウを

<Window 略>
<Grid>
<ListView ItemsSource="{Binding items}" Style="{StaticResource SortableGridListView}">
<ListView.View>
<GridView>
<GridViewColumn Header="AAA" DisplayMemberBinding="{Binding aaa}" Width="120" />
<GridViewColumn Header="BBB" DisplayMemberBinding="{Binding bbb}" Width="120" />
<GridViewColumn Header="CCC" DisplayMemberBinding="{Binding ccc}" Width="120" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>

のようにします
Style に App.xaml で登録したリソースを設定しているだけで他は普通の ListView と代わりありません

C# コード側も

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();

this.DataContext = new VM();
}
}

public class Row
{
public string aaa { get; set; }
public string bbb { get; set; }
public string ccc { get; set; }
}

public class VM
{
public ObservableCollection<Row> items { get; } = new ObservableCollection<Row>(new List<Row>
{
new Row { aaa = "aaa1", bbb = "bbb2", ccc = "ccc3" },
new Row { aaa = "aaa2", bbb = "bbb1", ccc = "ccc2" },
new Row { aaa = "aaa3", bbb = "bbb3", ccc = "ccc1" },
});
}

と 特別なことはしないです

簡単に使えるのですが 欠点もあります
表示のみの想定で View 側で完結させているので Binding されたコレクションとの対応がなくなります
ソートしてしまうと items を更新しても画面は更新されなくなります

対応させるとなると ソート部分はライブラリ側でやらずに VM 側に◯◯の列で×順にソートしてって依頼するメッセージを送るようなことになると思います
そうなると自分でソート処理も書くことになって面倒です
そういうことしなくても ライブラリ側で勝手にやってくれて 作る側はいつもどおりでいいというのを目的としたのでこうなりました