Question

I am following wpf/mvvm method. I need to have a tab control…with multiple rows..i mean parent/child rows. When user click on a tab, all child tabs under that should be displayed…but only the page under one child tab should be loaded.

Can anyone help me regarding this please?

Answer 1

Yes you can do that by binding SelectedTabIndex property in tab Control to a string in ViewModel. ( So the whole thing lies in how you design the data structures in the ViewModel.)

Regarding loading of Tab content on selection of Tab :

Initially you can call a service from your ViewModel and get the number of tabs,populate it to a Observable collection and bind your Tabs to the collection. You can have a property called SelectedTab in your ViewModel and have its value as -1. Now after you have got the number of tabs and bound those tabs to the tab control (I am not loading the contents of tab; only the tabs for display) , you can set SelectedTab=0 and in the setter you can pass the TabId and load the data for the Tab.

private string selectedTab = -1;
public string SelectedTab 
{
    get { return selectedTab; }
    set { 
           selectedTab = value;
           LoadTabContent(selectedTab);
           OnPropertyChanged("SelectedTab"); // I have implemented INotifyPropertyChanged event
        }
}

But make sure you dont have too many Tabs cos the application will perform very badly with too many tabs and too much data inside each tab because everytime when you select a different Tab, WPF will clear the contents of older Tab from visual tree.