UserControls/ViewModels don't get loaded when switching tabs

Question

I'm very new to MVVM and WPF. I'm trying to build a tabcontrol with tabpages presented as usercontrols and i can't find the reason why the usercontrols don't get loaded when i switch between the tabs.

public partial class WndMain : Window
{
    public WndMain()
    {
        InitializeComponent();

        var ViewModelWndMain = new ViewModelWndMain();

        this.DataContext = ViewModelWndMain;
    }
}

Each tabItem has it's own ViewModel:

<Window x:Class="EasyBulking.WndMain"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ViewModels="clr-namespace:EasyBulking.ViewModels"
    xmlns:Tabs="clr-namespace:EasyBulking.GUI"
    Title="WndMain" Height="350" Width="525">
<Grid>
    <TabControl x:Name="TabsWndMain"
        ItemsSource="{Binding Tabs}"
        SelectedItem="{Binding SelectedTab, Mode=TwoWay}">

        <TabControl.Resources>                
            <DataTemplate DataType="{x:Type ViewModels:ViewModelTabProfile}">
                <Tabs:TabProfile />
            </DataTemplate>
            <DataTemplate DataType="{x:Type ViewModels:ViewModelTabNutrition}">
                <Tabs:TabNutrition />
            </DataTemplate>
            <DataTemplate DataType="{x:Type ViewModels:ViewModelTabTraining}">
                <Tabs:TabTraining />
            </DataTemplate>              
        </TabControl.Resources>

        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding tabName}" />
            </Style>
        </TabControl.ItemContainerStyle>

    </TabControl>
</Grid>

The corresponding ViewModel:

class ViewModelWndMain : ViewModelBase
{        
    private ObservableCollection<ViewModelTab> tabs = new ObservableCollection<ViewModelTab>();
    private ViewModelTab selectedTab;
    private ResourceManager resourceManager { get; set; }

    public ViewModelWndMain ()
    {
        resourceManager = new ResourceManager("EasyBulking.Properties.Resources", Assembly.GetExecutingAssembly());

        Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabProfile")));
        Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabNutrition")));
        Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabTraining")));

        SelectedTab = Tabs[0];
    }

    public ObservableCollection<ViewModelTab> Tabs
    {
        get
        {
            return tabs;
        }
    }

    public ViewModelTab SelectedTab
    {
        get { return selectedTab;   }
        set { 
            selectedTab = value;
            this.RaisePropertyChangedEvent("SelectedTab");               
        }
    }
}

The ProperyChanged event fires but the UI just doesn't update when i switch the tabs.

abstract class ViewModelBase : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChangedEvent(string propertyName)
    {         
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

I think your Window XAML element is missing a DataContext="{Binding RelativeSource=Self}" attribute... — Roman Gruber
If i add this property DataContext="{Binding RelativeSource={RelativeSource Self}} to my tab control my window will display nothing at all - not even the tab headers. — JuergenP
Argh... sorry, overlooked the obvious: You're adding three objects of type "ViewModelTabProfile" instead of the individual other objects. Your tabs probably are switching but to the same control over and over again. — Roman Gruber
Post your solution as an answer rather than editing it into the question. — ChrisF♦

Roman Gruber Roman Gruber · Accepted Answer · 2013-11-23T23:51:44

OK, just to close this question on a regular answer, here we go:

The code that adds the tabs' viewmodels inserts the same objects for all three tab pages:

    Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabProfile")));
    Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabNutrition")));
    Tabs.Add(new ViewModelTabProfile(resourceManager.GetString("tabTraining")));

The resource-loaded header text masks that fact and it seems that the pages aren't swapping when in fact they swap from one control to the same type of control again.

UserControls/ViewModels don't get loaded when switching tabs

1 Answers