WPF自定义TabControl样式
程序员文章站
2022-12-28 23:13:35
WPF自定义TabControl,TabControl美化 XAML代码:
view code
view code
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); } } } }
效果图: