真功夫ekp,中山大学在职研究生,非你莫属郭杰
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 == 0)
{
tabitemlist.add(_contextmenusource);
}
if (data == 1)
{
for (int i = 0; i < this.items.count; i++)
{
tabitem tabitem = this.items[i] as tabitem;
if (tabitem != _contextmenusource)
{
tabitemlist.add(tabitem);
}
}
}
if (data == 2)
{
for (int i = 0; i < this.items.count; i++)
{
tabitem tabitem = this.items[i] as tabitem;
if (tabitem != _contextmenusource)
{
tabitemlist.add(tabitem);
}
else
{
break;
}
}
}
if (data == 3)
{
for (int i = this.items.count - 1; i >= 0; 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, 99);
}
foreach (tabitem tabitem in e.addeditems)
{
panel.setzindex(tabitem, 999);
}
}
}
}
效果图：
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论