Help binding combobox within dataform to view model property outside dataform's context

Question

I have two properties in my view model:

    //Relationship has property ReasonForEndingId
    private Relationship editRelationship;
    public Relationship EditRelationship
    {
        get
        {
            return editRelationship;
        }

        set
        {
            if (editRelationship != value)
            {
                editRelationship = value;
                RaisePropertyChanged(EditRelationshipChangedEventArgs);
            }
        }
    }

    //ReasonForLeaving has properties Reason & Id
    private IList<ReasonForLeaving> reasonsComboList { get; set; }
    public IList<ReasonForLeaving> ReasonsComboList
    {
        get
        {
            return reasonsComboList;
        }

        private set
        {
            if (reasonsComboList != value)
            {
                reasonsComboList = value;
                RaisePropertyChanged(ReasonsComboListChangedEventArgs);
            }
        }
    }

In my xaml I have the following: (specifically note the binding on the dataform and combobox)

<toolkit:DataForm x:Name="EditForm" CurrentItem="{Binding EditRelationship, Mode=TwoWay}">

<toolkit:DataForm.EditTemplate>
    <DataTemplate>
    <StackPanel>
        <toolkit:DataField>
                         <ComboBox x:Name="EndReasonCombo" ItemsSource="{Binding ReasonsComboList}" DisplayMemberPath="Reason" SelectedValuePath="Id" SelectedValue="{Binding ReasonForEndingId, Mode=TwoWay}"/>
        </toolkit:DataField>

So, I'm trying to bind to a list that exists in my viewmodel (the datacontext for the page). However, the DataForm's datacontext is EditRelationship. ReasonsComboList does not exist within EditRelationship.

How can I bind the combobox so that it will display the list of items available in ReasonsComboList?

Thanks for your help!

Answer 1

I haven't tested this with your exact scenario, but you should be able to reference the DataContext of some parent element when binding the ItemsSource of the ComboBox. Basically using Silverlight's element-to-element binding to actually bind to some property on the parent container's DataContext instead of the current element's DataContext.

For example, if your main ViewModel was the DataContext of the LayoutRoot element you should be able to do something like this:

<ComboBox x:Name="EndReasonCombo" ItemsSource="{Binding DataContext.ReasonsComboList, ElementName=LayoutRoot}" DisplayMemberPath="Reason" SelectedValuePath="Id" SelectedValue="{Binding ReasonForEndingId, Mode=TwoWay}"/>

Answer 2

Here's what I did (tested and works):

Within a DataForm this won't work (because its a DataTemplate) :

<ComboBox MinWidth="150" DisplayMemberPath="Name" Name="cbCompanies"
          SelectedItem="{Binding TODOCompany,Mode=TwoWay}" 
          ItemsSource="{Binding ElementName=control, Path=ParentModel.Companies}" />

But you can do this instead:

<ComboBox MinWidth="150" DisplayMemberPath="Name" Name="cbCompanies"
          SelectedItem="{Binding TODOCompany,Mode=TwoWay}" 
          Loaded="cbCompanies_Loaded"/>

Code behind:

    private void cbCompanies_Loaded(object sender, RoutedEventArgs e)
    {
        // set combobox items source from wherever you want
        (sender as ComboBox).ItemsSource = ParentModel.Companies;
    }

Answer 3

Creating a Silverlight DataContext Proxy to Simplify Data Binding in Nested Controls

Disclaimer: This may not actually work for the DataForm, but is suitable for the same problem when using a DataGrid. but I'm putting it here as an answer because it was an interesting read and helped me understand some things when I experienced the same problem.