Silverlight bind collection to Combobox in DataForm using MVVM

michajas picture michajas · Nov 30, 2009 · Viewed 10.7k times · Source

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?

Answer

DaveB picture DaveB · Dec 1, 2009

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}"/>