Silverlight bind collection to Combobox in DataForm using MVVM

Question

I have this problem, I've got Silverlight app written using MVVM. I need to create DataForm which is binded to property on ViewModel and I want to add ComboBox and fill it with values from other collection in the same ViewModel.

Code:

<dataFormToolkit:DataForm CurrentItem="{Binding NewUser, Mode=TwoWay}" AutoGenerateFields="False" Height="298">
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel>

                        <dataFormToolkit:DataField Label="Email">
                            <TextBox Text="{Binding Email, Mode=TwoWay}"/>
                        </dataFormToolkit:DataField>

                        <dataFormToolkit:DataField Label="Język">
                            <ComboBox ItemsSource="{Binding Path=Languages, Mode=TwoWay}"/>
                        </dataFormToolkit:DataField>

                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>
        </dataFormToolkit:DataForm>

All this is handled by NewAccountVM which has these properties:

private User newUser;
    public User NewUser { 
        get 
        { 
            return newUser; 
        }
        set
        {
            if (value != newUser)
            {
                newUser = value;
                RaisePropertyChanged("NewUser");
            }
        }
    }

    private ObservableCollection<Language> languages;

    public ObservableCollection<Language> Languages
    {
        get { return languages; }
        set 
        {
            if (languages != value)
            {
                languages = value;
                RaisePropertyChanged("Languages");
            }
        }
    }

Now, all this works besides adding ItemsSource to ComboBox. I've found many examples showing how fill CB in CodeBehind, but like I said I want to do this in MVVM-Style :) I understand that, ComboBox inherited DataContext from DataForm, and this ItemsSource="{Binding Path=Languages, Mode=TwoWay}" will not work, but I have no idea how to achieve my goal.

Can somebody help me?

Solution

1) Declare the viewmodel to the view in the resources section.

<UserControl.Resources>
    <local:MyViewModel x:Key="myViewModel" />
</UserControl.Resources>

2) Bind the ComboBox to the collection property on the viewmodel.

<ComboBox ItemsSource="{Binding Path=Languages, 
                                Source={StaticResource myViewModel}, 
                                Mode=TwoWay}"/>

Comments

[michajas]

Thanks, this is it :) I've figured it out eriler, but I had problem with my ViewModel because it had 2 constructors, I had to reorganize creation of my ViewModels to this one with static resources. Thanks again.

[Andrew Garrison]

In this example, where do you set the ViewModel as the DataContext for the UserControl? I am assuming you do so in the Constructor of the UserControl, but I would like know for sure.

[Agies]

@michajas Be careful about setting the VM's inside of the Resources, if your VM ctor throws an exception, it will be swallowed by a XAML parsing error. I would highly suggest looking at setting the VM in the Loaded event and use an IoC container, for greater flexability.

[captonssj]

Combining these two worked for me weblogs.asp.net/dwahlin/archive/2009/08/20/… AND msmvps.com/blogs/deborahk/archive/2009/11/25/…