TabItemでUserControlをプログラムで読み込み

Question

XAMLを使用する場合、TabItem内にUserControlを配置するのはかなり基本的です。

<TabControl> 
    <TabItem> 
     <local:MyUserControl/> 
    </TabItem> 
</TabControl> 

しかし、ViewModelを使用してUserControlをロードしたいとします。それについてどうすればいいのですか？例えば私のViewModelには、私は上の別のタブ、ヘッダー、背景色とを移入するために使用するのObservableCollectionを持っていると仮定すると、

<TabControl ItemsSource="{Binding TabCollection}"> 
    <TabItem Header="{Binding Header}" 
      Source="{Binding MyUserControl}"> <!-- Source is obviously not a property of TabItem--> 
               <!-- I'm just using it in this context as an example. Like how a 'Frame' would work --> 
    </TabItem> 
</TabControl> 

について、どのように私はプログラム的のTabItemでビューを移入でしょうか？

は例えば、以下のViewModelの基本的なサンプルです：

public class TabViewModel 
{ 
    // 'TabModel' is a simple class that acts as a Model for this class (TabViewModel) 
    // All it does is store strings, integers, etc. as properties 
    // i.e: the fields 'Header' and 'MyUserControl' in the below method are both strings declared in 'TabModel' 
    public ObservableCollection<TabModel> TabCollection { get; set; } 

    public TabViewModel() 
    { 
     TabCollection = new ObservableCollection<TabModel>(); 
     PopulateTabCollection(); 
    } 

    private void PopulateTabCollection() 
    { 
     TabCollection.Add(new TabModel() 
     { 
      Header = "FirstUserControl", 
      MyUserControl = "Views/MyFirstUserControl.xaml" 
     }); 

     TabCollection.Add(new TabModel() 
     { 
      Header = "SecondUserControl", 
      MyUserControl = "Views/MySecondUserControl.xaml" 
     }); 
    } 
} 

だから私はデータバインディングを介して各タブで異なるビューを表示される何をする必要がありますか。これが可能なのかどうかはわかりません。しかしそれがあれば、親切に私を教育してください。

Answer 1

これはDataTemplatesを使用して実現できます。以下のコードを参照してください。

<Window.Resources> 
    <DataTemplate DataType="{x:Type local:PersonVm}"> 
     <local:Person/> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type local:DeptVm}"> 
     <local:Department/> 
    </DataTemplate> 
</Window.Resources> 
<Grid> 
    <TabControl ItemsSource="{Binding TabCollection}" SelectedIndex="0"> 
     <TabControl.ItemTemplate> 
      <DataTemplate> 
       <TextBlock Text="{Binding TabName}"/> 
      </DataTemplate> 
     </TabControl.ItemTemplate> 
     <TabControl.ContentTemplate> 
      <DataTemplate> 
       <ContentControl Content="{Binding }"/> 
      </DataTemplate> 
     </TabControl.ContentTemplate> 
    </TabControl> 
</Grid> 


public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 
      this.DataContext = new TabViewModel(); 
     } 
    } 

    public class TabViewModel 
    { 
     public ObservableCollection<object> TabCollection { get; set; } 

     public TabViewModel() 
     { 
      TabCollection = new ObservableCollection<object>(); 
      PopulateTabCollection(); 
     } 

     private void PopulateTabCollection() 
     { 
      TabCollection.Add(new PersonVm() 
      { 
       PersonName = "FirstUserControl", 
       Address = "Address", 
       TabName = "Person Tab" 
      }); 

      TabCollection.Add(new DeptVm() 
      { 
       DeptName = "SecondUserControl", 
       TabName = "DeptTab" 
      }); 
     } 
    } 

    public class PersonVm 
    { 
     public string PersonName { get; set; } 
     public string Address { get; set; } 
     public string TabName { get; set; } 

    } 

    public class DeptVm 
    { 
     public string DeptName { get; set; } 
     public string TabName { get; set; } 
    }