WPF DataGrid 上的排序和过滤问题答案

【问题标题】：Issue with Sorting and Filtering on WPF DataGridWPF DataGrid 上的排序和过滤问题
【发布时间】：2018-05-08 07:34:26
【问题描述】：

我在尝试获取过滤器框时遇到了一些问题，该过滤器框通过样式添加到数据网格列的标题中，工作正常。当我不对列进行排序时，一切正常，没有问题，但是在我排序的那一刻，我看不到输入的内容，我只能过滤一个字符（也无法清除过滤器，因为有没有要删除的字符并触发 TextChanged 事件）。

同样奇怪的是，在对列进行排序时，从 DataGridColumnHeader 实例开始，在可视化树中找不到 TextBox。如果我能找到它，我可以在循环结束时重置文本，问题可能会得到解决。

在视觉上看起来像这样，我在所有 3 种情况下都输入了“P”：

这背后的相关样式如下：

<Page.Resources>
    <Style x:Key="Filter" TargetType="TextBox">
        <EventSetter Event="TextChanged" Handler="Filter_TextBox_TextChanged"/>
    </Style>
    <Style TargetType="{x:Type DataGrid}">
        <!-- Some visual styling like margins and colors on the grid -->
        <Style.Resources>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <!-- Some visual styling like margins and colors on the header -->
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Grid.Row="0" Margin="10,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
                                    <fa:FontAwesome Grid.Column="1" Grid.Row="0"  Icon="LongArrowUp" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                    <fa:FontAwesome Grid.Column="2" Grid.Row="0" Margin="0,0,10,0" Icon="LongArrowDown" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                    <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#dbdbdb">
                                        <TextBox Style="{StaticResource Filter}" />
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="SortDirection" Value="Ascending">
                        <Setter Property="Background" Value="#F0F0F0"/>
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Grid.Column="0" Grid.Row="0" Margin="5,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
                                            <fa:FontAwesome Grid.Column="1" Grid.Row="0" Margin="0,0,10,0" Icon="SortAmountAsc" Foreground="#919191" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                            <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Margin="0,10,0,0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#dbdbdb">
                                                <TextBox Style="{StaticResource Filter}" />
                                            </StackPanel>
                                        </Grid>
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Descending">
                        <Setter Property="Background" Value="#F0F0F0"/>
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <StackPanel>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Grid.Row="0" Grid.Column="0" Margin="5,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
                                            <fa:FontAwesome Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" Icon="SortAmountDesc" Foreground="#919191" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                            <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#dbdbdb">
                                                <TextBox Style="{StaticResource Filter}" />
                                            </StackPanel>
                                        </Grid>
                                    </StackPanel>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>

DataGrid 的定义没有什么特别之处：

<DataGrid x:Name="History_DataGrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" HeadersVisibility="Column" GridLinesVisibility="None" ItemsSource="{Binding history}" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" SelectionUnit="FullRow" CanUserAddRows="false" SelectionChanged="History_DataGrid_SelectionChanged" Sorting="History_DataGrid_Sorting">
        <DataGrid.Columns>
            <DataGridTextColumn Header="{x:Static resx:Resources.Product}" Binding="{Binding Path=Product}" Width="*" ElementStyle="{StaticResource Wrap}" />
            <DataGridTextColumn Header="{x:Static resx:Resources.Label}" Binding="{Binding Path=Label}" Width="*" ElementStyle="{StaticResource Wrap}" />
            <DataGridTextColumn Header="{x:Static resx:Resources.Color}" Binding="{Binding Path=Color}" Width="*" ElementStyle="{StaticResource Wrap}" />
            <DataGridTextColumn Header="{x:Static resx:Resources.Volume}" Binding="{Binding Path=Volume}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
            <DataGridTextColumn Header="{x:Static resx:Resources.LastPrinted}" Binding="{Binding Path=LastPrinted, StringFormat=\{0:yyyy-MM-dd\}}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
            <DataGridTextColumn Header="{x:Static resx:Resources.TimesPrinted}" Binding="{Binding Path=TimesPrinted}" Width="Auto" ElementStyle="{StaticResource Wrap}" />
        </DataGrid.Columns>
    </DataGrid>

