Question

Is there a convention when using MVVM to bind the items of a ListBox to a ViewModel?

In the below XAML, I’m creating a ListBox of buttons. The ListBox is bound to an observable collection from my ViewModel. I then want to bind the button’s Command property to an ICommand. The problem is that when I add that binding, I’m binding against the data object, not the ViewModel.

Do I just change the MyListOfDataObjects property to be a list of ViewModels? If so, where do I instantiate those new objects? I’d prefer to use dependency injection since they will have several dependencies. Do I change the GetData lambda?

In general: what’s considered good practice here? I wasn’t able to find any examples for this situation, although I assume it is rather common.

I’m using the MVVMLight framework, but I’m willing to look at any other frameworks.

<Window x:Class="KeyMaster.MainWindow"
        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Window.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="MyDataTemplate">
                <Button Command="{Binding ButtonPressedCommand}"
                        CommandParameter="{Binding .}"
                        Content="{Binding Name}" />
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <ListBox ItemsSource="{Binding MyListOfDataObjects}"
                 ItemTemplate="{StaticResource MyDataTemplate}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"
                                IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

I’m using the standard MVVMLight ViewModel:

using GalaSoft.MvvmLight;
using KeyMaster.Model;
using System.Collections.ObjectModel;

namespace KeyMaster.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        private readonly IDataService _dataService;
        private ObservableCollection<MyData> _myListOfDataObjects;

        public MainViewModel(IDataService dataService)
        {
            _dataService = dataService;
            _dataService.GetData(
                (item, error) =>
                {
                    if (error != null)
                    {
                        return;
                    }

                    MyListOfDataObjects = new ObservableCollection<MyData>(item);
                });
        }

        public ObservableCollection<MyData> MyListOfDataObjects
        {
            get { return _myListOfDataObjects; }
            set
            {
                if (_myListOfDataObjects == value) return;

                _myListOfDataObjects = value;
                RaisePropertyChanged(() => MyListOfDataObjects);
            }
        }
    }
}

Thanks.

Answer 1

In MVVM, there is a clear seperation between the raw data (also known as the Model) and the ViewModel. The ViewModel is the one who is in charge of parsing the data and even modifying it to whatever form it wishes, before passing it to the View.

A simple example is having the Model as XML and having the ViewModel parse it, take only a specific property (for example a “Name“) from each element and add them to a list. Only this list will be shown in the View.

That said, I guess you can see where I’m going – the Command should be in the ViewModel not in the Model. As you stated by yourself, you should keep as much of the UI logic out of both the VM and the Model.

If you have a specific command that does something specific on a certain type of data, you can want it in a more “general” type of ViewModel, you can use the CanExectue to only allow this command in specific cases. But still, the command should sit in the ViewModel.

In your specific case, I don’t see a problem having the command in the ViewModel, and when raised it will do whatever you need on your data. You don’t need a list of ViewModels, you need only one.