Пользовательский интерфейс с вкладками для каждой вкладки имеет разные View / ViewModel - PullRequest
Новая
       20

Пользовательский интерфейс с вкладками для каждой вкладки имеет разные View / ViewModel

1 голос
/ 21 февраля 2011

В моем проекте мне нужно создать интерфейс администрирования с меню. При каждом нажатии этого меню открывается новая вкладка. Поскольку я нахожусь в MVVM, каждая вкладка представляет собой отдельную ViewModel (которая наследуется от того же базового класса ViewModel) и разные View.

Я определил ItemTemplate для заголовка, но он является общим для всех вкладок, а не для содержимого.

Мой TabControl привязан к ObservableCollection базового класса ViewModel.

Итак, как мне загрузить правильное представление в интерфейсе в соответствии с его ViewModel?

Ответы [ 2 ]

2 голосов
/ 21 февраля 2011

Здесь - мой ответ на аналогичный вопрос, в котором вы можете найти расширенный 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
}

Я использовал это решение в реальном мире.приложение, так что вы можете быть уверены, что оно работает без проблем.

1 голос
/ 23 февраля 2011

Спасибо за вашу помощь.

Я наконец решил свою проблему другим способом:

Я использую RadTabControl (от telerik), и он предоставляет свойство ContentTemplateSelector, которое привязано к классу, расширяющему DataTemplateSelector.

ItemsSource RadTabControl привязывается к ObservableCollection TabViewModelBase. Каждый раз, когда я добавляю новую вкладку, мой базовый класс DataTemplateSelector выбирает правильное представление в соответствии с ViewModel.

...