Reorder WPF datagrid columns

Question

I would like to give to the user a settings where he can reorder the columns of a datagrid. I know i can use the DisplayIndex to achieve this but my problem is how can i save the order of each column, how can i know what column was moved to the first position and so on?

I thought in using the Column header for that but i don't know if that is the best solution.

below is the datagrid that im using:

<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

You can bind DataGrid's DisplayIndex property to property in your ViewModel:

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

BonnummerIndex is your ViewModel property that stores column display position. You can also bind to array element ie. DisplayIndex="{Binding ColumnsOrder[2], Mode=TwoWay, FallbackValue=2}". FallbackValue is set to default column position. You need that to avoid DisplayIndex's default value (-1) which in turn throws out of range exception. TwoWay bindig is needed to reflect user changes back in ViewModel.

Later on you can serialize / de-serialize class to persists user settings.

You just need to be careful cause changing DisplayIndex of one column may change DisplayIndex(es) of other column(s).