WPF Listbox with usercontrol as ItemTemplate DataTemplate Binding Issue

Question

I have created a simple MVVM wpf project. The basic Idea is to display data about the annual Income of a customer and the loans he has with various Banks.

The Model consists of 2 Classes , Financial and FinancialLoans. The ViewModel consists of 2 Classes FinancialVM and FinancialLoanVM

Below are the VM Classes:

namespace WpfTester.ViewModel{
public class FinancialVM
{
    public Model.Financial Financial { get; set; }

    public ObservableCollection<ViewModel.FinancialLoanVM> FinancialLoanVMs { get; set; }

    public FinancialVM()
    {
        //Fill the models with some sample data
        Financial = new WpfTester.Model.Financial { Income = 1950.12 };
        Financial.FinancialLoans = new ObservableCollection<Model.FinancialLoan>();
        Financial.FinancialLoans.Add(new WpfTester.Model.FinancialLoan { Bank = new Random().Next().ToString() });
        Financial.FinancialLoans.Add(new WpfTester.Model.FinancialLoan { Bank = new Random().Next().ToString() });

        FinancialLoanVMs = new ObservableCollection<FinancialLoanVM>();

        foreach (Model.FinancialLoan financialLoan in Financial.FinancialLoans)
        {
            FinancialLoanVMs.Add(new ViewModel.FinancialLoanVM { FinancialLoan = financialLoan });
        }
    }    } 




public class FinancialLoanVM
{
    public Model.FinancialLoan FinancialLoan { get; set; }

    public FinancialLoanVM()
    { FinancialLoan = new Model.FinancialLoan(); }


}

}

The UI has a Financial User Ccontrol with it's datacontext bound to the FinancialVM and a FinancialLoan User control with the datacontext Bound to the FinancialLoanVM.

The problem is face, is with the Listbox. I have templated it to have FinancialLoans user controls as Items, but the bound data doesn't get Injected into the FinancialLoanUC DataContext. I suppose the trick is all in the part of the listboxitem datatemplate. Any ideas of how i can make this work?

<UserControl.DataContext>
    <ViewModel:FinancialVM/>
</UserControl.DataContext>

<Grid d:DataContext="{d:DesignInstance Type=ViewModel:FinancialVM}" >

    <Grid.RowDefinitions>
        <RowDefinition Height="23"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <TextBlock Text="Income= "/>
        <Label Content="{Binding Path=Financial.Income}"/>
    </StackPanel>
    <ListBox Grid.Row="1" ItemsSource="{Binding Path=FinancialLoanVMs}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <View:FinancialLoanUC DataContext="{Binding }" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox> 
</Grid>

Answer 1

Answering my own question, I found what was wrong. The FinancialLoanUC had this in the XAML:

<UserControl.DataContext>
    <ViewModel:FinancialLoanVM/>
</UserControl.DataContext>

which overrode the DataContext Injected from the FinancialUC. (I suppose what was happening is that DataContext was set from the FinancialLoanVM member of the observable collection and then it was replaced by a new class instance as described in the XAML)

(By asker)