WPF TabControl的好看樣式

注意：如下兩種樣式暫時只支持TabStripPlacement=「Top」，也就是標籤在上方的效果

第一種：

效果如圖：

樣式代碼：

<Style x:Key="TabItemLineStyle"
               TargetType="{x:Type TabItem}">
            <Setter Property="Header"
                    Value="{Binding Name}" />
            <Setter Property="FocusVisualStyle"
                    Value="{x:Null}" />
            <Setter Property="Foreground"
                    Value="#818181" />
            <Setter Property="FontSize"
                    Value="16" />
            <Setter Property="Padding"
                    Value="5,3,5,3" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
            <Setter Property="VerticalContentAlignment"
                    Value="Stretch" />
            <Setter Property="SnapsToDevicePixels"
                    Value="True" />
            <Setter Property="UseLayoutRounding"
                    Value="True" />
            <Setter Property="Margin"
                    Value="0" />
            <Setter Property="BorderThickness"
                    Value="0,0,0,2" />
            <Setter Property="Background"
                    Value="#FFFFFF" />
            <Setter Property="UseLayoutRounding"
                    Value="True" />
            <Setter Property="BorderBrush"
                    Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Margin="{TemplateBinding Margin}"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
                            <ContentPresenter x:Name="contentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{Binding HorizontalContentAlignment,
                                                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              VerticalAlignment="{Binding VerticalContentAlignment,
                                                                      RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              ContentSource="Header"
                                              Focusable="False"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                               Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />

                                </MultiDataTrigger.Conditions>
                                <Setter TargetName="border"
                                        Property="Cursor"
                                        Value="Hand" />
                                <Setter Property="BorderBrush"
                                        Value="#007ACC" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"
                                               Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />

                                </MultiDataTrigger.Conditions>
                                <Setter Property="Panel.ZIndex"
                                        Value="1" />
                                <Setter Property="BorderBrush"
                                        Value="#007ACC" />
                                <Setter Property="Foreground"
                                        Value="#007ACC" />
                                <Setter Property="Background"
                                        Value="#FFFFFF" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"
                                               Value="false" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />
                                </MultiDataTrigger.Conditions>
                                <Setter TargetName="contentPresenter"
                                        Property="Opacity"
                                        Value="0.56" />
                            </MultiDataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

第二種：

效果如圖：

<Style x:Key="TabItemCardStyle"
               TargetType="{x:Type TabItem}">
            <Setter Property="Header"
                    Value="{Binding Name}" />
            <Setter Property="FocusVisualStyle"
                    Value="{x:Null}" />
            <Setter Property="Foreground"
                    Value="#818181" />
            <Setter Property="FontSize"
                    Value="16" />
            <Setter Property="Padding"
                    Value="5,3,5,3" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
            <Setter Property="VerticalContentAlignment"
                    Value="Stretch" />
            <Setter Property="SnapsToDevicePixels"
                    Value="True" />
            <Setter Property="UseLayoutRounding"
                    Value="True" />
            <Setter Property="BorderThickness"
                    Value="0,0,0,2" />
            <Setter Property="Background"
                    Value="#FFFFFF" />
            <Setter Property="BorderBrush"
                    Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Margin="{TemplateBinding Margin}"
                                Padding="{TemplateBinding Padding}"
                                CornerRadius="3,3,0,0"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
                            <ContentPresenter x:Name="contentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{Binding HorizontalContentAlignment,
                                                                        RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              VerticalAlignment="{Binding VerticalContentAlignment,
                                                                      RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                              ContentSource="Header"
                                              Focusable="False"
                                              RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}"
                                               Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />
                                </MultiDataTrigger.Conditions>
                                <Setter TargetName="border"
                                        Property="Cursor"
                                        Value="Hand" />
                                <Setter Property="Background"
                                        Value="#FFFFFF" />
                                <Setter Property="BorderBrush"
                                        Value="#007ACC" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"
                                               Value="true" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />

                                </MultiDataTrigger.Conditions>
                                <Setter Property="Panel.ZIndex"
                                        Value="1" />
                                <Setter Property="BorderBrush"
                                        Value="#D7DDE4" />
                                <Setter Property="Background"
                                        Value="#FFFFFF" />
                                <Setter Property="BorderThickness"
                                        Value="1,1,1,0" />
                                <Setter Property="Foreground"
                                        Value="#64778D" />
                                <Setter Property="Margin"
                                        Value="0,0,5,-1.3" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}"
                                               Value="False" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />

                                </MultiDataTrigger.Conditions>
                                <Setter Property="Panel.ZIndex"
                                        Value="1" />
                                <Setter Property="BorderBrush"
                                        Value="#D7DDE4" />
                                <Setter Property="BorderThickness"
                                        Value="1,1,1,0" />
                                <Setter Property="Background"
                                        Value="#F5F7F9" />
                                <Setter Property="Foreground"
                                        Value="#64778D" />
                                <Setter Property="Margin"
                                        Value="0,0,5,0" />
                            </MultiDataTrigger>
                            <MultiDataTrigger>
                                <MultiDataTrigger.Conditions>
                                    <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}"
                                               Value="false" />
                                    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
                                               Value="Top" />
                                </MultiDataTrigger.Conditions>
                                <Setter TargetName="contentPresenter"
                                        Property="Opacity"
                                        Value="0.56" />
                            </MultiDataTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>