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>