关于多选项卡界面中的MVVM数据绑定的一些困惑

Question

I am an experienced developer, but relative newcomer to the world of WPF and MVVM. I've been reading up on various tutorials and examples of following the MVVM pattern. I am working on converting an existing MDI Windows forms (a student/class management system) application into WPF. My basic design is for a menu (tree view) docked on the left side of the main window with a tab control that would contain the different views (student, class, teacher, billing etc) that the user requires. As proof of concept (and to get my head around WPF) I have the following:

A simple model, Student

public class Student
{
    public DateTime BirthDate { get; set; }
    public string Forename { get; set; }
    public int Id { get; set; }
    public string Surname { get; set; }

    public override string ToString()
    {
        return String.Format("{0}, {1}", Surname, Forename);
    }
}

The StudentViewModel

public class StudentViewModel : WorkspaceViewModel
{
    private Student student;

    public override string DisplayName
    {
        get
        {
            return String.Format("{0} {1}", student.Forename, student.Surname);
        }
    }
    public string Forename
    {
        get
        {
            return student.Forename;
        }
        set
        {
            student.Forename = value;
            RaisePropertyChanged();
            RaisePropertyChanged("DisplayName");
        }
    }
    public int Id
    {
        get
        {
            return student.Id;
        }
        set
        {
            student.Id = value;
            RaisePropertyChanged();
        }
    }
    public string Surname
    {
        get
        {
            return student.Surname;
        }
        set
        {
            student.Surname = value;
            RaisePropertyChanged();
            RaisePropertyChanged("DisplayName");
        }
    }

    public StudentViewModel()
    {
        this.student = new Student();
    }

    public StudentViewModel(Student student)
    {
        this.student = student;
    }
}

The view model inherits WorkspaceViewModel, an abstract class

public abstract class WorkspaceViewModel : ViewModelBase
{
    public RelayCommand CloseCommand { get; set; }

    public event EventHandler OnClose;

    public WorkspaceViewModel()
    {
        CloseCommand = new RelayCommand(Close);
    }

    private void Close()
    {
        OnClose?.Invoke(this, EventArgs.Empty);
    }
}

This in turn inherits ViewModelBase, where I implement INotifyPropertyChanged. The RelayCommand class is a standard implementation of the ICommand interface.

The MainWindowViewModel holds a collection of Workspaces

public class MainViewModel : WorkspaceViewModel
{
    private WorkspaceViewModel workspace;
    private ObservableCollection<WorkspaceViewModel> workspaces;

    public WorkspaceViewModel Workspace
    {
        get
        {
            return workspace;
        }
        set
        {
            workspace = value;
            RaisePropertyChanged();
        }
    }
    public ObservableCollection<WorkspaceViewModel> Workspaces
    {
        get
        {
            return workspaces;
        }
        set
        {
            workspaces = value;
            RaisePropertyChanged();
        }
    }

    public RelayCommand NewTabCommand { get; set; }

    public MainViewModel()
    {
        Workspaces = new ObservableCollection<WorkspaceViewModel>();
        Workspaces.CollectionChanged += Workspaces_CollectionChanged;
        NewTabCommand = new RelayCommand(NewTab);
    }

    private void NewTab()
    {
        Student student = new Student();
        StudentViewModel workspace = new StudentViewModel(student);
        Workspaces.Add(workspace);

        Workspace = workspace;
    }

    private void Workspaces_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.NewItems != null && e.NewItems.Count != 0)
        {
            foreach (WorkspaceViewModel workspace in e.NewItems)
            {
                workspace.OnClose += Workspace_OnClose; ;
            }
        }

        if (e.OldItems != null && e.OldItems.Count != 0)
        {
            foreach (WorkspaceViewModel workspace in e.OldItems)
            {
                workspace.OnClose -= Workspace_OnClose;
            }
        }
    }

    private void Workspace_OnClose(object sender, EventArgs e)
    {
        var workspace = (WorkspaceViewModel)sender;
        Workspaces.Remove(workspace);
    }
}

