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

Question

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

alt text http://i31.tinypic.com/2z7pctz.png

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) не экземпляр контейнера элемента этого элемента управления, а затем каждый элемент завернутый в экземпляр контейнера элементов. Контейнер item - это класс, например TabItem или ListBoxItem. Контейнер элементов обычно является ContentControl или HeaderedContentControl, и ваш фактический элемент присваивается свойству Content, поэтому вы можете использовать шаблоны и т. Д., Чтобы контролировать, как представлен контент. Вы также можете создать стиль контейнера элементов, используя свойство ItemConttainStyle ItemControl.

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

Answer 2

TabControl будет принимайте свои элементы управления в качестве своих элементов управления только в том случае, если их можно отличить до TabItem, а не с помощью UserControl или SmartFormAreaView и т. д.

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

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

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