Почему заголовки вкладок отображаются в области содержимого вкладок в XAML TabControl?

Question

У меня есть TabControl , у которого ItemsSource связан с наблюдаемой коллекцией представлений (UserControls), каждое из которых имеет в качестве корневого элемента TabItem . Однако при отображении текст Header содержится в содержимом каждого элемента TabItem, как будто оболочка UserControl вызывает конфликты:

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>

Что мне нужно изменить, чтобы TabItems отображались как TabItems внутри TabControl?

Вот представления TabItem, которые называются SmartFormAreaView.xaml:

<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, поэтому вы можете использовать шаблоны и т. Д. Для управления представлением содержимого. Вы также можете стилизовать сам контейнер элемента, используя свойство ItemCononterStyleContainerStyle.

В этом конкретном случае вы должны связать 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. Вам также следует удалить TabItem из определения SmartFormAreaView. DataContext каждого просмотра будет автоматически установлен для соответствующего докладчика.

См. Блог доктора WPF для отличного обсуждения различных тем, связанных с ItemsControl.

Answer 2

TabControl будет принимать ваши элементы управления в качестве своих элементов управления, только если они могут быть преобразованы в TabItem, а не в UserControl или SmartFormAreaView и т. Д.

Таким образом, вы либо заполняете регулярное TabItems визуальным деревом, либо подклассом TabItems, либо подклассом TabControl, чтобы переопределить его IsItemItsOwnContainerOverride метод, чтобы принять ваш тип в качестве контейнер.

Метод должен выглядеть следующим образом:

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