TabControl单线TabPanel和溢出面板

Question

我想改变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一起使用？

Answer 1

你需要重写的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"/> 

的主要思想是通过设置IsItemsHost =“真”不结合TabControl.Items到面板控制，但完全另一控制类型。 例如，结合到工具栏，其具有开箱溢出按钮功能：

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

Answer 2

本文给出如何实现它的详细解释：http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx