TabContemにUserControlをロード

Question

私はTabControlを含むUsercontrol（TabUserControl）を持っています。そのUserControlのViewModelは、TabItemのObservableコレクションを読み込みます。これらの項目の1つは別のユーザーコントロールです。タブコントロールにテキストをロードするだけで問題はありませんが、他のユーザーコントロールをTabUserControlのタブアイテムにどのように読み込むことができますか？ 私はMVVMを使用しています。ここで

は私のコードです：

public class TabItem 
{ 
    public string Header { get; set; } 
    public object Content { get; set; } // object to allow all sort of items?? 
} 

TabUserControl

public class TabViewModel 
{ 
    public ObservableCollection<TabItem> Tabs {get;set;} 

    public TabViewModel() 
    { 
     Tabs = new ObservableCollection<TabItem>(); 
     //Tabs.Add(new TabItem { Header = "Overview", Content = new OverviewViewModel() }); How to load a usercontrol here if it's in the ItemCollection? 
     Tabs.Add(new TabItem { Header = "Overview", Content = "Bla bla bla" }); 
     Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" }); 
    } 
} 

そしてTabControlのXAMLのViewModelに：

<TabControl x:Name="_tabControl" 
      ItemsSource="{Binding Tabs}"> 
    <TabControl.ItemContainerStyle> 
    <Style TargetType="TabItem"> 
     <Setter Property="Header" 
       Value="{Binding Header}" /> 
     <Setter Property="Content" 
       Value="{Binding Content}" /> 
    </Style> 
    </TabControl.ItemContainerStyle> 
</TabControl> 

それは限り、私はのviewmodelをロードいけないとして働きますtabItemsコレクション内のユーザーコントロールのどのようにTabItemにUserTabControlをロードさせることができますか？ すべてのタブアイテムにusercontrolが含まれることを意図しています。各ユーザーコントロールはそれ自身のことです。

私はWPFの初心者として誰かが私を助けることを願っています。 Thx！

Answer 1

は理想的には、TabControl.ItemsSourceはViewModelsのコレクションに設定する必要があり、かつDataTemplatesは、特定のUserControlと各ViewModelを描画するWPFを伝えるために使用されるべきです。

これはあなたのUI例えば（ Views）

から完全に独立したビジネスロジック（ViewModels）の間維持し

、TabControlのののDataContextを含む

<TabControl x:Name="MyTabControl" 
      ItemsSource="{Binding TabViewModels}" 
      SelectedItem="{Binding SelectedTabViewModel}"> 

    <TabControl.Resources> 
     <DataTemplate DataType="{x:Type my:ViewModelA}"> 
      <my:ViewAUserControl /> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type my:ViewModelB}"> 
      <my:ViewBUserControl /> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type my:ViewModelC}"> 
      <my:ViewCUserControl /> 
     </DataTemplate> 
    </TabControl.Resources> 

    <TabControl.ItemContainerStyle> 
     <Style TargetType="TabItem"> 
      <Setter Property="Header" Value="{Binding Header}" /> 
     </Style> 
    </TabControl.ItemContainerStyle> 

</TabControl> 

のViewModel：

TabViewModels = new ObservableCollection<ITabViewModel>(); 
TabViewModels.Add(new ViewModelA { Header = "Tab A" }); 
TabViewModels.Add(new ViewModelB { Header = "Tab B" }); 
TabViewModels.Add(new ViewModelC { Header = "Tab C" }); 

SelectedTabViewModel = TabViewModels[0]; 

Answer 2

おかげでレイチェルのためにあなたの答え。しかし、コンパイル時にDataContextを宣言することを強制します。あなたと同じように、TabControlのDataTemplateのそれぞれのViewModelにビューのそれぞれを関連づけます。これをViewModelに移動するときに動的View-ViewModelリンクを実現できます。私たちも、唯一のタブSelectionChangedEvent時TabItemsの初期化を遅らせ、呼び出すためのアクションデリゲートの使用をすることができます

public ObservableCollection<TabItem> TabItems { get; set; } 
public MainWindowViewModel() 
     { 
      TabItems = new ObservableCollection<TabItem> 
      { 
       new TabItem{Content = new TabAView() {DataContext = new TabAViewModel()}, Header = "Tab A"}, 
       new TabItem{Content = new TabBView(), Header = "Tab B"} 
      }; 
     } 

：

XAML：

<TabControl.ItemContainerStyle> 
       <Style TargetType="TabItem"> 
        <Setter Property="Header" Value="{Binding Header}" /> 
        <Setter Property="Content" Value="{Binding Content}" /> 
       </Style> 
      <TabControl.ItemContainerStyle> 

VMここでは、方法です。これは、UserControlビューに多くのUI要素がある場合、大量のメモリ節約を実現します。