How to set DataContext in XAML for a dynamically modified ObservableCollection

Question

Inside my class MainWindow I have:

public ObservableCollection<ViewModel> VMs ..

The MainWindow is constructed in the XAML (it creates an empty VMs in the class constructor too):

<Window.Resources>
        <c:MainViewModel x:Key="ViewModelsSource"/>
</Window.Resources>

When I click on a button, I add ViewModel objects to the ObservableCollection VMs and the content of the ObservableCollection is shown in a ListBox:

<StackPanel DataContext="{Binding Source={StaticResource ViewModelsSource}}">
        <ListBox IsSynchronizedWithCurrentItem="True" 
                 ItemsSource="{Binding VMs}" 
                 Background="Transparent" 
                 HorizontalContentAlignment="Stretch"
                 > ...

The code for the Command Add is:

    void AddListExecute()
    {
        VMs.Add(new ViewModel());
    }

The constructor for ViewModel is:

public class ViewModel : MainViewModel
{
    //Private Members
    private ObservableCollection<FeeViewModel> _fees;

    //Properties
    public ObservableCollection<FeeViewModel> FVMs
    {
        get
        {
            return _fees;
        }
        set
        {
            _fees = value;
        }
    }

    //Constructor
    public ViewModel()
    {
        this._fees = new ObservableCollection<FeeViewModel>();
    }
    ...

This part is working fine. Each ViewModel object contains another ObservableCollection:

public ObservableCollection<FeeViewModel> FVMs ..

I have a tabcontrol in the XAML that uses this ObservableCollection to do stuff:

   <TabControl 
            IsSynchronizedWithCurrentItem="True" 
            ItemsSource="{Binding FVMs, diag:PresentationTraceSources.TraceLevel=High}"
            Style="{StaticResource EnabledTabs}" Grid.Column="1" Margin="0,0,10,0">
        <TabControl.ItemTemplate>                
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                   ...
                </StackPanel>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
             ...

EnabledTabs is a style that uses a property in FeeViewModel:

    <Style TargetType="{x:Type TabControl}" x:Key="EnabledTabs">
        <Setter Property="IsEnabled" Value="{Binding GotFees}"/>
    </Style>

Now I have a binding error, FVMs is null and nothing is shown in the window. If I revert to a previous version without an ObservableCollection of ViewModel objects and I set the DataContext of the TabControl to that single ViewModel everything works fine.

How to set the DataContext of the TabControl to the dynamically created ViewModel objects?

Is it possible to do something like VMs/FVMs in the binding? Thanks

Sanity check: You say that your ViewModels contain an ObservableCollection<FeeViewModel> FVMs, but you've apparently bound to something called FMVs. Is this just a typo here, or is it in your code? — goobering
And that would be a perfect example for why you should use reasonable property names. — Clemens
@Clemens This is not the actual code, I have used reasonable property names in it, as you suggested. I am going to add more details to answer your questions too. — MatteoDC

MatteoDC MatteoDC · Accepted Answer · 2015-04-15T08:21:48

Solved by adding DataContext to TabControl:

<TabControl 
        DataContext="{Binding VMs, Source={StaticResource ViewModelsSource}}"
        IsSynchronizedWithCurrentItem="True" 
        ItemsSource="{Binding FVMs, diag:PresentationTraceSources.TraceLevel=High}"
        Style="{StaticResource EnabledTabs}" Grid.Column="1" Margin="0,0,10,0">

How to set DataContext in XAML for a dynamically modified ObservableCollection

1 Answers