WPF自定义TabControl样式

WPF自定义TabControl，TabControl美化

XAML代码：

<TabControl x:Class="SunCreate.Common.Controls.TabControlEx"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:SunCreate.Common.Controls"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300" SelectionChanged="TabControl_SelectionChanged" >
    <TabControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
            </ResourceDictionary.MergedDictionaries>
            <!--菜单样式-->
            <ControlTemplate x:Key="menuTemplate" TargetType="ContextMenu">
                <Border Name="bd" Background="#99001133">
                    <ItemsPresenter/>
                </Border>
            </ControlTemplate>
            <ControlTemplate x:Key="menuSeperatorTemplate" TargetType="Separator">
                <Border Background="#6fff">
                </Border>
            </ControlTemplate>
            <ControlTemplate x:Key="menuItemTemplate" TargetType="MenuItem">
                <Border Name="bd" Height="30" Background="Transparent">
                    <StackPanel Orientation="Horizontal">
                        <Image x:Name="img" Stretch="None" Margin="10,0,10,0" Source="/SunCreate.Common.Controls;Component/Images/Controls/二级菜单左箭头.png"></Image>
                        <TextBlock x:Name="tb" Margin="0,0,10,0" Foreground="#fff" VerticalAlignment="Center" Text="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="bd" Property="Background" Value="#99001133" />
                        <Setter TargetName="tb" Property="Foreground" Value="#ff5e5e" />
                        <Setter TargetName="tb" Property="Margin" Value="0,0,9,0" />
                        <Setter TargetName="img" Property="Source" Value="/SunCreate.Common.Controls;Component/Images/Controls/左箭头_选中.png"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ResourceDictionary>
    </TabControl.Resources>
    <TabControl.Template>
        <ControlTemplate TargetType="TabControl" >
            <ControlTemplate.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid x:Name="gridTabItem" Tag="{Binding ElementName=tabCloseBtn}" HorizontalAlignment="Center" MouseLeftButtonDown="tabItem_MouseLeftButtonDown" MouseRightButtonUp="tabItem_MouseRightButtonUp" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                        <ColumnDefinition Width="16"></ColumnDefinition>
                                        <ColumnDefinition></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Path x:Name="pathLeft" Height="4" Width="5" Data="M 0,4 L 5,4 5,0 C 5,0 5,4 0,4 Z" Fill="#096691" StrokeThickness="0" VerticalAlignment="Bottom" Visibility="Collapsed" SnapsToDevicePixels="True" >
                                    </Path>
                                    <Path x:Name="pathRight" Height="4" Width="5" Data="M 0,0 L 0,4 5,4 C 5,4 0,4 0,0 Z" Grid.Column="3" Fill="#096691" StrokeThickness="0" VerticalAlignment="Bottom" Visibility="Collapsed" SnapsToDevicePixels="True" >
                                    </Path>
                                    <Border x:Name="bdText" Grid.Column="1" Margin="0 0 0 0" Background="#096691" CornerRadius="3 0 0 0" SnapsToDevicePixels="True" >
                                        <TextBlock x:Name="txt" Margin="15 0 10 0" FontSize="12" Foreground="#fff" FontFamily="微软雅黑,黑体" Text="{TemplateBinding Header}" VerticalAlignment="Center"></TextBlock>
                                    </Border>
                                    <Border x:Name="bdBtn" Grid.Column="2" Margin="0 0 0 0" Background="#096691" CornerRadius="0 3 0 0" SnapsToDevicePixels="True" >
                                    </Border>
                                    <Button x:Name="btnTabItemClose" Grid.Column="2" Width="7" Height="7" HorizontalAlignment="Right" Click="btnTabItemClose_Click" VerticalAlignment="Top"  Margin="0,5,5,0">
                                        <Button.Template>
                                            <ControlTemplate TargetType="{x:Type Button}">
                                                <Border Background="Transparent">
                                                    <Image Stretch="Fill" x:Name="imgTabClose" Source="/SunCreate.Common.Controls;Component/Images/Controls/菜单关闭.png" ></Image>
                                                </Border>
                                                <ControlTemplate.Triggers>
                                                    <Trigger Property="IsPressed" Value="true">
                                                        <Setter TargetName="imgTabClose"  Property="Margin" Value="1"></Setter>
                                                    </Trigger>
                                                    <Trigger Property="IsMouseOver" Value="true">
                                                        <Setter TargetName="imgTabClose"  Property="Margin" Value="1"></Setter>
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Button.Template>
                                    </Button>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter TargetName="bdText" Property="Background" Value="#012f3f"></Setter>
                                        <Setter TargetName="bdBtn" Property="Background" Value="#012f3f"></Setter>
                                        <Setter TargetName="pathLeft" Property="Fill" Value="#012f3f"></Setter>
                                        <Setter TargetName="pathRight" Property="Fill" Value="#012f3f"></Setter>
                                        <Setter TargetName="pathLeft" Property="Visibility" Value="Visible"></Setter>
                                        <Setter TargetName="pathRight" Property="Visibility" Value="Visible"></Setter>
                                        <Setter TargetName="gridTabItem" Property="Margin" Value="0 0 -8 0"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="false">
                                        <Setter TargetName="gridTabItem" Property="Margin" Value="5 0 -3 0"></Setter>
                                        <Setter TargetName="txt" Property="Foreground" Value="#78a7c1"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter TargetName="txt" Property="Foreground" Value="#f2f5f7"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ControlTemplate.Resources>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="26"></RowDefinition>
                    <RowDefinition Height="1*"></RowDefinition>
                </Grid.RowDefinitions>
                <Border>
                    <StackPanel MinWidth="{TemplateBinding Property=ActualWidth}" Orientation="Horizontal" Margin="2,0,0,0" IsItemsHost="True"></StackPanel>
                </Border>
                <Border Grid.Row="1" Background="#012f3f" CornerRadius="2" >
                    <ContentPresenter  Content="{TemplateBinding Property=SelectedContent }">
                    </ContentPresenter>
                </Border>
            </Grid>
        </ControlTemplate>
    </TabControl.Template>
    <TabControl.ContextMenu>
        <ContextMenu Name="menu" Template="{StaticResource menuTemplate}">
            <MenuItem Header="关闭标签" Template="{StaticResource menuItemTemplate}" CommandParameter="0" Click="menuItemClick"></MenuItem>
            <Separator Height="1" Template="{StaticResource menuSeperatorTemplate}" Margin="1 0 1 0"></Separator>
            <MenuItem Header="关闭其他标签" Template="{StaticResource menuItemTemplate}" CommandParameter="1" Click="menuItemClick"></MenuItem>
            <MenuItem Header="关闭左侧标签" Template="{StaticResource menuItemTemplate}" CommandParameter="2" Click="menuItemClick"></MenuItem>
            <MenuItem Header="关闭右侧标签" Template="{StaticResource menuItemTemplate}" CommandParameter="3" Click="menuItemClick"></MenuItem>
        </ContextMenu>
    </TabControl.ContextMenu>
