在Wpf中的TabControl中切换到视图时如何摆脱BindingExceptions

Question

In my ViewModel I have collection of TabItem . Each TabItem contains a Name and another ViewModel (inherits from BaseModel with INotifyPropertyChanged ). Based on a property of this ViewModel , XAML makes a decission which View should be placed in the ContentTemplate of each tab control item.

I am working with the mvvm pattern and I got this work with switching between tabs. The problem is I get binding exceptions. It is very difficult to explain.

The error message looks like this:

System.Windows.Data Error: 40 : BindingExpression path error: 'ExtraText' property not found on 'object' ''DisplayModel1' (HashCode=8229676)'. BindingExpression:Path=ExtraText; DataItem='DisplayModel1' (HashCode=8229676); target element is 'Label' (Name=''); target property is 'Content' (type 'Object')

To reproduce the error you can use the following code, with sample data provided. This is the XAML of my starting window:

<Window.Resources>
    <DataTemplate x:Key="Model1Template" DataType="{x:Type local:BaseModel}">
        <local:DisplayModel1View />
    </DataTemplate>
    <DataTemplate x:Key="Model2Template" DataType="{x:Type local:BaseModel}">
        <local:DisplayModel2View />
    </DataTemplate>
</Window.Resources>
<Grid>
    <TabControl ItemsSource="{Binding TabItems}">
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
            </Style>
        </TabControl.Resources>
        <TabControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:TabModel}">
                <Label DockPanel.Dock="Left" Content="{Binding Name}"></Label>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate DataType="{x:Type local:BaseModel}">
                <ContentControl Content="{Binding ViewModel, Mode=TwoWay}">
                    <ContentControl.Style>
                        <Style TargetType="{x:Type ContentControl}">
                            <Setter Property="ContentTemplate" Value="{StaticResource Model1Template}" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=ViewModel.ModelType}" Value="Model2">
                                    <Setter Property="ContentTemplate" Value="{StaticResource Model2Template}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ContentControl.Style>
                </ContentControl>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

I defined two Templates which are holding the specific View. In the TabControl.ContentTemplate I am checking the enum value of the ViewModel located in my TabModel .

These are the possible Views:

DisplayModel1View

<Grid>
    <Label Content="{Binding Name}"></Label>        
</Grid>

DisplayModel2View

<StackPanel>
        <Label Content="{Binding Name}"></Label>
        <Label Content="{Binding ExtraText}"></Label>
    </StackPanel>

You can see, the underlying view models have not the same properties. In DisplayModel2View you can see the property ExtraText , mentioned in the error message.

Last but not least my models:

public abstract class BaseModel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    public abstract ModelType ModelType { get; }

    public void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class DisplayModel1 : BaseModel
{
    public string Name { get; set; }

    public override ModelType ModelType => ModelType.Model1;
}

public class DisplayModel2 : BaseModel
{
    public string Name { get; set; }

    public string ExtraText { get; set; }

    public override ModelType ModelType => ModelType.Model2;
}

public class TabModel
{
    private bool isSelected;

    public string Name { get; set; }

    public bool IsSelected
    {
        get { return isSelected; }
        set { isSelected = value; }
    }

    public BaseModel ViewModel { get; set; }
}

//MainViewModel
public class ViewModel
{
    public ObservableCollection<TabModel> TabItems { get; set; }

    public ViewModel()
    {
        TabItems = new ObservableCollection<TabModel>();
        TabItems.Add(new TabModel()
        {
            Name = "Tab1",
            ViewModel = new DisplayModel1() { Name = "ModelOne" },
            IsSelected = true
        });

        TabItems.Add(new TabModel()
        {
            Name = "Tab1",
            ViewModel = new DisplayModel2() { Name = "ModelTwo", ExtraText = "ExtraTwo" },
            IsSelected = false
        });
    }
}

//Decission, which View should be used
public enum ModelType
{
    Model1,
    Model2
}

Answer 1

Actually, you don't need that ModelType property. Let WPF find out which view to use for which view-model based on the view-model's type.

Remove the DataTemplate s from Window.Resources first. Remove the trigger. Place your DataTemplate s for concrete view-model types (not for ViewModelBase ) in your TabControl 's resources (this is to make those DataTemplate s local for the tab control - we only want them to apply here).

Then, you will get something like:

<TabControl ItemsSource="{Binding TabItems}">
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
        </Style>
        <DataTemplate DataType="{x:Type local:DisplayModel1}">
            <local:DisplayModel1View />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:DisplayModel2}">
            <local:DisplayModel2View />
        </DataTemplate>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:TabModel}">
            <Label DockPanel.Dock="Left" Content="{Binding Name}"></Label>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type local:BaseModel}">
            <ContentControl Content="{Binding ViewModel}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>