TabControl的每個選項卡上的不同視圖/ usercontrols

Question

我試圖編寫一個程序，該程序使用製表符來保存不同的用戶控件。我目前想要發生的事情是用戶單擊查找按鈕，創建一個新選項卡，並在其中出現查找屏幕。使用查找屏幕，用戶可以選擇客戶端，然後打開它們自己的新選項卡，允許用戶編輯它們。因此，如果用戶進入並選擇了三個客戶端，屏幕將有四個選項卡，一個用於查找屏幕和三個客戶端選項卡。當用戶單擊該選項卡中的usercontrol上的退出按鈕時，還需要關閉該選項卡。

我的問題是，我不知道如何在我的程序中設置。我創建了一個TabControl並將ItemsSource綁定到視圖模型集合（我可以在用戶添加新屏幕時添加到該集合中）。我可以使用DataTemplateSelector來選擇包含正確視圖的DataTemplate，但我不知道如何將視圖的資源設置爲我的viewmodel。

我在WPF中這樣做，我目前使用Bxf把我的viewmodels到視圖，這通常工作，但我不確定它如何適應與TabControl。

我試圖堅持MVVM，所以有我的viewmodel中的視圖列表已經出來。

以前有沒有人做過類似的事情？

Answer 1

我剛剛回答了我的問題每個OpenTab對象將獲得在視圖中顯示。

動態創建的Tabitems使用tabcontrols itemsource屬性中的單個項目的datacontext進行設置，在本例中爲我的一個視圖模型。

我正確使用的datatemplate爲viewmodel類型選取了正確的視圖並顯示它。

但是，我的觀點設置視圖上的網格datacontext到我的資源，所以沒有顯示出來。我已經改變了這個使用datacontext而不是資源，現在一切正常。

所以我的主要問題是讓我的視圖耗盡資源而不是datacontext。我仍然寧願使用資源，但作爲datacontext的作品，我將不得不採取這種做法。

Answer 2

我會做我的主視圖模型是這樣的：

• ObservableCollection<ViewModelBase> OpenTabs
• ICommand AddTabCommand
• ICommand CloseTabCommand

在構造函數中，一個新的SearchViewModel被創建並添加到OpenTabs，和它的Search方法得到掛鉤中的某些方法

在MainViewModel的方法處理該搜索命令將創建一個新CustomerViewModel與指定客戶，設置它的CloseCommand，然後將其添加到OpenTabs

var vm = new CustomerViewModel(customer); 
vm.CloseCommand = this.CloseTabCommand; 
OpenTabs.Add(vm); 

你也可以使用事件系統如PRISM的EventAggregator或Galasoft的Messenger以繞過AddTab/CloseTab事件，而不是從MainViewModel

當然掛鉤的命令，你會使用DataTemplates定義如何

<TabControl ItemsSource="{Binding OpenTabs}"> 
    <TabControl.Resources> 
     <DataTemplate DataType="{x:Type local:SearchViewModel}"> 
      <local:SearchView /> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type local:CustomerViewModel}"> 
      <local:CustomerView /> 
     </DataTemplate> 
    </TabControl.Resources> 
</TabControl>