在實際項目的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 >
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 >