GridView にヘッダクリックでソート機能追加

readme.md

使い方

App.xaml のリソースに SortableGridView.xaml を追加

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

ListView のスタイルに SortableGridListView を追加
その他 ListView/GridView の表示は同じ普段どおり

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

    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" },
        });
    }

sgv01.png

sgv02.png

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