how to bind the click event of a button and the selecteditemchanged of a listbox to a viewmodel in mvvm in Silverlight

Question

Hi,

i'm just starting with the mvvm model in Silverlight. In step 1 i got a listbox bound to my viewmodel, but now i want to propagate a click in a button and a selecteditemchanged of the listbox back to the viewmodel. I guess i have to bind the click event of the button and the selecteditemchanged of the listbox to 2 methods in my viewmodel somehow?

For the selecteditemchanged of the listbox i think there must also be a 'return call' possible when the viewmodel tries to set the selecteditem to another value?

i come from a asp.net (mvc) background, but can't figure out how to do it in silverlight.

Answer 1

I would not bind or tie the VM in any way directly to the events of controls within the View. Instead, have a separate event that is raised by the View in response to the button click.

[disclaimer: this code is all done straight from my head, not copy & pasted from VS - treat it as an example!!]

So in pseudo code, the View will look like this:

private void MyView_Loaded(...) 
{
    MyButton.Click += new EventHandler(MyButton_Click);
}

private void MyButton_Click(...)
{
    //Raise my event:
    OnUserPressedGo();
}

private void OnUserPressedGo()
{
    if (UserPressedTheGoButton != null)
        this.UserPressedTheGoButton(this, EventArgs.Empty);
}

public EventHandler UserPressedTheGoButton;

and the VM would have a line like this:

MyView.UserPressedTheGoButton += new EventHandler(myHandler);

this may seem a little long-winded, why not do it a bit more directly? The main reason for this is you do not want to tie your VM too tightly (if at all) to the contents of the View, otherwise it becomes difficult to change the View. Having one UI agnostic event like this means the button can change at any time without affecting the VM - you could change it from a button to a hyperlink or that kool kat designer you hire may change it to something totally weird and funky, it doesn't matter.

Now, let's talk about the SelectedItemChanged event of the listbox. Chances are you want to intercept an event for this so that you can modify the data bound to another control in the View. If this is a correct assumption, then read on - if i'm wrong then stop reading and reuse the example from above :)

The odds are that you may be able to get away with not needing a handler for that event. If you bind the SelectedItem of the listbox to a property in the VM:

<ListBox ItemSource={Binding SomeList} SelectedItem={Binding MyListSelectedItem} />

and then in the MyListSelectedItem property of the VM:

public object MyListSelectedItem 
{
    get { return _myListSelectedItem; }
    set 
    {
        bool changed = _myListSelectedItem != value;
        if (changed) 
        {
            _myListSelectedItem = value;
            OnPropertyChanged("MyListSelectedItem");
        }
    }
}

private void OnPropertyChanged(string propertyName) 
{
    if (this.NotifyPropertyChanged != null)
        this.NotifyPropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

To get that NotifyPropertyChanged event, just implement the INotifyPropertyChanged interface on your VM (which you should have done already). That is the basic stuff out of the way... what you then follow this up with is a NotifyPropertyChanged event handler on the VM itself:

private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e) 
{
    switch (e.PropertyName)
    {
        case "MyListSelectedItem":
            //at this point i know the value of MyListSelectedItem has changed, so 
            //i can now retrieve its value and use it to modify a secondary 
            //piece of data:
            MySecondaryList = AllAvailableItemsForSecondaryList.Select(p => p.Id == MyListSelectedItem.Id);
            break;
    }
}

All you need now is for MySecondaryList to also notify that its value has changed:

public List<someObject> MySecondaryList 
{
    get { return _mySecondaryList; }
    set 
    {
        bool changed = .......;
        if (changed)
        {
            ... etc ...
            OnNotifyPropertyChanged("MySecondaryList");
        }
    }
}

and anything bound to it will automatically be updated. Once again, it may seem that this is the long way to do things, but it means you have avoided having any handlers for UI events from the View, you have kept the abstraction between the View and the ViewModel.

I hope this has made some sense to you. With my code, i try to have the ViewModel knowing absolutely zero about the View, and the View only knowing the bare minimum about the ViewModel (the View recieves the ViewModel as an interface, so it can only know what the interface has specified).

Answer 2

Regarding binding the button click event I can recommend Laurent Bugnion's MVVM Light Toolkit (http://www.galasoft.ch/mvvm/getstarted/) as a way of dealing with this, I'll provide a little example, but Laurent's documentation is most likely a better way of understanding his framework.

Reference a couple of assemblies in your xaml page

xmlns:command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

add a blend behaviour to the button

<Button Content="Press Me">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <command:EventToCommand Command="{Binding ViewModelEventName}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

and create the event within your viewmodel which will be called when the button is clicked

public RelayCommand ViewModelEventName { get; protected set; }

...

public PageViewModel()
{
    ViewModelEventName = new RelayCommand(
        () => DoWork()
    );
}

This supports passing parameters, checking whether execution is allowed etc also.

Although I haven't used it myself, I think the Prism framework also allows you to do something similar.

Answer 3

Roboblob provides excellent step-by-step solution for Silverlight 4. It strictly follows MVVM paradigm.