Mvvm - Cancel changes in Wpf Listbox, vb.net

Question

I have a wpv/mvvm-light/vb.net application with a master/detail view. In this view there is a listbox of clients and a detail view of the client's details where they user can view and edit the customers.

I wanted to add a function where users would be prompted to save changes when a new client is selected in the listbox. If the user chooses yes from the messagebox then save changes and if no then discard changes and return previous selected item back to its original value. I have this all working fine.

My problem is that when the user selects a new client and the messagebox asks them to save changes, the listbox goes out of sync. Meaning that the listbox shows the new client selected but the detail view still shows the previous client. The odd thing is that it works properly on rare occasions.

The following is my view:

<UserControl x:Class="FTC.View.ClientListView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FTC_Application"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="900">


                <ListBox    
                    Grid.Column="1" 
                    Width="350"                    
                    Style="{DynamicResource FTC_ListBox}"  
                    ItemTemplate="{DynamicResource FTC_ClientListTemplate}" 
                    ItemContainerStyle="{DynamicResource FTC_ListItem}"
                                ItemsSource="{Binding ClientViewSource.View}" 
                                SelectedItem="{Binding Path=Selection, Mode=TwoWay}"                
                    />


                    <ContentControl DataContext="{Binding Path=Selection, Mode=TwoWay}" >
                        <!--all the display stuff goes here for the detail view-->
                    </ContentControl>

</UserControl>

the following is the property in the viewmodel that the selecteditem of the listbox is bound to. It is also the binding for the content control that displays the details.

Public Property Selection As client
            Get
                Return Me._Selection
            End Get
            Set(ByVal value As client)
                ''capture current value of selection
                _PreviousClient = _Selection

                ''If they are the same, 
                If value Is _PreviousClient Then
                    Return
                End If

                ' Note that we actually change the value for now.This is necessary because WPF seems to query the
                '  value after the change. The list box likes to know that the value did change.
                If Me._Selection.HasChanges = True And _Selection.HasErrors = False Then
                    'If HasChangesPrompt(value) = True Then
                    '    ''user rejects saving changes, exit property
                    '    Return
                    'End If
                    If FTCMessageBox.Show("Do you want to save your changes", "Unsaved Changes", MessageBoxButton.YesNo, MessageBoxImage.Warning) = MessageBoxResult.No Then
                        ''SELECTION IS CANCELLED
                        ' change the value back, but do so after the  UI has finished it's current context operation.
                        Application.Current.Dispatcher.BeginInvoke(New Action(Sub()
                                                                                  '' revert the current selected item to its original values and reset its HasCHanges tracking
                                                                                  objHelper.CopyProperties(_OriginalClient, _Selection)
                                                                                  _Selection.HasChanges = False
                                                                                  RaisePropertyChanged(ClientSelectedPropertyName)
                                                                                  ''continue with listbox selection changing to the new value for selection
                                                                                  _ClientCollectionViewSource.View.MoveCurrentTo(value)
                                                                              End Sub), DispatcherPriority.Normal, Nothing)
                        Return
                    Else
                        ''save changes to database
                        SaveExecute()
                    End If
                End If

                _Selection = value

                _Selection.HasChanges = False
                RaisePropertyChanged(ClientSelectedPropertyName)

                ''clone the unchanged version of the current selected client on na original variable
                objHelper.CopyProperties(_Selection, _OriginalClient)

            End Set
        End Property

SO the idea is that if the user does not want to save changes, an original value of the client is copied (using reflection) over the current value, then the ui is updated and the selection continues on to the new value chosen by the user. However, like I said above, the listbox does not reflect this change even though I tired to hard code it with the following line:

''continue with listbox selection changing to the new value for selection  
 _ClientCollectionViewSource.View.MoveCurrentTo(value)

I got this solution by working customizing the solution posted HERE

can anyone help me figure out why my listbox goes out of sync when this happens.

Thanks in advance

Answer 1

First: I can't find the real Problem in your solution, but you have definitly - and I repeat - definitly too much code and logic in your Property Setter. Try move it to other methods and validate your implementation of those many ´if else´ blocks.

Second: The Setter gets only fired when you select a new Item in your Listbox, but you Raise a Property changes for ´ClientSelectedPropertyName´ and not for ´Selection´ as its supposed to be. Move the property changed alsways to the end of your setter.

Try this. I hope it helps :)

Answer 2

So I have a working example that I think follows the MVVM-Light standard. There is a lot going on so I will try to keep it short and precise.