绕过问题的可能方法，虽然我不知道如何完成它们：

使用未更改的过滤框创建第二个标题行排序后。
在末尾设置过滤器文本框的值事件循环，我有一个准备分页的功能数据网格反弹后触发的控件，尽管我需要能够为此访问文本框实例。如果我可以它未排序，但是当列排序时我找不到该框。

知道如何解决这个问题，这确实是一个严重的问题，并且没有任何搜索结果提供任何有用的信息。

编辑：一些需要澄清的场景

只要我不排序，它应该如何工作以及如何工作：

我在文本框中输入“A”。
数据网格的来源在文本“A”上过滤并反弹。
文本框显示“A”作为过滤器。
我在文本框中输入“B”。
数据网格的来源在文本“AB”上过滤并反弹。
文本框显示“AB”作为过滤器。

当列被排序时，它的行为完全不同：

我对列进行了排序，但它丢失了文本框中已经存在的文本。
我在文本框中输入“A”。
数据网格的来源在文本“A”上过滤并反弹。
文本框保持空白，不显示“A”作为过滤器。
我在文本框中输入“B”。
数据网格的来源是在文本“B”上过滤，而不是“AB”（它丢失了“A”），然后反弹。
文本框保持空白，不显示“A”、“B”或“AB”作为过滤器。

因此删除过滤器非常困难，并且没有要删除的文本并触发 TextChanged 事件。

【问题讨论】：

标签： wpf sorting datagrid

【解决方案1】：

我联系了我公司的一些 WPF 专家，他们帮助我找到了可行的解决方案。

编辑后的样式如下：

<Page.Resources>
<Style x:Key="Filter" TargetType="TextBox">
    <EventSetter Event="TextChanged" Handler="Filter_TextBox_TextChanged"/>
</Style>
<Style TargetType="{x:Type DataGrid}">
    <!-- Some visual styling like margins and colors on the grid -->
    <Style.Resources>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <!-- Some visual styling like margins and colors on the header -->
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Grid.Row="0" Margin="10,0,10,0" TextWrapping="WrapWithOverflow" Text="{Binding}"/>
                                    <fa:FontAwesome Grid.Column="1" Grid.Row="0" x:Name="SortIcon1" Icon="LongArrowUp" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                    <fa:FontAwesome Grid.Column="2" Grid.Row="0" x:Name="SortIcon2" Margin="0,0,10,0" Icon="LongArrowDown" Foreground="#dbdbdb" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
                                <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Margin="0,10,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="#dbdbdb">
                                    <TextBox Style="{StaticResource Filter}" />
                                </StackPanel>
                            </Grid>
                        </StackPanel>
                        <DataTemplate.Triggers>
                            <DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource AncestorType=DataGridColumnHeader}}" Value="Ascending">
                                <Setter TargetName="SortIcon1" Property="Icon" Value="SortAmountAsc" />
                                <Setter TargetName="SortIcon2" Property="Visibility" Value="Hidden" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource AncestorType=DataGridColumnHeader}}" Value="Descending">
                                <Setter TargetName="SortIcon1" Property="Icon" Value="SortAmountDesc" />
                                <Setter TargetName="SortIcon2" Property="Visibility" Value="Hidden" />
                            </DataTrigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="SortDirection" Value="Ascending">
                    <Setter Property="Background" Value="#F0F0F0"/>
                </Trigger>
                <Trigger Property="SortDirection" Value="Descending">
                    <Setter Property="Background" Value="#F0F0F0"/>
                </Trigger>
            </Style.Triggers>
        </Style>

基本上我的主要错误是每个排序状态都有一个 DataTemplate。他们指出我可以向绑定到 Header 事件的 Datatemplate 添加触发器。为排序图标添加名称使我能够使用新触发器部分中的 TargetName 属性更改它们。

由于现在只有一个文本框实例，因此问题已解决。

【讨论】：