WPF中定义TabItem的可选区域(特别是当使用Label来呈现Header时)

1. 如上图，所示，此时当鼠标移入蓝色框内除文字部分，整个TabItem是没反应的

经过查看代码可以看到：

将图标中的VerticalAlignment="Center"和HorizontalAlignment="Center"删掉后，就能达到如下效果：

TabItem的可选区域明显恢复到正常情况。

完整的代码如下：

1. MainWindow.xaml

 <Window x:Class="TabItemDemo20160329.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="350" Width="525">
     <Grid>
         <TabControl TabStripPlacement="Left">
             <TabItem Header="第一项"></TabItem>
             <TabItem Header="第二项"></TabItem>
             <TabItem Header="第三项"></TabItem>
             <TabItem Header="第四项"></TabItem>
             <TabItem Header="第五项"></TabItem>
             <TabItem Header="第六项"></TabItem>
         </TabControl>
     </Grid>
 </Window>

2. MainWindow.xaml.cs ,该文件其实就是默认系统生成的

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Data;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;

 namespace TabItemDemo20160329
 {
     /// <summary>
     /// Interaction logic for MainWindow.xaml
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
         }
     }
 }

3. TabItemStyle.xaml 样式文件：

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Style TargetType="{x:Type TabItem}">
         <Setter Property="Width" Value="200"/>
         <Setter Property="Height" Value="50"/>
         <Setter Property="Cursor" Value="Hand"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type TabItem}">
                     <Grid SnapsToDevicePixels="true" Background="{x:Null}" x:Name="tabItemGrid" Cursor="Hand">
                         <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="43*"/>
                                 <ColumnDefinition Width="157*"/>
                             </Grid.ColumnDefinitions>
                             <Border x:Name="border" BorderBrush="{x:Null}"   Background="{TemplateBinding Background}">
                                 <Border.RenderTransform>
                                     <TransformGroup>
                                         <ScaleTransform/>
                                         <SkewTransform/>
                                         <RotateTransform/>
                                         <TranslateTransform/>
                                     </TransformGroup>
                                 </Border.RenderTransform>
                             </Border>

                             <Label x:Name="lbl" Foreground="White"  Grid.Column="1" FontSize="16" FontFamily="Tomaha" Padding="0">
                                 <Label.Content>
                                     <TextBlock Margin="0,0,5,0" Text="{TemplateBinding Header}" TextWrapping="Wrap"/>
                                 </Label.Content>
                             </Label>
                             <!--<Label x:Name="lbl" Grid.Column="1" Content="{TemplateBinding Header}"/>-->
                         </Grid>
                     </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="IsMouseOver" Value="true">
                             <Setter TargetName="lbl" Property="Background" Value="Red"/>
                         </Trigger>
                         <Trigger Property="IsSelected" Value="true">
                             <Setter TargetName="lbl" Property="Background" Value="Green"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </ResourceDictionary>

4.App.xaml 配置文件，注意是将TabItem.xaml文件引入到App中：

 <Application x:Class="TabItemDemo20160329.App"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              StartupUri="MainWindow.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="TabItemStyle.xaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
 </Application>