I ended up using EventToCommand bound to the SelectionChanged event with a ListView(instead of listbox). The EventToCommand required new namespace references as is shown below. I then bound the EventToCommand to a RelayCommand in the view model which in turn calls a private sub that handles the client validation and saves/cancels/ and updates the listview seleceditem as required.

For further information, I have a navigation service that is used to navigat between views in my wpf application. I used the MVVM-Light messanger to send a navigationstarting message that is "recieved" by this view model. Then the same client validation functions are performed and naviagtion is canceled/allowed based on user response to the dialog message thrown. I will no include all of hte navigation code unless requested. The following is the code needed to solve my original question.

<UserControl x:Class="FTC.View.ClientListView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:FTC_Application"
            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
            xmlns:cmd="http://www.galasoft.ch/mvvmlight"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="900">

               <ListView    
                    Grid.Column="1" 
                    Width="350"                    
                    Style="{DynamicResource FTC_ListView}"  
                    ItemTemplate="{DynamicResource FTC_ClientListTemplate}" 
                    ItemContainerStyle="{DynamicResource FTC_ListViewItem}"
                    ItemsSource="{Binding ClientViewSource.View}" 
                    SelectedItem="{Binding Path=Selection, Mode=TwoWay}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged">
                            <cmd:EventToCommand Command="{Binding SelectedItemChangedCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </ListView> 

                   <ContentControl DataContext="{Binding Path=Selection, Mode=TwoWay}" >
                        <!-- Display stuff and bound controls go here -->
                    </ContentControl>


    </Grid>
</UserControl>

Then the following is the relevant code (I removed as much code as possible to keep it clear) in my view model:

Imports System.Data
Imports System.ComponentModel
Imports System.Collections.ObjectModel
Imports System.Windows.Threading

Imports GalaSoft.MvvmLight
Imports GalaSoft.MvvmLight.Command
Imports GalaSoft.MvvmLight.Messaging

Imports FTCModel
Imports FTC_Application.FTC.Model
Imports FTC_Application.FTC.View
Imports FTC_Application.FTC.ViewModel
Imports FTC_Application.FTC.MessageBox
Imports FTC_Application.FTC.Helpers
Imports FTC_Application.FTC.MessengerHelper

Namespace FTC.ViewModel
    Public Class ClientListViewModel
        Inherits ViewModelBase
        Implements IDataErrorInfo

#Region "DECLARATIONS"

        Public Const ClientCollectionPropertyName As String = "ClientCollection"
        Public Const ClientSelectedPropertyName As String = "Selection"
        Public Const ClientDetailCollectionPropertyName As String = "ClientDetailCollection"
        Public Const ClientPropertyName As String = "Client"

        ''gets the data from LINQ to ENT Model
        Private _Clients As New ObservableCollection(Of client)
        ''creats holder for the selected item two way binding
        Private _Selection As New client
        ''the following is used to track changes for unding and canceling selection changed
        Private _PreviousClient As New client
        Private _PreviousOriginalClient As New client
        Private _OriginalClient As New client

        ''Recieves observable collection and provicdes sorting and filtering function
        Private _ClientCollectionViewSource As New CollectionViewSource

        ''RELAY COMMANDS declarations
        Private _SaveCommand As RelayCommand
        Private _SelectedItemChangedCommand As RelayCommand

        ''gets the VML for getting the data service
        Private vml As ViewModelLocator = TryCast(Application.Current.Resources("Locator"), ViewModelLocator)
        ''this is a holder for the client data service
        Private _ClientAccess As IClientDataService = vml.Client_Service

        '' has functions using reflection for copying objects
        Dim objHelper As New ObjectHelper

        ''tracks if client validation is coming from navigation or listview selecteditemchanged
        Private bNavigatingFlag As Boolean = False

#End Region

#Region "PROPERTIES"

        Public ReadOnly Property ClientViewSource As CollectionViewSource
            Get
                Return Me._ClientCollectionViewSource
            End Get
        End Property
        Private Property Clients As ObservableCollection(Of client)
            Get
                Return Me._Clients
            End Get
            Set(ByVal value As ObservableCollection(Of client))
                Me._Clients = value

                _Clients = value
                RaisePropertyChanged(ClientCollectionPropertyName)

            End Set
        End Property
        Public Property Selection As client
            Get
                Return Me._Selection
            End Get
            Set(ByVal value As client)
                ''capture current value of selection
                _PreviousClient = _Selection
                objHelper.CopyProperties(_OriginalClient, _PreviousOriginalClient)

                ''If they are the same, 
                If value Is _PreviousClient Then
                    Return
                End If

                _Selection = value
                _Selection.HasChanges = False
                RaisePropertyChanged(ClientSelectedPropertyName)
                ''clone the unchanged version of the current selected client on na original variable
                objHelper.CopyProperties(_Selection, _OriginalClient)

            End Set
        End Property

