一、前言
程序中经常会用到tabcontrol控件，默认的控件样式很普通。而且样式或功能不一定符合我们的要求。比如：我们需要tabcontrol的标题能够居中、或平均分布；或者我们希望tabcontrol的标题能够进行关闭。要实现这些功能我们需要对tabcontrol的样式进行定义。
二、实现tabcontrol的标题平均分布
默认的tabcontrol标题是使用tabpanel容器包含的。要想实现tabcontrol标题头平均分布，需要把tabpanel替换成uniformgrid；
替换后的tabcontrol样式如下：
<style x:key="tabcontrolstyle" targettype="{x:type tabcontrol}">
<setter property="padding" value="2"/>
<setter property="horizontalcontentalignment" value="center"/>
<setter property="verticalcontentalignment" value="center"/>
<setter property="background" value="white"/>
<setter property="borderbrush" value="#ffacacac"/>
<setter property="borderthickness" value="1"/>
<setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type tabcontrol}">
<grid x:name="templateroot" cliptobounds="true" snapstodevicepixels="true" keyboardnavigation.tabnavigation="local">
<grid.columndefinitions>
<columndefinition x:name="columndefinition0"/>
<columndefinition x:name="columndefinition1" width="0"/>
</grid.columndefinitions>
<grid.rowdefinitions>
<rowdefinition x:name="rowdefinition0" height="auto"/>
<rowdefinition x:name="rowdefinition1" height="*"/>
</grid.rowdefinitions>
<uniformgrid x:name="headerpanel" rows="1" background="transparent" grid.column="0" isitemshost="true" margin="0" grid.row="0" keyboardnavigation.tabindex="1" panel.zindex="1"/>
<line x1="0" x2="{binding actualwidth, relativesource={relativesource self}}" stroke="white" strokethickness="0.1" verticalalignment="bottom" margin="0 0 0 1" snapstodevicepixels="true"/>
<border x:name="contentpanel" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" grid.column="0" keyboardnavigation.directionalnavigation="contained" grid.row="1" keyboardnavigation.tabindex="2" keyboardnavigation.tabnavigation="local">
<contentpresenter x:name="part_selectedcontenthost" contenttemplate="{templatebinding selectedcontenttemplate}" content="{templatebinding selectedcontent}" contentstringformat="{templatebinding selectedcontentstringformat}" contentsource="selectedcontent" margin="0" snapstodevicepixels="{templatebinding snapstodevicepixels}"/>
</border>
</grid>
<controltemplate.triggers>
<trigger property="tabstripplacement" value="bottom">
<setter property="grid.row" targetname="headerpanel" value="1"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="auto"/>
</trigger>
<trigger property="tabstripplacement" value="left">
<setter property="grid.row" targetname="headerpanel" value="0"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="grid.column" targetname="headerpanel" value="0"/>
<setter property="grid.column" targetname="contentpanel" value="1"/>
<setter property="width" targetname="columndefinition0" value="auto"/>
<setter property="width" targetname="columndefinition1" value="*"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="0"/>
</trigger>
<trigger property="tabstripplacement" value="right">
<setter property="grid.row" targetname="headerpanel" value="0"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="grid.column" targetname="headerpanel" value="1"/>
<setter property="grid.column" targetname="contentpanel" value="0"/>
<setter property="width" targetname="columndefinition0" value="*"/>
<setter property="width" targetname="columndefinition1" value="auto"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="0"/>
</trigger>
<trigger property="isenabled" value="false">
<setter property="textelement.foreground" targetname="templateroot" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/>
</trigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
即使这样设置了，tabcontrol的标题还是很丑，这个时候就需要通过设置tabitem来更改标题样式了。
tabitem样式如下：
<style x:key="tabitemstyle" targettype="{x:type tabitem}">
<setter property="foreground" value="white"/>
<setter property="background" value="transparent"/>
<setter property="borderbrush" value="#ffacacac"/>
<setter property="margin" value="0"/>
<setter property="horizontalcontentalignment" value="stretch"/>
<setter property="verticalcontentalignment" value="stretch"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type tabitem}">
<grid x:name="templateroot" snapstodevicepixels="true" background="transparent">
<textblock x:name="txt" visibility="visible" verticalalignment="center" horizontalalignment="center" text="{templatebinding header}" tooltip="{templatebinding header}" foreground="{templatebinding foreground}" texttrimming="characterellipsis" />
</grid>
<controltemplate.triggers>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding ismouseover, relativesource={relativesource self}}" value="true"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="foreground" targetname="txt" value="#fffea1"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="left"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="bottom"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="right"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isselected, relativesource={relativesource self}}" value="true"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="panel.zindex" value="1"/>
<setter property="foreground" targetname="txt" value="#fffea1"/>
</multidatatrigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
至此，样式已经设置完毕，引用示例：
<grid background="#858586">
<tabcontrol style="{staticresource tabcontrolstyle}" width="300" height="200" background="transparent" borderbrush="transparent" borderthickness="0">
<tabitem style="{staticresource tabitemstyle}" cursor="hand" header="音乐电台" height="38" >
<grid background="#33ffffff">
<textblock text="音乐电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</tabitem>
<tabitem style="{staticresource tabitemstyle}" cursor="hand" header="mv电台" height="38" >
<grid background="#33ffffff">
<textblock text="mv电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</tabitem>
</tabcontrol>
</grid>
效果如下：
三、实现tabcontrol标题居中显示（不平均分布）
同理需要更改tabcontrol的样式和tabitem的样式。需要把使用tabpanel作为标题的容器，设置horizontalalignment为center；
tabcontrol的样式如下：
<style x:key="tabcontrolwithunderlinestyle" targettype="{x:type tabcontrol}">
<setter property="padding" value="2"/>
<setter property="horizontalcontentalignment" value="center"/>
<setter property="verticalcontentalignment" value="center"/>
<setter property="background" value="white"/>
<setter property="borderbrush" value="#ffacacac"/>
<setter property="borderthickness" value="1"/>
<setter property="foreground" value="{dynamicresource {x:static systemcolors.controltextbrushkey}}"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type tabcontrol}">
<grid x:name="templateroot" cliptobounds="true" snapstodevicepixels="true" keyboardnavigation.tabnavigation="local">
<grid.columndefinitions>
<columndefinition x:name="columndefinition0"/>
<columndefinition x:name="columndefinition1" width="0"/>
</grid.columndefinitions>
<grid.rowdefinitions>
<rowdefinition x:name="rowdefinition0" height="auto"/>
<rowdefinition x:name="rowdefinition1" height="*"/>
</grid.rowdefinitions>
<tabpanel x:name="headerpanel" horizontalalignment="center" background="transparent" grid.column="0" isitemshost="true" margin="0" grid.row="0" keyboardnavigation.tabindex="1" panel.zindex="1"/>
<line x1="0" x2="{binding actualwidth, relativesource={relativesource self}}" stroke="gray" strokethickness="0.1" verticalalignment="bottom" margin="0 0 0 1" snapstodevicepixels="true"/>
<border x:name="contentpanel" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" background="{templatebinding background}" grid.column="0" keyboardnavigation.directionalnavigation="contained" grid.row="1" keyboardnavigation.tabindex="2" keyboardnavigation.tabnavigation="local">
<contentpresenter x:name="part_selectedcontenthost" contenttemplate="{templatebinding selectedcontenttemplate}" content="{templatebinding selectedcontent}" contentstringformat="{templatebinding selectedcontentstringformat}" contentsource="selectedcontent" margin="0" snapstodevicepixels="{templatebinding snapstodevicepixels}"/>
</border>
</grid>
<controltemplate.triggers>
<trigger property="tabstripplacement" value="bottom">
<setter property="grid.row" targetname="headerpanel" value="1"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="auto"/>
</trigger>
<trigger property="tabstripplacement" value="left">
<setter property="grid.row" targetname="headerpanel" value="0"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="grid.column" targetname="headerpanel" value="0"/>
<setter property="grid.column" targetname="contentpanel" value="1"/>
<setter property="width" targetname="columndefinition0" value="auto"/>
<setter property="width" targetname="columndefinition1" value="*"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="0"/>
</trigger>
<trigger property="tabstripplacement" value="right">
<setter property="grid.row" targetname="headerpanel" value="0"/>
<setter property="grid.row" targetname="contentpanel" value="0"/>
<setter property="grid.column" targetname="headerpanel" value="1"/>
<setter property="grid.column" targetname="contentpanel" value="0"/>
<setter property="width" targetname="columndefinition0" value="*"/>
<setter property="width" targetname="columndefinition1" value="auto"/>
<setter property="height" targetname="rowdefinition0" value="*"/>
<setter property="height" targetname="rowdefinition1" value="0"/>
</trigger>
<trigger property="isenabled" value="false">
<setter property="textelement.foreground" targetname="templateroot" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}"/>
</trigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
tabitem样式如下：
<style x:key="tabitemexwithunderlinestyle" targettype="{x:type tabitem}">
<setter property="foreground" value="white"/>
<setter property="background" value="transparent"/>
<setter property="borderbrush" value="#ffacacac"/>
<setter property="margin" value="0"/>
<setter property="horizontalcontentalignment" value="stretch"/>
<setter property="verticalcontentalignment" value="stretch"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type tabitem}">
<grid x:name="templateroot" snapstodevicepixels="true" background="transparent">
<border x:name="_underline" borderbrush="#37aefe" borderthickness="0" margin="{templatebinding margin}"/>
<grid>
<textblock x:name="txt" visibility="visible" verticalalignment="center" horizontalalignment="center" text="{templatebinding header}" tooltip="{templatebinding header}" foreground="{templatebinding foreground}" texttrimming="characterellipsis" />
</grid>
</grid>
<controltemplate.triggers>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding ismouseover, relativesource={relativesource self}}" value="true"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="foreground" targetname="txt" value="#37aefe"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="left"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="bottom"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="right"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isenabled, relativesource={relativesource self}}" value="false"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="opacity" targetname="templateroot" value="0.56"/>
</multidatatrigger>
<multidatatrigger>
<multidatatrigger.conditions>
<condition binding="{binding isselected, relativesource={relativesource self}}" value="true"/>
<condition binding="{binding tabstripplacement, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type tabcontrol}}}" value="top"/>
</multidatatrigger.conditions>
<setter property="panel.zindex" value="1"/>
<setter property="foreground" targetname="txt" value="#37aefe"/>
<setter property="borderthickness" targetname="_underline" value="0 0 0 2"/>
</multidatatrigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
引用示例：
<grid background="#858586">
<tabcontrol style="{staticresource tabcontrolwithunderlinestyle}" foreground="black" width="300" height="200" background="transparent" borderbrush="transparent" borderthickness="0">
<tabitem style="{staticresource tabitemexwithunderlinestyle}" cursor="hand" header="音乐电台" height="38" width="70" margin="5 0">
<grid background="#33ffffff">
<textblock text="音乐电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</tabitem>
<tabitem style="{staticresource tabitemexwithunderlinestyle}" cursor="hand" header="mv电台" height="38" width="70" margin="5 0">
<grid background="#33ffffff">
<textblock text="mv电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</tabitem>
</tabcontrol>
</grid>
效果如下：
四、带关闭按钮的tabcontrol
带关闭按钮的tabcontrol其实就是就是扩展tabitem，需要新建wpf自定义控件，命名为tabitemclose吧；
c#代码如下：
public class tabitemclose : tabitem
{
static tabitemclose()
{
defaultstylekeyproperty.overridemetadata(typeof(tabitemclose), new frameworkpropertymetadata(typeof(tabitemclose)));
}
private static void onpropertychanged(dependencyobject d, dependencypropertychangedeventargs e)
{
d.setvalue(e.property, e.newvalue);
}
/// <summary>
/// 是否可以关闭
/// </summary>
public bool iscanclose
{
get { return (bool)getvalue(iscancloseproperty); }
set { setvalue(iscancloseproperty, value); }
}
public static readonly dependencyproperty iscancloseproperty =
dependencyproperty.register("iscanclose", typeof(bool), typeof(tabitemclose), new propertymetadata(true, onpropertychanged));
/// <summary>
/// 关闭的图标
/// </summary>
public imagesource closeicon
{
get { return (imagesource)getvalue(closeiconproperty); }
set { setvalue(closeiconproperty, value); }
}
public static readonly dependencyproperty closeiconproperty =
dependencyproperty.register("closeicon", typeof(imagesource), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 正常背景色
/// </summary>
public solidcolorbrush normalbackground
{
get { return (solidcolorbrush)getvalue(normalbackgroundproperty); }
set { setvalue(normalbackgroundproperty, value); }
}
public static readonly dependencyproperty normalbackgroundproperty =
dependencyproperty.register("normalbackground", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 悬浮背景色
/// </summary>
public solidcolorbrush overbackgound
{
get { return (solidcolorbrush)getvalue(overbackgoundproperty); }
set { setvalue(overbackgoundproperty, value); }
}
public static readonly dependencyproperty overbackgoundproperty =
dependencyproperty.register("overbackgound", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 选中背景色
/// </summary>
public solidcolorbrush selectedbackgound
{
get { return (solidcolorbrush)getvalue(selectedbackgoundproperty); }
set { setvalue(selectedbackgoundproperty, value); }
}
public static readonly dependencyproperty selectedbackgoundproperty =
dependencyproperty.register("selectedbackgound", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 默认前景色
/// </summary>
public solidcolorbrush normalforeground
{
get { return (solidcolorbrush)getvalue(normalforegroundproperty); }
set { setvalue(normalforegroundproperty, value); }
}
public static readonly dependencyproperty normalforegroundproperty =
dependencyproperty.register("normalforeground", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 悬浮前景色
/// </summary>
public solidcolorbrush overforeground
{
get { return (solidcolorbrush)getvalue(overforegroundproperty); }
set { setvalue(overforegroundproperty, value); }
}
public static readonly dependencyproperty overforegroundproperty =
dependencyproperty.register("overforeground", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 选中前景色
/// </summary>
public solidcolorbrush selectedforeground
{
get { return (solidcolorbrush)getvalue(selectedforegroundproperty); }
set { setvalue(selectedforegroundproperty, value); }
}
public static readonly dependencyproperty selectedforegroundproperty =
dependencyproperty.register("selectedforeground", typeof(solidcolorbrush), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 控件圆角
/// </summary>
public cornerradius cornerradius
{
get { return (cornerradius)getvalue(cornerradiusproperty); }
set { setvalue(cornerradiusproperty, value); }
}
public static readonly dependencyproperty cornerradiusproperty =
dependencyproperty.register("cornerradius", typeof(cornerradius), typeof(tabitemclose), new propertymetadata(new cornerradius(0), onpropertychanged));
/// <summary>
/// 前置logo
/// </summary>
public imagesource logoicon
{
get { return (imagesource)getvalue(logoiconproperty); }
set { setvalue(logoiconproperty, value); }
}
public static readonly dependencyproperty logoiconproperty =
dependencyproperty.register("logoicon", typeof(imagesource), typeof(tabitemclose), new propertymetadata(null, onpropertychanged));
/// <summary>
/// 前置logo宽度
/// </summary>
public double logoiconwidth
{
get { return (double)getvalue(logoiconwidthproperty); }
set { setvalue(logoiconwidthproperty, value); }
}
public static readonly dependencyproperty logoiconwidthproperty =
dependencyproperty.register("logoiconwidth", typeof(double), typeof(tabitemclose), new propertymetadata(double.parse("0"), onpropertychanged));
/// <summary>
/// 前置logo高度
/// </summary>
public double logoiconheigth
{
get { return (double)getvalue(logoiconheigthproperty); }
set { setvalue(logoiconheigthproperty, value); }
}
public static readonly dependencyproperty logoiconheigthproperty =
dependencyproperty.register("logoiconheigth", typeof(double), typeof(tabitemclose), new propertymetadata(double.parse("0"), onpropertychanged));
/// <summary>
/// logopadding
/// </summary>
public thickness logopadding
{
get { return (thickness)getvalue(logopaddingproperty); }
set { setvalue(logopaddingproperty, value); }
}
public static readonly dependencyproperty logopaddingproperty =
dependencyproperty.register("logopadding", typeof(thickness), typeof(tabitemclose), new propertymetadata(new thickness(0), onpropertychanged));
/// <summary>
/// 关闭item事件
/// </summary>
public event routedeventhandler closeitem
{
add { addhandler(closeitemevent, value); }
remove { removehandler(closeitemevent, value); }
}
public static readonly routedevent closeitemevent =
eventmanager.registerroutedevent("closeitem", routingstrategy.bubble, typeof(routedeventhandler), typeof(tabitemclose));
/// <summary>
/// 关闭项的右键菜单
/// </summary>
public contextmenu itemcontextmenu { get; set; }
border itemborder;
public override void onapplytemplate()
{
base.onapplytemplate();
itemborder = template.findname("_bordertop", this) as border;
if (itemcontextmenu != null)
{
itemborder.contextmenu = itemcontextmenu;
}
}
}
这里面我们添加了很多扩展功能，包括右键菜单，图标显示和控件圆角，以及各种背景色属性。
然后为tabitemclose设置样式
<style targettype="{x:type local:tabitemclose}">
<setter property="horizontalcontentalignment" value="stretch"/>
<setter property="verticalcontentalignment" value="stretch"/>
<setter property="foreground" value="#666666"/>
<setter property="margin" value="0 0 0 0"/>
<setter property="padding" value="0"/>
<setter property="borderthickness" value="0"/>
<setter property="closeicon" value="/images/close2.png"/>
<setter property="normalbackground" value="white"/>
<setter property="overbackgound" value="#33ca5100"/>
<setter property="selectedbackgound" value="#ca5100"/>
<setter property="normalforeground" value="#555558"/>
<setter property="overforeground" value="white"/>
<setter property="selectedforeground" value="white"/>
<setter property="template">
<setter.value>
<controltemplate targettype="{x:type local:tabitemclose}">
<border x:name="_bordertop" width="{templatebinding width}" maxwidth="{templatebinding maxwidth}" height="{templatebinding height}" cornerradius="{templatebinding cornerradius}" background="{templatebinding normalbackground}" borderthickness="{templatebinding borderthickness}" borderbrush="{templatebinding borderbrush}" tooltip="{templatebinding header}" >
<dockpanel>
<image x:name="_logo" dockpanel.dock="left" visibility="visible" margin="{templatebinding logopadding}" source="{templatebinding logoicon}" verticalalignment="center" horizontalalignment="center" stretch="uniform" width="{templatebinding logoiconwidth}" height="{templatebinding logoiconheigth}" />
<grid name="_grid" snapstodevicepixels="true">
<grid.columndefinitions>
<columndefinition width="*" />
<columndefinition x:name="_col_close" width="20" />
</grid.columndefinitions>
<border grid.columnspan="2" background="white" opacity="0"/>
<textblock x:name="_txt" verticalalignment="center" texttrimming="characterellipsis" margin="3 0 3 0" foreground="{templatebinding normalforeground}" textalignment="center" horizontalalignment="center" text="{templatebinding header}" />
<grid x:name="_gridclose" grid.column="1" >
<border x:name="_borderbg" background="black" opacity="0" />
<local:buttonex x:name="part_close_tabitem" horizontalalignment="center" verticalalignment="center" background="transparent" visibility="visible" icon="{templatebinding closeicon}" buttontype="icon" />
</grid>
</grid>
</dockpanel>
</border>
<controltemplate.triggers>
<trigger property="logoicon" value="{x:null}">
<setter targetname="_logo" property="visibility" value="collapsed" />
</trigger>
<trigger property="iscanclose" value="false">
<setter targetname="_gridclose" property="visibility" value="collapsed"/>
<setter targetname="_col_close" property="width" value="0"/>
</trigger>
<trigger property="isselected" value="true">
<setter targetname="_bordertop" property="background" value="{binding selectedbackgound,relativesource={relativesource templatedparent}}" />
<setter targetname="_txt" property="foreground" value="{binding selectedforeground,relativesource={relativesource templatedparent}}"/>
</trigger>
<multitrigger>
<multitrigger.conditions>
<condition property="ismouseover" value="true"/>
<condition property="isselected" value="false"/>
</multitrigger.conditions>
<setter targetname="_txt" property="foreground" value="{binding overforeground,relativesource={relativesource templatedparent}}"/>
<setter targetname="_bordertop" property="background" value="{binding overbackgound,relativesource={relativesource templatedparent}}"/>
</multitrigger>
</controltemplate.triggers>
</controltemplate>
</setter.value>
</setter>
</style>
这里面使用了一个close的图标
tabcontrol的图标可设置可不设置，看自己需要。
这里面还用到了前面讲的控件buttonex，定义方法我就不重复赘述了。大家可以通过这个链接跳转查看：http://www.cnblogs.com/xiaomingg/p/8699125.html。buttonex.cs里面还要添加几个方法用来支持关闭tabitem：
protected override void onclick()
{
base.onclick();
if (!string.isnullorempty(name) && name == "part_close_tabitem")
{
tabitemclose itemclose = findvisualparent<tabitemclose>(this);
(itemclose.parent as tabcontrol).items.remove(itemclose);
routedeventargs args = new routedeventargs(tabitemclose.closeitemevent, itemclose);
itemclose.raiseevent(args);
}
}
public static t findvisualparent<t>(dependencyobject obj) where t : class
{
while (obj != null)
{
if (obj is t)
return obj as t;
obj = visualtreehelper.getparent(obj);
}
return null;
}
引用示例：
<grid background="#858586">
<tabcontrol foreground="black" width="300" height="200" background="transparent" borderbrush="transparent" borderthickness="0">
<local:tabitemclose cursor="hand" header="音乐电台" height="20" width="100">
<grid background="#aaffffff">
<textblock text="音乐电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</local:tabitemclose>
<local:tabitemclose cursor="hand" header="mv电台" height="20" width="100">
<grid background="#aaffffff">
<textblock text="mv电台" verticalalignment="center" horizontalalignment="center"/>
</grid>
</local:tabitemclose>
</tabcontrol>
</grid>
效果如下：
所有代码已经上传到github：https://github.com/cmfgit/wpfdemo.git
