XAML TabControlのタブのコンテンツ領域にタブヘッダーが表示されるのはなぜですか？

Question

TabControl があり、そのItemsSourceは、 TabItem をルート要素として持つ観察可能なビューのコレクション（UserControls）にバインドされています強い>。ただし、表示されるとき、 UserControl ラッパーが競合を引き起こしているかのように、 Header テキストは各TabItemのコンテンツ内にあります。

TabControlは SmartFormView.xamlにあります：

<UserControl x:Class="TestApp.Views.SmartFormView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel
        Margin="10">
        <TextBlock Text="{Binding Title}"
            FontSize="18"/>
        <TextBlock Text="{Binding Description}"
            FontSize="12"/>

        <TabControl
            Margin="0 10 0 0"
            ItemsSource="{Binding SmartFormAreaViews}"/>
    </StackPanel>
</UserControl>

TabItemがTabControl内でTabItemsとして表示されるように変更する必要があるもの

SmartFormAreaView.xamlというTabItemビューを次に示します。

<UserControl x:Class="TestApp.Views.SmartFormAreaView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TabItem Header="This is the header">
        <StackPanel Margin="10">
            <TextBlock Text="this is the content"/>
        </StackPanel>
    </TabItem>
</UserControl>

そして、ここで各ビューを作成して ObservableCollection にロードします：

var areas = from area in xmlDoc.Descendants("area")
            select area;
foreach (var area in areas)
{
    SmartFormArea smartFormArea = new SmartFormArea();
    smartFormArea.IdCode = area.Attribute("idCode").Value;
    smartFormArea.Title = area.Attribute("title").Value;
    SmartFormAreaPresenter smartFormAreaPresenter = new SmartFormAreaPresenter(smartFormArea);
    SmartFormAreaViews.Add(smartFormAreaPresenter.View as SmartFormAreaView);
}

Answer 1

ItemsControlの場合、Itemsコレクションに（直接またはItemsSourceを介して）追加されたアイテムがそのコントロールのアイテムコンテナーのインスタンスではない場合、各アイテムはアイテムコンテナーのインスタンスにラップされます。アイテムコンテナは、TabItemやListBoxItemなどのクラスです。通常、アイテムコンテナはContentControlまたはHeaderedContentControlであり、実際のアイテムはそのContentプロパティに割り当てられるため、テンプレートなどを使用してコンテンツの表示方法を制御できます。 ItemControlのItemContainerStyleプロパティを使用して、アイテムコンテナー自体のスタイルを設定することもできます。

この特定のケースでは、ItemsSourceをSmartFormAreaPresentersのリストにバインドする必要があります。次に、タブコントロールに次のようなものを使用します。

<TabControl ItemsSource="{Binding SmartFormAreaPresenters}">
  <TabControl.ItemContainerStyle>
    <Style TargetType="{x:Type TabItem}">
      <Setter Property="Header" Value="{Binding HeaderText}" />
    </Style>
  </TabControl.ItemContainerStyle>

  <TabControl.ContentTemplate>
    <DataTemplate DataType="{x:Type local:SmartFormAreaPresenter}">
      <local:SmartFormAreaView />
    </DataTemplate>
  </TabControl.ContentTemplate>
</TabControl>

HeaderTextは、SmartFormAreaPresenterの適切なプロパティです。また、SmartFormAreaView定義からTabItemを削除する必要があります。各ビューのDataContextは、適切なプレゼンターに自動的に設定されます。

優れた議論については、WPF博士のブログをご覧ください。さまざまなItemsControl関連のトピック。

Answer 2

TabControl は、ユーザーコントロールやSmartFormAreaViewなどではなく、 TabItem にキャストできる場合にのみ、コントロールをコントロールとして受け入れます。

したがって、通常の TabItems にビジュアルツリーを入力するか、 TabItems をサブクラス化するか、 TabControl をサブクラス化してその IsItemItsOwnContainerOverride メソッド、タイプをコンテナとして受け入れる。

メソッドは次のようになります。

protected override bool IsItemItsOwnContainerOverride(object item)
{
    return item is YourControlTypeHere || item is TabItem;
}