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

Question

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

这适用于按钮,但如果我想将内容添加到TabItemHeaders的左侧(或右侧),可以绑定到ControlTemplate之外,以便我的TabControl变得更灵活,该怎么办？

我的想法是继承TabControl并在ControlTemplate中有两个命名部分,并将它们作为新控件的属性公开; CustomTabControl.LeftContentArea和CustomTabControl.RightContentArea分别.每个命名的部分都是一个ContentPresenter,每个ContentPresenters Content属性都由上面提到的属性公开.

但是,当我尝试这个时,我无法将内容放入左右内容区域.

编辑:为了清楚我已经包含了一个图像.红色矩形显示我希望能够放置额外内容的位置.

更新:下面是我到目前为止取得的进展的屏幕截图,希望这将有助于解释我的问题.

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

我正在寻找的是一种允许选项卡控件的消费者决定选项卡旁边区域内容的内容的方法.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，因为它通常比创建新的用户控件更麻烦。

\n\n

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

\n\n

<TabControl>\n\n    <TabControl.Resources>\n        <DataTemplate x:Key="AugmentedTabItem">\n            <StackPanel Orientation="Horizontal">\n                <ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>\n                <ContentPresenter Content="{Binding}"/>\n            </StackPanel>\n        </DataTemplate>     \n    </TabControl.Resources>\n\n    <TabItem Header="\xc3\x9cberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">\n       <TabItem.Resources>\n            <TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>           \n\n        </TabItem.Resources>\n    </TabItem>      \n</TabControl>\n

\n\n

希望有帮助，如果有不清楚的地方或者这还不够，请发表评论。

\n