</TabControl>

C#代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace SunCreate.Common.Controls
{
    /// <summary>
    /// TabControl控件封装
    /// </summary>
    public partial class TabControlEx : TabControl
    {
        /// <summary>
        /// TabItem右键菜单源
        /// </summary>
        private TabItem _contextMenuSource;

        public TabControlEx()
        {
            InitializeComponent();
        }

        private void tabItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

        }

        private void tabItem_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            _contextMenuSource = (sender as Grid).TemplatedParent as TabItem;
            this.menu.PlacementTarget = sender as Grid;
            this.menu.Placement = PlacementMode.MousePoint;
            this.menu.IsOpen = true;
        }

        #region TabItem右键菜单点击事件
        private void menuItemClick(object sender, RoutedEventArgs e)
        {
            MenuItem btn = e.Source as MenuItem;
            int data = Convert.ToInt32(btn.CommandParameter.ToString());

            if (_contextMenuSource != null)
            {
                List<TabItem> tabItemList = new List<TabItem>();
                if (data == )
                {
                    tabItemList.Add(_contextMenuSource);
                }
                if (data == )
                {
                    for (int i = ; i < this.Items.Count; i++)
                    {
                        TabItem tabItem = this.Items[i] as TabItem;
                        if (tabItem != _contextMenuSource)
                        {
                            tabItemList.Add(tabItem);
                        }
                    }
                }
                if (data == )
                {
                    for (int i = ; i < this.Items.Count; i++)
                    {
                        TabItem tabItem = this.Items[i] as TabItem;
                        if (tabItem != _contextMenuSource)
                        {
                            tabItemList.Add(tabItem);
                        }
                        else
                        {
                            break;
                        }
                    }
                }
                if (data == )
                {
                    for (int i = this.Items.Count - ; i >= ; i--)
                    {
                        TabItem tabItem = this.Items[i] as TabItem;
                        if (tabItem != _contextMenuSource)
                        {
                            tabItemList.Add(tabItem);
                        }
                        else
                        {
                            break;
                        }
                    }
                }
                foreach (TabItem tabItem in tabItemList)
                {
                    CloseTabItem(tabItem);
                }
            }
        }
        #endregion

        private void btnTabItemClose_Click(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;
            var tmplParent = (btn.Parent as Grid).TemplatedParent;
            var tabItem = tmplParent as TabItem;
            CloseTabItem(tabItem);
        }

        #region 关闭TabItem
        /// <summary>
        /// 关闭TabItem
        /// </summary>
        private void CloseTabItem(TabItem tabItem)
        {
            if (tabItem.Content is WorkSpaceContent)
            {
                var content = tabItem.Content as WorkSpaceContent;
                if (content != null)
                {
                    content.Disposed();
                }
                tabItem.Content = null;
                content = null;
            }
            this.Items.Remove(tabItem);
        }
        #endregion

        private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (TabItem tabItem in e.RemovedItems)
            {
                Panel.SetZIndex(tabItem, );
            }
            foreach (TabItem tabItem in e.AddedItems)
            {
                Panel.SetZIndex(tabItem, );
            }
        }

    }
}

效果图：