silverlight - 带有每个 Tab 的 UI Tabbed 具有不同的 View/ViewModel

Question

在我的项目中，我必须创建一个带有菜单的管理界面。每次单击此菜单时，都会打开一个新选项卡。
因为我在 MVVM 中，所以每个选项卡都是不同的 ViewModel(继承自同一个 ViewModel 基类)和不同的 View。

我已经定义了 ItemTemplate对于标题，但对于所有选项卡都是常见的，而不是内容不是。

我的 TabControl绑定(bind)到 ObservableCollection ViewModel 基类。

那么，如何根据 ViewModel 在界面中加载正确的 View 呢？

Answer 1

Here是我对类似问题的回答，您可以在其中找到扩展的 TabControl 和代码示例。

所以现在我专注于您的特定实现。
在此示例中，TabControl绑定(bind)到 Items属性，一个菜单列表 - 到 MenuItems属性(property)。

public class MainViewModel
{
    public MainViewModel()
    {
        MenuItems = new ObservableCollection<string>(){ "Item 1", "Item 2", "Item 3"};
        this.Items = new ObservableCollection<TabItemViewModel>
                         {
                             new TabItemViewModel("Tab 1", OnItemRequestClose),
                             new TabItemViewModel("Tab item 2", OnItemRequestClose)
                         };
    }

    public ObservableCollection<string> MenuItems { get; set; }

    public string CurrentMenuItem
    {
        get { return currentMenuItem; }
        set 
        { 
            currentMenuItem = value; 
            OnPropertyChanged("CurrentMenuItem");
            this.OnMenuChanged();
        }
    }

    public ObservableCollection<TabItemViewModel> Items { get; set; }

    public void OnItemRequestClose(TabItemViewModel item)
    {
        this.Items.Remove(item);
    }
}

XAML:

<ListBox ItemsSource="{Binding MenuItems}" 
         SelectedItem="{Binding CurrentMenuItem, Mode=TwoWay}" />

您可以使用绑定(bind)到 SelectionChanged 的命令。事件，但我的解决方案更通用。

方法 OnMenuChanged 的实现:

private void OnMenuChanged()
{
    if(this.CurrentMenuItem == "Item 1")
    {
        var addItem = new TabItemViewModel("Item 1", OnItemRequestClose);
        addItem.Content = new SomeView() { DataContext = new SomeViewModel() };
        this.Items.Add(addItem);
    }
    //and so on, and so forth
}

我在实际应用程序中使用了这个解决方案，因此您可以确定它可以正常工作。