Binding to DataGrid of TabItem not Working using MVVM

Question

I have a small application to help myself learn WPF and MVVM etc. I have been using the example by Josh Smith found here to construct my own application. I have got the application adding TabItems, but the embedded DataGrid which is bound to an ObservableCollection is not showing any data, see the image below:

Example

The DataGrid is the section surrounded in blue. The UserControl also seems to be showing the in the tab itself for some reason, but that is not the problem I am asking about here. The UserControl contains a DataGrid which is bound as follows

...

The Resources property is defined in the ViewModels namespace as

internal class ResourceDataViewModel : WorkspaceViewModel
{
    readonly ResourceDataRepository resourceRepository;
    public ObservableCollection Resources { get; private set; }
    ...
}

Where the ResourceViewmodel holds the information for each row of the DataGrid. I can confirm that the Resource property is populated. When I use the same model outside of MVVM and populate Resource in the same way it works. Can someone provide me with and idea of why this could be happening?

I have attempted to set the explicit path for the binding

ItemsSource="{Binding Path=(viewModels:Resources)}"

but this also does not work. Thanks for your time.

Edit. To address comments. I set the DataContext in the App.xaml.cs file by

protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    MainWindow window = new MainWindow();

    // Create the ViewModel to which 
    // the main window binds.
    MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();

    // When the ViewModel asks to be closed, 
    // close the window.
    EventHandler handler = null;
    handler = delegate
    {
        mainWindowViewModel.RequestClose -= handler;
        window.Close();
    };
    mainWindowViewModel.RequestClose += handler;

    // Allow all controls in the window to 
    // bind to the ViewModel by setting the 
    // DataContext, which propagates down 
    // the element tree.
    window.DataContext = mainWindowViewModel;
    window.Show();
}

The XAML of the MainWindow:

Where the MainWindowResources.xaml is:

The full code for the ResourceControl.xaml is:

The TextBox is bound to the DataGrid. When the user types into that TextBox the DataGrid filters and highlights the cells which contains the required text. This however, is not the problem and this code works, it is just the binding to the DataGrid I am interested in. Thanks again for tour time.

Edit2: According to @dkozl's comments I have removed the DataContext="{Binding ElementName=control}" from the DockPanel declaration, so we now have

...

and in the MainWindowResource.xaml I now have

This has not worked. That is my DataGrid in the ResourceControl is not being populated. Thanks again for your time it is most appreciated...

dkozl · Accepted Answer

Your UserControl DockPanel.DataContext is bound to ResourceControl control and not to ResourceDataViewModel class. What you need to do instead is to bind DataContext of ResourceControl in your DataTemplate. To achive that first remove DataContext="{Binding ElementName=control}" from ResourceControl.DockPanel and then bind ResourceControl.DataContext to your object by . Also you need to change DataGrid items binding from ItemsSource="{Binding Path=(viewModels:Resources)}" to ItemsSource="{Binding Path=Resources}".

Not part of the original question but same template applies to tab header and tab content because DataTemplate is type specific and in this case tab header content and tab content is the same thing. To solve the issue remove DataTemplate for viewModels:ResourceDataViewModel type and put this directly into your main TabControl:

Binding to DataGrid of TabItem not Working using MVVM

Answers (1)

Related Questions