Silverlight MVVM binding updates fire in undesired

Question

Scenario: In a Silverlight 4 MVVM project, we have a ListBox control containing items, the selected item is two-way-bound to the appropriate property in the ViewModel. Another control (for example reasons, I've stripped it down to a single TextBox) is data bound to the selected item's content. The value should update on leave/focus lost.

Problem: When the value in the TextBox is changed and we leave that TextBox by pressing the Tab key, everything works as desired - the value is updated. However, if the user clicks on a different item in the ListBox, then the SelectedItem setter is fired before the content of TextBox setter is fired, leaving no chance to handle the user input.

You can see in debugger, when adding breakpoints to the property setters, that the new ListView selection is applied first, before the TextBox update is processed.

Desired behavior: We need to know that the currently selected item was modified before the user has selected another item. It's not desired to have a custom update trigger which would notify on each key press (we know that's possible).

Can you help?

Code (a very simple example):

ViewModel

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class ItemViewModel : ViewModelBase
{
    private string _content;

    public ItemViewModel(string initContent)
    {
        _content = initContent;
    }

    public string Content
    {
        get
        {
            return _content;
        }
        set
        {
            if (_content != value)
            {
                _content = value;
                OnPropertyChanged("Content");
            }
        }
    }
}

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<ItemViewModel> _items =
        new ObservableCollection<ItemViewModel>();
    private ItemViewModel _selectedViewModel;

    public ObservableCollection<ItemViewModel> Items
    {
        get
        {
            return _items;
        }
    }

    public ItemViewModel SelectedItem
    {
        get
        {
            return _selectedViewModel;
        }
        set
        {
            if (_selectedViewModel != value)
            {
                _selectedViewModel = value;
                OnPropertyChanged("SelectedItem");
            }
        }
    }
}

XAML

<Grid x:Name="LayoutRoot" Background="White">
    <ListBox Height="100"
             HorizontalAlignment="Left"
             Margin="12,12,0,0"
             VerticalAlignment="Top"
             ItemsSource="{Binding Items}"
             SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
             DisplayMemberPath="Content"
             Width="220" />
    <TextBox Height="23"
             HorizontalAlignment="Left"
             Margin="12,118,0,0"
             Text="{Binding SelectedItem.Content, Mode=TwoWay}"
             VerticalAlignment="Top"
             Width="220" />
</Grid>

XAML Code Behind

    public MvvmTestView()
    {
        InitializeComponent();

        Loaded += new RoutedEventHandler(MvvmTestView_Loaded);
    }

    void MvvmTestView_Loaded(object sender, RoutedEventArgs e)
    {
        MainViewModel viewModel = new MainViewModel();
        viewModel.Items.Add(new ItemViewModel("Hello StackOverflow"));
        viewModel.Items.Add(new ItemViewModel("Thanks to Community"));

        DataContext = viewModel;
    }

UPDATE 1 I present a self designed solution for you to check out, which will be probably be the accepted one, I still want to encourage you to make comments and give your hints. Thanks.

Answer 1

Maybe you could handle TextBox LostFocus then (instead of listening to every key press)?

Other idea would be to keep a proxy property on the ViewModel instead of directly binding to SelectedItem.Content and writing some code to make sure the item is updated.

Answer 2

Solution №2 (works as magic :) )

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<ItemViewModel> _items = 
            new ObservableCollection<ItemViewModel>(); 
    private ItemViewModel _selectedViewModel; 
    public ObservableCollection<ItemViewModel> Items { get { return _items; } } 
    public ItemViewModel SelectedItem 
    { 
        get { return _selectedViewModel; }
        set
        {
            if (_selectedViewModel != value)
            {
                if (SelectedItem != null)
                {
                    SelectedItem.Content = SelectedItem.Content;
                }

                _selectedViewModel = value;

                // A little delay make no harm :)
                var t = new DispatcherTimer();
                t.Interval = TimeSpan.FromSeconds(0.1);
                t.Tick += new EventHandler(t_Tick);
                t.Start();
            }
        } 
    }

    void t_Tick(object sender, EventArgs e)
    {
        OnPropertyChanged("SelectedItem");
        (sender as DispatcherTimer).Stop();
    }
}

Answer 3

This is one solution we currently came up with. It has the advantage that it separates different tasks to the appropriate layer. For example, the View enforces an update of the binding, while the ViewModel tells the View to do so. Another advantage is that its handled synchronously, which would for example allow to check the content right before switching away, and the call-stack remains unchanged without raising "External Code" (Going over Dispatcher or even DispatcherTimer would do so) which is better for maintenance and flow control. A disadvantage is the new Event which has to be bound and handled (and finally unbound. I present an anonymous handler only for example reasons).

