为什么在XAML TabControl的选项卡内容区域中显示选项卡标题?

我有一个TabControl,它的ItemsSource绑定到一个可观察的视图(用户控件)集合,每个视图都有一个TabItem作为其根元素.但是,显示时,每个TabItem的内容中都有Header文本,就像UserControl包装器引起冲突一样:

为什么在XAML TabControl的选项卡内容区域中显示选项卡标题?

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中显示为TabItem,我需要更改什么?

这是称为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);
}

解决方法:

对于任何ItemsControl,如果添加到其Items集合中的项目(直接或通过ItemsSource)不是该控件的item容器的实例,则每个项目都包装在item容器的实例中.项容器是诸如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将自动设置为适当的Presenter.

有关各种ItemsControl相关主题的精彩讨论,请参见WPF的blog博士.

上一篇:删除嵌套的TabPage的代码并不总是有效


下一篇:c#-WPF Caliburn.Micro和TabControl-更改选项卡,而不更改模型