带有每个 Tab 的 UI Tabbed 具有不同的 View/ViewModel答案

【问题标题】：UI Tabbed with each Tab has a different View/ViewModel带有每个 Tab 的 UI Tabbed 具有不同的 View/ViewModel
【发布时间】：2011-07-01 03:57:03
【问题描述】：

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

我已经为标题定义了一个ItemTemplate，但它对所有选项卡都是通用的，而不是内容不是。

我的 TabControl 绑定到 ViewModel 基类的 ObservableCollection。

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

【问题讨论】：

我建议您查看这篇来自 Josh Smith（他是 MVVM 大师）的文章 msdn.microsoft.com/en-us/magazine/dd419663.aspx。在示例应用程序中，他完全符合您的要求。进入 MVVM 是一本非常有趣的读物。

标签： silverlight mvvm telerik mvvm-light

【解决方案1】：

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

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

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}" />

您可以使用绑定到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
}

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

【讨论】：

【解决方案2】：

感谢您的帮助。

我终于用另一种方式解决了我的问题：

我使用 RadTabControl（来自 telerik），它公开了一个名为 ContentTemplateSelector 的属性，该属性绑定到扩展 DataTemplateSelector 的类。

RadTabControl 的 ItemsSource 绑定到 TabViewModelBase 的 ObservableCollection。每次，我都会添加一个新选项卡，我的 DataTemplateSelector 基类会根据 ViewModel 选择正确的视图。

【讨论】：