WPF TabControlでViewModelを有効にするTabItemコンテンツの作成

Question

実行時にTabItemを動的に作成するTabControlを作成したいとします。 TabItemはViewModelに関連付けられている必要があります。このビューモデルは、TabItem内でコンテンツを作成する方法を知っているインタフェースをサポートしています。基本的に、TabItemは実行時にビューモデルによって決定されたコンテンツコントロールを取り込むことができます。私は、TabControl.ContentTemplateまたはControlTemplateとItemTemplateを使用して異なるアプローチを試みましたが、どれも機能しません。テンプレートのアプローチでは、デザイン時に自身をレンダリングできるように、TabItem内のコンテンツの種類を知る必要があるようです。関連付けられたデータコンテキスト内のプロパティへのバインドは正常に機能しますが、コンテンツコントロールは表示されません。 新しいクラスMyTabItem：TabItemを派生させてカスタムコンテンツを作成し、それをMyTabItemのコンテンツに関連付けることができます。 ビューモデルでTabItemのコンテンツを作成できるようにする一般的なアプローチが必要です。

Answer 1

TabControlに動的に追加されるタイプごとにDataTemplateを指定できますか？もしそうなら、あなたのためにこの作品が好きですか？

（TabControl我々はどちらも指定されていないからである。これは）両方に同じDataTemplateタブヘッダのItemTemplate（テンプレート）と選択したタブのコンテンツ内に表示ContentTemplate（テンプレートを見つけることに注意してください、だから、WPFは単に木を歩いて、私たちのGrid.Resourcesから同じテンプレートを探しているだけです。それぞれ異なるテンプレートを使用したい場合は、ItemTemplateに使用するテンプレートを明示的に指定するか、DataTemplateSelector ）

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Grid.Resources> 
     <DataTemplate DataType="{x:Type local:DescribableOne}"> 
      <Grid Background="Red"> 
       <TextBlock Text="{Binding Description}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type local:DescribableTwo}"> 
      <Grid Background="Blue"> 
       <TextBlock Text="{Binding Description}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
      </Grid> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type local:DescribableThree}"> 
      <Grid Background="Green"> 
       <TextBlock Text="{Binding Description}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
      </Grid> 
     </DataTemplate> 
    </Grid.Resources> 

    <StackPanel Orientation="Horizontal"> 
     <Button Command="{Binding AddOne}">Add One</Button> 
     <Button Command="{Binding AddTwo}">Add Two</Button> 
     <Button Command="{Binding AddThree}">Add Three</Button> 
    </StackPanel> 

    <TabControl Grid.Row="1" ItemsSource="{Binding DynamicallyGeneratedTabs}"/> 

</Grid> 

そして、ビューモデル：

public class TabControlViewModel 
{ 
    public TabControlViewModel() 
    { 
     AddOne = new RelayCommand(DoAddOne); 
     AddTwo = new RelayCommand(DoAddTwo); 
     AddThree = new RelayCommand(DoAddThree); 
     DynamicallyGeneratedTabs = new ObservableCollection<IDescribable>(); 
    } 

    public ICommand AddOne { get; } 
    public ICommand AddTwo { get; } 
    public ICommand AddThree { get; } 

    public ObservableCollection<IDescribable> DynamicallyGeneratedTabs { get; } 

    private void DoAddOne() 
    { 
     DynamicallyGeneratedTabs.Add(new DescribableOne()); 
    } 

    private void DoAddTwo() 
    { 
     DynamicallyGeneratedTabs.Add(new DescribableTwo()); 
    } 

    private void DoAddThree() 
    { 
     DynamicallyGeneratedTabs.Add(new DescribableThree()); 
    } 
} 

public interface IDescribable 
{ 
    string Description { get; } 
} 

public class DescribableOne : IDescribable 
{ 
    public DescribableOne() 
    { 
     Description = "One"; 
    } 

    public string Description { get; } 
} 

public class DescribableTwo : IDescribable 
{ 
    public DescribableTwo() 
    { 
     Description = "Two"; 
    } 

    public string Description { get; } 
} 

public class DescribableThree : IDescribable 
{ 
    public DescribableThree() 
    { 
     Description = "Three"; 
    } 

    public string Description { get; } 
}