Question

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

我为标题定义了ItemTemplate，但它对所有标签都很常见，而不是内容。

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

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

Answer 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
}

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

Answer 2

感谢您的帮助。

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

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

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

每个选项卡的UI选项卡都有不同的View / ViewModel

2 个答案: