WPF Tips-TabContorl样式示例

MainWindow.xaml

<Grid x:Name="Content" DockPanel.Dock="Top" Margin="5,5,5,5">
                <TabControl x:Name="TabControl_Main" SelectionChanged="TabControl_Main_SelectionChanged"
                    Width="{Binding ActualWidth, ElementName=Content, Mode=OneWay}" 
                            Height="{Binding ActualHeight, ElementName=Content, Mode=OneWay}"  
                            BorderThickness="0" FontFamily="Microsoft YaHei" FontSize="16" Padding="0">
                    <TabItem Header="任务管理" Style="{StaticResource tabItemStyle}" Width="100" Height="60" Margin="0">
                        <Grid Background="#FFE5E5E5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="45"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ToolBarTray Grid.Row="0" Background="Transparent"  IsLocked="True">
                                <ToolBar Background="Transparent">
                                    <Button x:Name="btnNewTask" Height="40" Padding="5" Background="Transparent" ToolTip="新建任务" Margin="5,0,5,5" Click="btnNewTask_Click">
                                        <StackPanel Orientation="Horizontal" Margin="0">
                                            <Image Source="new.png"/>
                                            <Label FontSize="12" Foreground="#FF006699" FontFamily="Microsoft YaHei">新建任务</Label>
                                        </StackPanel>
                                    </Button>
                                </ToolBar>                                
                            </ToolBarTray>
                            <Separator Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="5,0,5,0" Height="0.8"/>
                            <TabControl x:Name="TabControl_Data" Grid.Row="1" FontFamily="Microsoft YaHei" FontSize="14" BorderThickness="0" 
                                        SelectionChanged="TabControl_Data_SelectionChanged">
                                <TabItem Header="正在运行" Width="200" Height="30" Margin="0" Style="{StaticResource tabItemStyle2}">                                    
                                </TabItem>
                            </TabControl>
                        </Grid>
                    </TabItem>
                </TabControl>
            </Grid>

 

App.xaml

<Style x:Key="tabItemStyle" TargetType="TabItem">
            <Setter Property="Padding" Value="10,5,10,15"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="0">
                                <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                ContentSource="Header" Margin="12,2,12,2"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#FF006699"></Setter>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="#FF006699"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="tabItemStyle2" TargetType="TabItem">
            <Setter Property="Foreground" Value="#FF006699"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border Name="Border" Background="Transparent" 
                                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,0">
                                <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" 
                                                  HorizontalAlignment="Center" ContentSource="Header"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="Transparent"></Setter>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="White"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#FF498DAF"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Foreground" Value="#FF498DAF"></Setter>
                    <Setter Property="FontWeight" Value="Bold"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

 

结果：