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