对 WPF 数据网格列重新排序

Question

我想为用户提供一个设置，他可以在其中重新排序datagrid. 我知道我可以使用 来DisplayIndex实现此目的，但我的问题是如何保存每列的顺序，我如何知道哪一列被移动到第一个位置等等？

我想过使用列标题，但我不知道这是否是最好的解决方案。

下面是我使用的数据网格：

<DataGrid GridLinesVisibility="All" VerticalGridLinesBrush="#FFE5E2DB" IsReadOnly="true" AutoGenerateColumns="False" VerticalContentAlignment="Center" 
                      ItemsSource="{Binding DisplayIndexes, UpdateSourceTrigger=PropertyChanged}" CanUserSortColumns="True" SelectionUnit="FullRow" 
                      HorizontalAlignment="Stretch" Margin="5,5,5,0" Name="dgDisplayIndexes"  
                      TabIndex="1" RowHeight="30" 
                      CanUserAddRows="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ColumnWidth="Auto" CanUserReorderColumns="True" 
                      CanUserResizeColumns="False" CanUserResizeRows="False" VerticalAlignment="Top" Height="150">
                <DataGrid.RowStyle>
                    <Style TargetType="{x:Type DataGridRow}">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="0"/>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                    </Style>
                </DataGrid.RowStyle>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ID" Binding="{Binding ID}" DisplayIndex="0" Visibility="Hidden" />
                    <DataGridTemplateColumn SortMemberPath="status"  
                                        Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_STATUS.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                                        DisplayIndex="1" >
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Image Height="16" Width="16" Stretch="Fill" Source="{Binding status, Converter={StaticResource getIconForStatus}}" />
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn 
                    Header="#" 
                    Binding="{Binding bonnummer}"  
                    DisplayIndex="2" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_NAAM.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding achternaam}" 
                    DisplayIndex="3" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_ADRES.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding Adres}" 
                    DisplayIndex="4" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_PC.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding Postcode}" 
                    DisplayIndex="5" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_PLAATS.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding plaats}" 
                    DisplayIndex="6"/>
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_TELEFOON.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding telefoonnummer}" 
                    DisplayIndex="7" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_AANTALBESTELLINGEN.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding AantalBestellingen}" 
                    DisplayIndex="8" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_KAARTCOORDINATEN.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding Coordinaten}" 
                    DisplayIndex="9" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_GEBIED.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding bezorggebied}" 
                    DisplayIndex="10" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_KM.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding afstand, StringFormat='{}{0:N2}'}" 
                    DisplayIndex="11" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_REISTIJD.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding reistijd}" 
                    DisplayIndex="12" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_TIJD.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding tijd, StringFormat={}{0:HH:mm}}" 
                    DisplayIndex="13" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_OUD.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding oud}" 
                    DisplayIndex="14" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_BEZORGTIJD.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding gereed_om, StringFormat={}{0:HH:mm}}" 
                    DisplayIndex="15" />
                    <DataGridTextColumn     
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_BEZORGER.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding bezorger}" 
                    DisplayIndex="16" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_VERTROKKEN.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding bezorger_vertrokken_om, StringFormat={}{0:HH:mm}}" 
                    DisplayIndex="17" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_OVER.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding bezorgerterugover}" 
                    DisplayIndex="18" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_TERUG.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding bezorgerterug, StringFormat={}{0:HH:mm}}" 
                    DisplayIndex="19" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_KEUKEN.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding keuken}" 
                    DisplayIndex="20" />
                    <DataGridTextColumn 
                    Header="{Binding Vertaling.DELIVERY_BEZORGORDER_LOPENDEORDERSTAB_DG_TELAATBERICHTUITOM.Vertaling, Source={x:Static Application.Current}, NotifyOnSourceUpdated=True}" 
                    Binding="{Binding TeLaatBerichtTijd, StringFormat={}{0:HH:mm}}" 
                    DisplayIndex="21" />
                </DataGrid.Columns>
            </DataGrid>

Answer 1

您可以将 DataGrid 的 DisplayIndex 属性绑定到 ViewModel 中的属性：

...
<DataGridTextColumn 
                    Header="#" 
                    Binding="{Binding bonnummer}"  
                    DisplayIndex="{Binding BonnummerIndex, Mode=TwoWay, FallbackValue=2}" ... />
...

BonnummerIndex 是存储列显示位置的 ViewModel 属性。您还可以绑定到数组元素，即。DisplayIndex="{Binding ColumnsOrder[2], Mode=TwoWay, FallbackValue=2}"。FallbackValue 设置为默认列位置。您需要它以避免 DisplayIndex 的默认值 (-1)，从而引发超出范围的异常。需要 TwoWay 绑定来将用户更改反映回 ViewModel 中。

稍后您可以序列化/反序列化类以保留用户设置。

您只需要小心，因为更改一列的 DisplayIndex 可能会更改其他列的 DisplayIndex。