TabControl с однострочной TabPanel и панелью переполнения

Я хочу изменить функциональность WPF TabControl, чтобы только порождать одну строку, и создать всплывающее окно переполнения для каждого последующего элемента (например, панель инструментов / ToolBarOverflowPanel). Таким же образом вкладки отображаются в VisualStudio на данный момент.

Вот что я получил: 

<Style TargetType="TabControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid KeyboardNavigation.TabNavigation="Local">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <controls:OneLineTabPanel x:Name="HeaderPanel"
                                              Grid.Row="0"
                                              Panel.ZIndex="1"
                                              Margin="0"
                                              KeyboardNavigation.TabIndex="1"
                                              Background="Transparent">
                    </controls:OneLineTabPanel>
                 ......

Теперь я попытался изменить панель TabPanel (которая используется для отображения заголовков), но я не могу изменить ее шаблон (так как он происходит от TabPanel). Поэтому я пытаюсь извлечь из какого-то другого контроля, но тогда я могу не вижу вообще никаких предметов.

Как заставить мой собственный ItemsControl работать с TabControl?

2 4
wpf tabcontrol

2 ответа:

Вам нужно переопределить весь шаблон TabControl.
К счастью, легко извлечь копию шаблона с помощью Visual Studio (щелкните правой кнопкой мыши в окне структуры документа на элементе TabControl - > редактировать шаблон - > редактировать копию).

по умолчанию шаблон TabControl HeaderPanel определяется следующим образом: 

<TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>

Основная идея заключается в привязке TabControl.Элементы не к панели управления, установив IsItemsHost= "true", а к совершенно другому типу управления. Например, привязать на панель инструментов, которая имеет функцию кнопки переполнения из коробки: 

<ToolBar x:Name="HeaderPanel" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Items}"/>

Вот полный пример шаблона TabControl с панелью инструментов в качестве панели заголовка: 

<TabControl>
    <TabControl.Template>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="ColumnDefinition0"/>
                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                    <RowDefinition x:Name="RowDefinition1" Height="*"/>
                </Grid.RowDefinitions>

                <!--this will do the trick!!!-->
                <ToolBar x:Name="HeaderPanel" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Items}"/>

                <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TabStripPlacement" Value="Bottom">
                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                    <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
                </Trigger>
                <Trigger Property="TabStripPlacement" Value="Left">
                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                    <Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
                </Trigger>
                <Trigger Property="TabStripPlacement" Value="Right">
                    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
                    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
                    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
                    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
                    <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                    <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                    <Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </TabControl.Template>
</TabControl>
5

Эта статья дает подробное объяснение того, как этого достичь: http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx

2