.net – SelectionChanged event binding in Silverlight+MVVM-Light

mvvmmvvm-lightnetsilverlightwpf

The handler of the "SelectionChanged" event of the ComboBox control has the following signature:

void SelectionChangedMethod(object sender, SelectionChangedEventArgs e)

How to bind to that property under Silverlight 4 and MVVM-Light to the corresponding method of the ViewModel object?

As far as I know, I need to do something like this:

public void Changed(Object obj, SelectionChangedEventArgs e)
{
    // .... implement logic here
}

RelayCommand<Object, SelectionChangedEventArgs> _command;
public ICommand ObjectSelectionChanged
{
    get
    {
        if (_command == null)
        {
            _command = new RelayCommand<Object, SelectionChangedEventArgs>(Changed);
        }
        return _command;
    }
}

The problem is that RelayCommand class in the MVVM-Light framework doesn't support 2 generic parameters…

Is there any solution or workaround for this case? How bind control event to the method with 2 parameters?

And another problem: ComboBox doesn't have "Command" property to bind this command..? How can I get event to the ViewModel?

Thanks.

P.S. I've tried to use SelectedItem property of the combobox, but it seems like ComboBox implementation is not correct and it doesn't work…

Best Answer

There is a much easier approach then trying to connect the SelectedChangedEvent.

Try...

<ComboBox ItemsSource={Binding Path=Names} SelectedItem={Binding Path=SelectedName, Mode=TwoWay}>

public class ViewModel : ViewModelBase
{
    private string _selectedName;
    public string SelectedName
    {
        get { return _selectedName; }
        set
        {
            if (_selectedName == value) return;
            _selectedName = value;
            RaisePropertyChanged("SelectedName");
        }
    }
}

It is possible to do it the way you were going

<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MyCommand}" PassEventArgsToCommand="True"/>

The Command should be a RelayCommand of type 'SelectionChangedEventArgs'

Related Solutions

C# – Binding a WPF ComboBox to a custom list

You set the DisplayMemberPath and the SelectedValuePath to "Name", so I assume that you have a class PhoneBookEntry with a public property Name.

Have you set the DataContext to your ConnectionViewModel object?

I copied you code and made some minor modifications, and it seems to work fine. I can set the viewmodels PhoneBookEnty property and the selected item in the combobox changes, and I can change the selected item in the combobox and the view models PhoneBookEntry property is set correctly.

Here is my XAML content:

<Window x:Class="WpfApplication6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
<Grid>
    <StackPanel>
        <Button Click="Button_Click">asdf</Button>
        <ComboBox ItemsSource="{Binding Path=PhonebookEntries}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Name"
                  SelectedValue="{Binding Path=PhonebookEntry}" />
    </StackPanel>
</Grid>
</Window>

And here is my code-behind:

namespace WpfApplication6
{

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            ConnectionViewModel vm = new ConnectionViewModel();
            DataContext = vm;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((ConnectionViewModel)DataContext).PhonebookEntry = "test";
        }
    }

    public class PhoneBookEntry
    {
        public string Name { get; set; }

        public PhoneBookEntry(string name)
        {
            Name = name;
        }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ConnectionViewModel : INotifyPropertyChanged
    {
        public ConnectionViewModel()
        {
            IList<PhoneBookEntry> list = new List<PhoneBookEntry>();
            list.Add(new PhoneBookEntry("test"));
            list.Add(new PhoneBookEntry("test2"));
            _phonebookEntries = new CollectionView(list);
        }

        private readonly CollectionView _phonebookEntries;
        private string _phonebookEntry;

        public CollectionView PhonebookEntries
        {
            get { return _phonebookEntries; }
        }

        public string PhonebookEntry
        {
            get { return _phonebookEntry; }
            set
            {
                if (_phonebookEntry == value) return;
                _phonebookEntry = value;
                OnPropertyChanged("PhonebookEntry");
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Edit: Geoffs second example does not seem to work, which seems a bit odd to me. If I change the PhonebookEntries property on the ConnectionViewModel to be of type ReadOnlyCollection, the TwoWay binding of the SelectedValue property on the combobox works fine.

Maybe there is an issue with the CollectionView? I noticed a warning in the output console:

System.Windows.Data Warning: 50 : Using CollectionView directly is not fully supported. The basic features work, although with some inefficiencies, but advanced features may encounter known bugs. Consider using a derived class to avoid these problems.

Edit2 (.NET 4.5): The content of the DropDownList can be based on ToString() and not of DisplayMemberPath, while DisplayMemberPath specifies the member for the selected and displayed item only.

Silverlight dataform MVVM command binding on update

I figured it out shortly after posting the question. Go figure.

When using the MVVM Light Toolkit you can bind to events using the EventToCommand feature.

My Xaml looks like this:

<UserControl x:Class="CountyBusinessDirectory.UI.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         xmlns:dataFormToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"  
         xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
         xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight"
         xmlns:cmdextras="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"
         DataContext="{Binding BusinessesViewModel, Source={StaticResource Locator}}">
<Grid x:Name="LayoutRoot" ShowGridLines="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <data:DataGrid x:Name="dgAllBusinesses" CanUserSortColumns="True" 
                   IsReadOnly="True" AutoGenerateColumns="True" 
                   ItemsSource="{Binding Businesses}" 
                   Grid.Column="0">
    </data:DataGrid>
    <ScrollViewer x:Name="svScroll" Grid.Column="1" >
        <dataFormToolkit:DataForm x:Name="dfDetails"
                                  ItemsSource="{Binding Businesses}"
                                  AutoGenerateFields="True" 
                                  CommitButtonContent="Save" 
                                  CommandButtonsVisibility="Edit, Navigation, Commit, Cancel" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="EditEnded">
                    <cmdextras:EventToCommand Command="{Binding SaveBusiness}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </dataFormToolkit:DataForm>
    </ScrollViewer>
</Grid>

And my ViewModel looks like this (using direct silverlight enabled WCF service in ViewModel for quick example, would normally pull this into an interface to decouple):

//using statements ommitted for brevity

namespace MyProject.ViewModels
{
    public class BusinessesViewModel : ViewModelBase
    {
        private PagedCollectionView _businesses;
        DALServiceClient _proxy;

        public RelayCommand SaveBusiness
        { get; private set; }

        public PagedCollectionView Businesses
        {
            get
            {
                return _businesses;
            }
            set
            {
                if (_businesses != value)
                {
                    _businesses = value;

                    base.RaisePropertyChanged("Businesses");
                }
            }
        }

        public BusinessesViewModel()
        {
            _proxy = new DALServiceClient(); //Data Access Layer WCF Service

            _proxy.GetBusinessesCompleted += new EventHandler<GetBusinessesCompletedEventArgs>(_proxy_GetBusinessesCompleted);
            _proxy.GetBusinessesAsync();

            SaveBusiness = new RelayCommand(() => SaveBusinessToDB());
        }

        private void SaveBusinessToDB()
        {
            Business bus = Businesses.CurrentItem as Business;
            _proxy.UpdateBusinessesAsync(bus);
        }

        void _proxy_GetBusinessesCompleted(object sender, GetBusinessesCompletedEventArgs e)
        {
            if (e.Result != null)
            {
                Businesses = new PagedCollectionView(e.Result);
            }
        }
    }
}

Best Answer

Related Solutions

C# – Binding a WPF ComboBox to a custom list

Silverlight dataform MVVM command binding on update

Related Topic