Как добавить дополнительный контент в WPF TabControl?

Question

У меня есть собственный ControlTemplate для WPF TabControl, который добавляет кнопки в левую и правую часть заголовка TabItem.На данный момент это не именованная часть, так как команды кнопок связаны в XAML ControlTemplates и не должны отображаться за пределами ControlTemplate.

Это нормально работает для кнопки, но что, если я хочу добавить содержимое слева (или справа) от TabItemHeaders, которые могут быть связаны вне ControlTemplate, так что мой TabControl становится более гибким?

Моя идея состояла в том, чтобы создать подкласс TabControl и иметьдве именованные части в ControlTemplate и представляют их как свойства нового элемента управления; CustomTabControl.LeftContentArea и CustomTabControl.RightContentArea соответственно.Каждая именованная часть является ContentPresenter, и каждое свойство ContentPresenters доступно для указанных выше свойств.

Однако, когда я попытался это сделать, мне не удалось поместить контент в левую и правую области контента.

Редактировать: просто чтобы прояснить, я включил изображение.Красные прямоугольники показывают, где я хочу разместить дополнительный контент.

Обновление: ниже приведен снимок экрана с прогрессом, которого я добился до сих пор, надеюсь, это поможетобъясните мою проблему немного подробнее.

На снимке экрана показан мой пользовательский элемент управления вкладками с двумя пустыми вкладками и тремя кнопками, которые в настоящее время находятся справа от области заголовка TabItem .Кнопки в настоящее время определены в TabControls custom ControlTemplate IE есть ColumnDefinition в сетке ControlTemplates , которая содержит StackPanel, на котором размещены 3 кнопки.

Мне нужен способ, позволяющий потребителю элемента управления вкладками решать, какой контент находится в области рядом с вкладками.,Например, пользователь должен иметь возможность сделать что-то вроде этого:

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

Надеюсь, что это поможет, если что-то неясно или этого недостаточно, оставьте комментарий.

Answer 3

Для всех, кто интересуется это сообщение stackoverflow прекрасно отвечает на мой вопрос.