TabControl样式编写

 在实际项目的UI设计中，经常会使用到TabControl，比如标签式浏览器、选项卡设置等等。 

 根据不同的需求，需要TabControl展示不同的样式，这里我们来学习下TabControl。

 来看下TabControl 属性

 TabStripPlacement 控制TabItem Header的方向，如图：

 

 

我们来看下TabControl的继承关系：

 TabControl-Seletor-ItemControl

 

这样就很清晰了，TabControl和ListBox一样继承自Seletor，这样我们就可以通过ControlTemplate和DataTemplate来编写TabControl和TabItem的显示样式。

例子：

 

 1  < Window  x:Class ="WpfApplication2.MainWindow"
 2          xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3          xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
 4          xmlns:local ="clr-namespace:WpfApplication2"
 5          Title ="MainWindow"  Height ="300"  Width ="300" >
 6      < Window.Resources >
 7          < Style  TargetType =" {x:Type local:CustomItem} " >
 8              < Setter  Property ="Padding"  Value ="0"   />
 9              < Setter  Property ="HeaderTemplate" >
10                  < Setter.Value >
11                      < DataTemplate >
12                          < ContentPresenter  Content =" {TemplateBinding Property=ContentControl.Content} " >
13                              < ContentPresenter.LayoutTransform >
14                                  < RotateTransform  Angle ="-90"   />
15                              </ ContentPresenter.LayoutTransform >
16                          </ ContentPresenter >
17                      </ DataTemplate >
18                  </ Setter.Value >
19              </ Setter >
20              < Setter  Property ="Template" >
21                  < Setter.Value >
22                      < ControlTemplate  TargetType =" {x:Type local:CustomItem} " >
23                          < Border  x:Name ="bd1"  CornerRadius ="30"  BorderThickness ="2"  BorderBrush ="Blue" >
24                              < Border.Background >
25                                  < ImageBrush  ImageSource =" {Binding Path=Icon, RelativeSource={RelativeSource TemplatedParent}} " ></ ImageBrush >
26                              </ Border.Background >
27                              < Grid  x:Name ="grd" >
28                                  < ContentPresenter  ContentSource ="Header"  HorizontalAlignment ="Center"
29                                            Margin ="10,2,10,2"  VerticalAlignment ="Center" />
30                              </ Grid >
31                          </ Border >
32                          < ControlTemplate.Triggers >
33                              < Trigger  Property ="IsMouseOver"  Value ="True"  SourceName ="grd" >
34                                  < Setter  Property ="BorderBrush"  Value ="Yellow"  TargetName ="bd1" />
35                              </ Trigger >
36                              < Trigger  Property ="Selector.IsSelected"  Value ="True" >
37                                  < Setter  Property ="BorderBrush"  TargetName ="bd1"  Value ="Red" ></ Setter >
38                              </ Trigger >
39                          </ ControlTemplate.Triggers >
40                      </ ControlTemplate >
41                  </ Setter.Value >
42              </ Setter >
43          </ Style >
44      </ Window.Resources >
45      < DockPanel >
46          < TabControl  TabStripPlacement ="Left" >
47              < local:CustomItem  Header ="Tab1"  Width ="80"  Height ="80"  Icon ="Resources/greentouch2.jpg" >
48                  < Label  Content ="adadada" ></ Label >
49              </ local:CustomItem >
50              < local:CustomItem  Header ="Tab2"  Width ="80"  Height ="80"  Icon ="Resources/background2.jpg" ></ local:CustomItem >
51          </ TabControl >
52      </ DockPanel >
53  </ Window >