如何向 WPF TabControl 添加额外内容？

Question

我有一个用于 WPF TabControl 的自定义 ControlTemplate，它将按钮添加到 TabItem 标题的左侧和右侧。目前，这不是命名部分，因为按钮命令绑定在 ControlTemplates XAML 中，不需要在 ControlTemplate 外部公开。

这对于按钮来说效果很好，但是如果我想将内容添加到可以绑定在 ControlTemplate 外部的 TabItemHeaders 的左侧（或右侧），以便我的 TabControl 变得更加灵活，该怎么办？

我的想法是子类化 TabControl 并在 ControlTemplate 中拥有两个命名部分，并将它们公开为新控件的属性；分别是CustomTabControl.LeftContentArea和CustomTabControl.RightContentArea。每个命名部分都是一个 ContentPresenter，每个 ContentPresenters 内容属性都由上面命名的属性公开。

但是，当我尝试此操作时，我无法将内容放入左侧和右侧内容区域。

编辑：为了清楚起见，我添加了一张图片。红色矩形显示我希望能够放置额外内容的位置。

更新：下面是我迄今为止所取得的进展的屏幕截图，希望这将有助于解释我的问题多一点。

该屏幕截图显示了我的自定义选项卡控件，其中包含两个空白选项卡和三个按钮，当前位于 TabItem 标题区域的右侧。这些按钮当前在 TabControls 自定义 ControlTemplate IE 中定义，ControlTemplates 网格中有一个 ColumnDefinition，其中包含StackPanel 包含 3 个按钮。

我正在寻找一种方法，允许选项卡控件的使用者决定接下来该区域中的内容到选项卡。 EG 用户应该能够执行以下操作：

<local:CustomTabControl>
    <local:CustomTabControl.RightContentArea>
        <!-- This can be changed to ANY content that the user wants -->
        <StackPanel Orientation="Horizontal">
            <Button Content="Test" />
            <Button Content="Test" />
            <Button Content="Test" />
        </StackPanel>
    </local:CustomTabControl.RightContentArea>

    <!-- TabItems are added as normal -->
    <TabItem Header="Tab One" />
    <TabItem Header="Tab Two" />

</local:CustomTabControl>

Answer 1

我尝试了一种不同的（懒惰的）方法，即创建另一个与 TabControl 占据相同空间的网格，即两者都在 Grid.Row=0 中。我已将网格高度绑定到第一个选项卡的高度，因此如果选项卡更改高度，其他控件将保持居中。我在窗口上设置了 MinWidth，以便控件不会与选项卡重叠。

将此代码粘贴到新的 WPF 窗口中...

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TabControl Grid.Row="0" x:Name="tabControl">
        <TabItem x:Name="tabItem" Header="TabItem" Height="50">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
        <TabItem Header="TabItem">
            <Grid Background="#FFE5E5E5"/>
        </TabItem>
    </TabControl>

    <Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}" 
       VerticalAlignment="Top" Margin="0,2,0,0">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" 
                VerticalAlignment="Center" Margin="20,0">
            <TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16" 
                   Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
            <Button Content="My Button" />
        </StackPanel>
    </Grid>

</Grid>
</Window>

...您将得到：

Answer 2

根据您需要的灵活性，有些方法比其他方法更适合，如果可能的话，我自己尝试使用 DynamicResources，因为它通常比创建新的用户控件更麻烦。

以下是如何在选项卡标题左侧添加其他内容的示例：

<TabControl>

    <TabControl.Resources>
        <DataTemplate x:Key="AugmentedTabItem">
            <StackPanel Orientation="Horizontal">
                <ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
                <ContentPresenter Content="{Binding}"/>
            </StackPanel>
        </DataTemplate>     
    </TabControl.Resources>

    <TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
       <TabItem.Resources>
            <TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>           

        </TabItem.Resources>
    </TabItem>      
</TabControl>

希望有所帮助，如果有些内容不清楚或这还不够，请发表评论。