如何使用viewmodel綁定和更改選項卡控件中的頁面？

我有三個xaml頁面和相關的ViewModels：main.xaml，MainViewModel.cs; page1.xaml，Page1ViewModel.cs; page2.xaml，page2ViewModel.cs。 main.xaml中有一個TabControl。我想在應用程序初始化時在TabItem中加載和顯示page1.xaml，並且在單擊page1.xaml中包含的按鈕時將page1.xaml改爲page2.xaml;單擊page2.xaml中包含的按鈕時，page2.xaml將更改爲page1.xaml。如何使用viewmodel綁定和更改選項卡控件中的頁面？

所有的事件或命令都需要在ViewModels中實現。我的問題：

如何將頁面加載到TabItem？
如何更改TabItem中的頁面？

以上問題已經由Rachel解答，謝謝。

我想在TabItem1中顯示page1和page2，當單擊page1中包含的按鈕時，page1將消失，page2將顯示。

謝謝。

來源

2012-02-06 zclmoon

您的MainPageViewModel應該包含TabControl和SelectedPage中的頁面的集合。它也應該包含一個ICommand這將改變當前頁面。

例如，

// These should be full properties that raise PropertyChange notifications 
public ObservableCollection<IPageViewModel> Tabs { get; set; } 
public int SelectedTabIndex { get; set; } 
private ICommand ChangeTabIndexCommand { get; set; } 

MainPageViewModel() 
{ 
    Tabs = new ObservableCollection<IPageViewModel>(); 

    Tabs.Add(new Page1ViewModel()); 
    Tabs.Add(new Page2VieWModel()); 

    SelectedTab = 0; 

    ChangeTabIndexCommand = new RelayCommand<int>(ChangeTab); 
} 

void ChangeTab(int newIndex) 
{ 
    if (newIndex >= 0 && newIndex < Tabs.Count()) 
     SelectedTab = newIndex; 
}

你的MainView是這樣的：

<TabControl ItemsSource="{Binding Tabs}" SelectedIndex="{Binding SelectedIndex}" />

如果您在使用Silverlight 5，我相信你可以使用隱DataTemplates，但是如果沒有你就必須使用類似於DataTemplateSelector或Converter的東西來告訴Silverlight如何繪製每個ViewModel。我通常使用Microsoft PRISM'sDataTemplateSelector

有很多方法可以連接ChangeTabIndexCommand。我的首選是使用某種Messaging System，但是您也可以在MainViewModel的構造函數中掛接事件。

來源

2012-02-06 15:54:44 Rachel

Rachel，謝謝你的回答，對我有用。還有其他一些問題：如何在TabItem中顯示不同的頁面，以及如何在頁面（而不是主頁面）中公佈事件，以在同一個TabItem中加載其他頁面。謝謝。 – zclmoon 2012-02-07 01:59:25

如何使用viewmodel綁定和更改選項卡控件中的頁面？

回答

相關問題