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

时间:2011-01-16 11:36:46

标签: c# wpf xaml wpf-controls

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

这适用于按钮,但是如果我想将内容添加到TabItemHeaders的左侧(或右侧),可以绑定到ControlTemplate之外,以便我的TabControl变得更多柔性?

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

然而,当我尝试这个时,我无法将内容放入左右内容区域。

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

alt text

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

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

alt text

我正在寻找的是一种允许标签控件的消费者决定标签旁边区域内容的内容的方法。例如。用户应该能够做到这样的事情:

<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>

3 个答案:

答案 0 :(得分:4)

我尝试了另一种(懒惰)方式,即创建另一个与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>

......你会得到这个:

enter image description here

答案 1 :(得分:3)

根据您需要多少灵活性,有些方法比其他方法更合适,我自己尝试使用DynamicResources,因为它通常不像创建新的用户控件那么麻烦。

以下是如何在Tab-Header左侧添加其他内容的示例:

<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>

希望有所帮助,如果有什么不清楚或者这还不够,请发表评论。

答案 2 :(得分:2)

对于任何感兴趣的人this stackoverflow post完美地回答了我的问题。