The StudentView xaml

<UserControl x:Class="MvvmTest.View.StudentView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:MvvmTest.View"
         xmlns:vm="clr-namespace:MvvmTest.ViewModel"
         mc:Ignorable="d">
<UserControl.DataContext>
    <vm:StudentViewModel/>
</UserControl.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="0" Text="ID:"/>
    <TextBlock Grid.Column="0" Grid.Row="1" Text="Forename:"/>
    <TextBlock Grid.Column="0" Grid.Row="2" Text="Surname:"/>
    <TextBlock Grid.Column="0" Grid.Row="3" Text="Date of Birth:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Id, Mode=TwoWay}"/>
    <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding Forename, Mode=TwoWay}"/>
    <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Surname, Mode=TwoWay}"/>
    <DatePicker Grid.Column="1" Grid.Row="3" SelectedDate="{Binding BirthDate, Mode=TwoWay}"/>
</Grid>
</UserControl>

The StudentViewModel and StudentView are linked via a resource dictionary in App.xaml

    <ResourceDictionary>
        <vm:MainViewModel x:Key="MainViewModel"/>
        <DataTemplate DataType="{x:Type vm:StudentViewModel}">
            <v:StudentView/>
        </DataTemplate>
    </ResourceDictionary>

And finally, the MainWindow view (goal is that this will eventually conform to MVVM in that the MainWindowViewModel will define the menu structure)

<Window x:Class="MvvmTest.MainWindow"
    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:local="clr-namespace:MvvmTest"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:vm="clr-namespace:MvvmTest.ViewModel"
    xmlns:v="clr-namespace:MvvmTest.View"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
    <vm:MainViewModel/>
</Window.DataContext>
<DockPanel>
    <StackPanel DockPanel.Dock="Left" Orientation="Vertical">
        <Button Content="New Student">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction Command="{Binding NewTabCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
    <TabControl ItemsSource="{Binding Workspaces}" SelectedItem="{Binding Workspace}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding DisplayName, Mode=OneWay}"/>
                    <Button>X</Button>
                </StackPanel>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <UserControl Content="{Binding}"/>
                </StackPanel>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</DockPanel>
</Window>

When I click the 'New student' button a new student workspace is created, added to Workspaces collection and displays in the TabControl. All seems well. But when I enter data on the view I noticed that the tab header isn't updated. First sign that all is not working as it should...

Then when I click 'New student' a second time. Another workspace is created, but that duplicates the values entered in the first. Further, when editting the second tab, the first is also updated.

Placing a breakpoint into the NewTab method revealed that although the Workspaces collection holds StudentViewModels, the display properties are still null; even though the StudentView appears to hold data.

After much puzzling I discovered that if I do not set the data context on the StudentView xaml then the binding behaves properly and the test app works as expected. But then doesn't that mean the xaml designer isn't really validating the display property bindings, even though at runtime the path is resolved?

Anyway, I'm now left a few questions. How and why does what I've done work? It essentially appears to go against everything I've read and seen on MVVM. Furthermore when trying to apply this application to a MVVM framework (eg MVVM Light) the views are explicitly defined with the data context set in the xaml (eg: DataContext="{Binding Path=Student, Source={StaticResource Locator}} ). Which makes even less sense...

As I said, what I've got does work, but I'm not really understanding why, and therefore doubt is clawing away that I've done something wrong. As a result I'm reluctant to proceed further on serious development from fear of having to rework later (having dug myself into a hole).

Answer 1

Child controls automatically inherit DataContext from their parent. So if no DataContext is specified in the UserControl then each instance uses the instance of StudentViewModel contained in the WorkSpaces Collection. On the other hand when specifing the datacontext in the UserControl XAML each instance of the view is bound the same ViewModel instance. That is why changing data on one view results in changes on all other views. The views are all referencing the same object. I hope that is clear.