#End Region

#Region "COMMANDS"

        Public ReadOnly Property SelectedItemChangedCommand() As RelayCommand
            Get
                If _SelectedItemChangedCommand Is Nothing Then
                    _SelectedItemChangedCommand = New RelayCommand(AddressOf SelectionChangedValidate)
                End If
                Return _SelectedItemChangedCommand
            End Get
        End Property

#End Region

#Region "METHODS"

        Private Sub SelectionChangedValidate()

            ''Uses falg to tell if validation request triggered by navigation event or listview selecteditemchanged event
            ''use previous client for listview event and current client for navigating event
            Dim _ClientToValidate As client
            If bNavigatingFlag = True Then
                _ClientToValidate = _Selection
            Else
                _ClientToValidate = _PreviousClient
            End If

            If _ClientToValidate.HasChanges = True And _ClientToValidate.HasErrors = False Then
                Dim message = New DialogMessage(_ClientToValidate.chrCompany.ToString + " has been changed." + vbCrLf + "Do you want to save your changes?", AddressOf SavePreviousResponse) With { _
                     .Button = MessageBoxButton.YesNo, _
                     .Caption = "Unsaved Changes" _
                }
                Messenger.[Default].Send(message)
                Exit Sub
            End If

            If _ClientToValidate.HasErrors = True Then
                Dim message = New DialogMessage(_ClientToValidate.chrCompany.ToString + " has errors." + vbCrLf + "You must correct these errors before you can continue.", AddressOf HasErrorsResponse) With { _
                     .Button = MessageBoxButton.OK, _
                     .Caption = "Validation Error" _
                }
                Messenger.[Default].Send(message)
                Exit Sub
            End If

            ''reset the navigation flag
            bNavigatingFlag = False

        End Sub
        Private Sub SavePreviousResponse(result As MessageBoxResult)
            If result = MessageBoxResult.No Then
                objHelper.CopyProperties(_PreviousOriginalClient, _PreviousClient)
                _PreviousClient.HasChanges = False
            Else
                ''user wants to save changes, save changes to database
                SaveExecute()
            End If
        End Sub
        Private Sub HasErrorsResponse(result As MessageBoxResult)
            Selection = _PreviousClient
            ''_ClientCollectionViewSource.View.MoveCurrentTo(_PreviousClient)
        End Sub
        Private Function HasChangesPrompt(value As client) As Boolean
            If FTCMessageBox.Show("Do you want to save your changes", "Unsaved Changes", MessageBoxButton.YesNo, MessageBoxImage.Warning) = MessageBoxResult.No Then
                '' change the selected client back to its original value, but do so after the  UI has finished its current context operation.
                Application.Current.Dispatcher.BeginInvoke(New Action(Sub()
                                                                          '' revert the current selected item to its original values and reset its HasCHanges tracking
                                                                          objHelper.CopyProperties(_OriginalClient, _Selection)
                                                                          _Selection.HasChanges = False
                                                                          RaisePropertyChanged(ClientSelectedPropertyName)
                                                                          ''continue with listbox selection changing to the new value for selection
                                                                          _ClientCollectionViewSource.View.MoveCurrentTo(value)
                                                                      End Sub), DispatcherPriority.Normal, Nothing)
                Return True
            Else
                ''user wants to save changes, save changes to database
                Return False
                SaveExecute()
            End If
        End Function

#End Region

        Public Sub New()

            Clients = _ClientAccess.GetClient_All

            ''Sets the observable collection as the source of the CollectionViewSource
            _ClientCollectionViewSource.Source = Clients

            If Selection.idClient = 0 Then
                Selection = Clients.Item(0)
            End If

            ''register for messages
            Messenger.[Default].Register(Of String)(Me, AddressOf HandleMessage)

        End Sub

    End Class

End Namespace

INXS, you will notice that the selection property setter has way less code/logic. Also, I think each part of the view model is testable and there is no direct coupling between my view and viewmodel. But this is my first WPF/MVVM application so I sitll don't fully grasp all the concepts.

I hope that this can help someone as it took my quite a while to figure it out.