How to get there?

In ViewModelBase, implement a new ForceBindingUpdate event:

public abstract class ViewModelBase : INotifyPropertyChanged
{
    // ----- leave everything from original code ------

    public event EventHandler ForceBindingUpdate;
    protected void OnForceBindingUpdate()
    {
        var handler = ForceBindingUpdate;
        if (handler != null)
            handler(this, EventArgs.Empty);
    }
}

In MainViewModel, update the setter of the SelectedItem property:

set // of SelectedItem Property
{
    if (_selectedViewModel != value)
    {
        // Ensure Data Update - the new part
        OnForceBindingUpdate();

        // Old stuff
        _selectedViewModel = value;
        OnPropertyChanged("SelectedItem");
    }
}

Update the MvvmTestView Code Behind to implement the new event:

void MvvmTestView_Loaded(object sender, RoutedEventArgs e)
{
    // remains unchanged
    Mvvm.MainViewModel viewModel = new Mvvm.MainViewModel();
    viewModel.Items.Add(new Mvvm.ItemViewModel("Hello StackOverflow"));
    viewModel.Items.Add(new Mvvm.ItemViewModel("Thanks to Community"));

    // Ensure Data Update by rebinding the content property - the new part
    viewModel.ForceBindingUpdate += (s, a) =>
    {
        var expr = ContentTextBox.GetBindingExpression(TextBox.TextProperty);
        expr.UpdateSource();
    };

    // remains unchanged
    DataContext = viewModel;
}

Last but not least, the minimal XAML Update: Give the TextBox a name by adding x:Name="ContentTextBox" Attribute to the TextBoxs XAML.

Done.

Actually, I don't know if this is the cleanest solution, but it gets close to what we had in mind.

Answer 4

Solution #3

public abstract class ViewModelBase : INotifyPropertyChanged 
{
    private List<string> _propNameList = new List<string>();

    public event PropertyChangedEventHandler PropertyChanged; 
    protected void OnPropertyChanged(string propertyName) 
    { 
        var handler = PropertyChanged;
        if (handler != null)
            _propNameList.Add(propertyName);

        var t = new DispatcherTimer();  
        t.Interval = TimeSpan.FromSeconds(0);
        t.Tick += new EventHandler(t_Tick);             
        t.Start();
    }

    void t_Tick(object sender, EventArgs e)
    {
        if (_propNameList.Count > 0)
        {
            var handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(_propNameList[0]));

            _propNameList.Remove(_propNameList[0]);
        }
    } 
}

PS: it's the same timer.. but this solution is more generic..

Answer 5

You could add a behavior to your textbox to updated the binding every time the text is changed in the textbox. Maybe this solved your problems.

Here´s the code for the Behavior class:

    public class UpdateTextBindingOnPropertyChanged : Behavior<TextBox> {
    // Fields
    private BindingExpression expression;

    // Methods
    protected override void OnAttached() {
        base.OnAttached();
        this.expression = base.AssociatedObject.GetBindingExpression(TextBox.TextProperty);
        base.AssociatedObject.TextChanged+= OnTextChanged;
    }

    protected override void OnDetaching() {
        base.OnDetaching();
        base.AssociatedObject.TextChanged-= OnTextChanged;
        this.expression = null;
    }

    private void OnTextChanged(object sender, EventArgs args) {
        this.expression.UpdateSource();
    }
}

Heres the XAML:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:local="Namespace of the class where UpdateTextBindingOnPropertyChanged is defined"

<TextBox Text="{Binding SelectedItem.Content, Mode=TwoWay}">
  <i:Interaction.Behaviors>
    <local:UpdateTextBindingOnPropertyChanged />
  </i:Interaction.Behaviors>
</TextBox >

Answer 6

I know that in MVVM we do not want to put code in code behind. But in this instance it hurts nothing as it is entirely maintained in the UI and SOP is maintained.

By putting a ghost element to take focus we can swap the focus back in forth forcing the text box to commit its contents. So in the code behind we take care of the focus wiggle.

But yet we still are using a relay command Update Command to execute the save. So the order is good as the Click event fires wiggling the view. And then the relay command UpdateCommand will fire and the textbox is committed and ready for update.

<MenuItem Header="_Save" 
   Command="{Binding UpdateCommand}" Click="MenuItem_Click">
</MenuItem>

private void MenuItem_Click(object sender, RoutedEventArgs e)
{
    UIElement elem = Keyboard.FocusedElement as UIElement;
    Keyboard.Focus(ghost);
    Keyboard.Focus(elem);
}