Binding tab controls with mahapps and prism - WPF

Question

I am building a WPF application with mahapps, prism[modularity]. I have below HomeWindow.xaml code.

<Controls:MetroWindow x:Class="Project.Views.HomeWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        xmlns:local="clr-namespace:Project.Views"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True" 
        <!--The above code is for automatically binding of viewmodel into view-->
        Height="700" Width="1200" Background="White">
    <Grid>
        <TabControl ItemsSource="{Binding TabCollection}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock>                            
                        <TextBlock Text="{Binding Name}"/>
                    </TextBlock>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Label Content="{Binding Content}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Controls:MetroWindow>

I have below structure in my HomeViewModel.cs under ViewModels directory.

public class HomeViewModel : BindableBase
{
    private ObservableCollection<Item> _tabCollection;
    public ObservableCollection<Item> TabCollection { get { return _tabCollection; } set { SetProperty(ref _tabCollection, value); } }
    //Prism way of getting and setting data
}

public class Item
{
    private string Name;
    private string Content;

    public Item(string name, string content)
    {
        Name = name;
        Content = content;
    }
}

below is how I add data into TabCollection property through HomeWindow.xaml.cs.

private HomeViewModel _model=new HomeViewModel();
public HomeWindow(EmployeeViewModel model)
{
    InitializeComponent();
    _model.UserViewModel = model;
    LoadHomeData(_model.UserViewModel.EmpRole);
    DataContext = this;
}

private void LoadHomeData(string Role)
{
    if (string.Equals(Role, "Admin"))
    {
        _model.TabCollection= new ObservableCollection<Item>()
        {
            new Item("Test1", "1"),
            new Item("Test2", "2"),
            new Item("Test3", "3")
        };
    }
}

Now matter what, the tabs will not get displayed. Its a blank empty window. I have followed the example in the issue here and have went through few similar posts having same kind of approach. But none of them helped. Is this because of prism way of databinding or is there anything else am missing here? Hope to find some help on this..

Answer 1

Your problem is not connected to MahApps or Prism but to how WPF works in general. In your case Name and Content are private fields and should be public properties

public string Name { get; set; }
public string Content { get; set; }

private or field is not a valid binding source. You can find more as to what is a valid binding source under Binding Sources Overview but in your case, as far as CLR object goes:

You can bind to public properties, sub-properties, as well as indexers, of any common language runtime (CLR) object. The binding engine uses CLR reflection to get the values of the properties. Alternatively, objects that implement ICustomTypeDescriptor or have a registered TypeDescriptionProvider also work with the binding engine.

Another problem is that DataContext is set wrong. At the moment is set to HomeWindow and I think it should be set to instance of HomeViewModel which holds TabCollection property

DataContext = _model;