更改选项卡控件外观 [英] Changing tab control appearance

问题描述

我正在尝试自定义WPF标签控件的外观。 我在网上遇到过几个例子（ 1 ，

2 ）和MSDN的
TabControl样式和模板页面。 我甚至通过使用
中描述的'转储默认值'例程来转出Tab控件的默认模板 Petzold的MSDN文章 然后将该模板应用于标签控件。   

I'm trying to customize the appearance of the WPF tab control.  There are several examples I've run across on the web (1, 2) and MSDN's TabControl style and template page.  I even dumped out the Tab control's default template by using the 'Dumping the Defaults' routine described in Petzold's MSDN article and then apply that template to a tab control.   

以上所有工作都可以自定义标签控件的外观。 但是，在VS WPF设计器中应用模板时，所有都会遇到一些奇怪的行为。 这是我用于测试的XAML骨架：

All of the above work to customize the appearance of the tab control.  However, all suffer from some strange behaviour when the template is applied in VS WPF designer.  Here's the XAML skeleton I used for my testing:

<Window x:Class="TabControlTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow" Height="350" Width="525">
  <Grid>
    <TabControl Height="100" HorizontalAlignment="Left" Margin="141,109,0,0" Name="tabControl1" VerticalAlignment="Top" Width="200" TabStripPlacement="Top" IsEnabled="True">
      <TabControl.Style>
        <Style TargetType="{x:Type TabControl}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TabControl}">
                <!-- different templates go in here -->
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </TabControl.Style>


      <TabItem Header="tabItem1" Name="tabItem1">
        <Grid />
      </TabItem>
      <TabItem Header="tabItem2">
        <Button Content="Button" Height="23" Name="button1" Width="75" />
      </TabItem>
    </TabControl>
  </Grid>
</Window>

推荐答案

Hi Notre，

Hi Notre,

这是一个与VS WPF设计器相关的问题，我将把它移到 Visual Studio WPF Designer 论坛。


另一方面，我在这里分享默认的TabControl样式/模板（我从Blend复制）：

It is a VS WPF Designer related question, I will move it to Visual Studio WPF Designer forum.
On the other hand, I share the default TabControl style/template here (I copied from Blend):

<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 <Setter Property="Padding" Value="4,4,4,4"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
 <Setter Property="Background" Value="#F9F9F9"/>
 <Setter Property="HorizontalContentAlignment" Value="Center"/>
 <Setter Property="VerticalContentAlignment" Value="Center"/>
 <Setter Property="Template">
  <Setter.Value>
   <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>
     <TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
     <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>
  </Setter.Value>
 </Setter>
</Style>

这篇关于更改选项卡控件外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！