c# - TabItem Header vertical -
so got tabcontrol tabitems,and few buttons.
when press these buttons change position of tabstrip.
everything working fine. want is,
when press button right90 put tabstrip right header should turned 90°.
i tried it, failed.
i happy on fast answer.
here code:
<window x:class="pages.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" title="tabcontrol" height="350" width="525"> <window.resources> <solidcolorbrush x:key="foreground" color="#ff9531b1"></solidcolorbrush> <solidcolorbrush x:key="background" color="transparent"></solidcolorbrush> <controltemplate x:key="tabitemcontroltemplate" targettype="{x:type tabitem}"> <grid snapstodevicepixels="true"> <border x:name="bd" borderbrush="{staticresource foreground}" borderthickness="0" padding="{templatebinding padding}"> <border.style> <style targettype="{x:type border}"> <setter property="background" value="{staticresource background}"/> <style.triggers> <datatrigger binding="{binding relativesource={relativesource templatedparent}, path=isselected}" value="true"> <setter property="background" value="{binding relativesource={relativesource templatedparent}, path=background}" /> </datatrigger> <datatrigger binding="{binding relativesource={relativesource templatedparent}, path=ismouseover}" value="true"> <setter property="background" value="{binding relativesource={relativesource templatedparent}, path=background}" /> </datatrigger> </style.triggers> </style> </border.style> <contentpresenter x:name="content" contenttemplate="{templatebinding headertemplate}" content="{templatebinding header}" contentstringformat="{templatebinding headerstringformat}" contentsource="header" horizontalalignment="{binding horizontalcontentalignment, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type itemscontrol}}}" recognizesaccesskey="true" snapstodevicepixels="{templatebinding snapstodevicepixels}" verticalalignment="{binding verticalcontentalignment, relativesource={relativesource findancestor, ancestorlevel=1, ancestortype={x:type itemscontrol}}}"/> </border> </grid> <controltemplate.triggers> <trigger property="ismouseover" value="true"> <setter targetname="bd" property="background" value="{staticresource foreground}"></setter> <setter targetname="content" property="textblock.foreground" value="white"></setter> <setter targetname="content" property="textblock.fontweight" value="heavy"></setter> </trigger> <multitrigger > <multitrigger.conditions > <condition property="isselected" value="true"></condition> <condition property="ismouseover" value="false"></condition> </multitrigger.conditions> <setter targetname="content" property="textblock.foreground" value="{staticresource foreground}"></setter> <setter targetname="content" property="textblock.fontweight" value="heavy"></setter> </multitrigger> </controltemplate.triggers> </controltemplate> </window.resources> <grid> <grid.columndefinitions> <columndefinition></columndefinition> <columndefinition></columndefinition> </grid.columndefinitions> <stackpanel grid.column="1"> <button x:name="btntop" click="btntop_click">top</button> <button name="btnright" click="btnright_click">right</button> <button name="btnbottom" click="btnbottom_click">bottom</button> <button name="btnleft" click="btnleft_click">left</button> <button name="btnleft90" click="btnleft90_click">left90</button> <button name="btnright90" click="btnright90_click">right90</button> </stackpanel> <tabcontrol grid.column="0" x:name="mycontrol" height="200" background="transparent" borderthickness="0,1,0,0" borderbrush="{staticresource foreground}" tabstripplacement="top"> <tabitem x:name="tab1" header="tab1" background="transparent" template="{dynamicresource tabitemcontroltemplate}"> </tabitem> <tabitem x:name="tab2" header="tab2" background="transparent" template="{dynamicresource tabitemcontroltemplate}"/> <tabitem x:name="tab3" header="tab3" background="transparent" template="{dynamicresource tabitemcontroltemplate}"/> </tabcontrol> </grid>
and code behind code:
public mainwindow() { initializecomponent(); } private void btntop_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.top; } private void btnright_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.right; } private void btnbottom_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.bottom; } private void btnleft_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.left; } private void btnleft90_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.left; } private void btnright90_click(object sender, routedeventargs e) { mycontrol.tabstripplacement = dock.right; tab1.layouttransform = rotation.rotate90; } }
thanks in advance
you need write 2 different style , set them on button click
in window resources
<window.resources> <style x:key="right90" targettype="{x:type tabitem}"> <setter property="headertemplate"> <setter.value> <datatemplate> <contentpresenter content="{templatebinding content}" textoptions.textformattingmode="display"> <contentpresenter.layouttransform> <rotatetransform angle="90" /> </contentpresenter.layouttransform> </contentpresenter> </datatemplate> </setter.value> </setter> </style> <style x:key="left90" targettype="{x:type tabitem}"> <setter property="headertemplate"> <setter.value> <datatemplate> <contentpresenter content="{templatebinding content}" textoptions.textformattingmode="display"> <contentpresenter.layouttransform> <rotatetransform angle="-90" /> </contentpresenter.layouttransform> </contentpresenter> </datatemplate> </setter.value> </setter> </style> </window.resources>
here tabcontrol , button
<dockpanel> <button name="btnright" dockpanel.dock="top" click="btnright_click" content="right"></button> <button name="btnleft" dockpanel.dock="top" click="btnleft_click" content="left" ></button> <tabcontrol name="tabcontrol"> <tabitem header="tab1"></tabitem> <tabitem header="tab2"></tabitem> </tabcontrol> </dockpanel>
and how code behind go
private void btnleft_click(object sender, routedeventargs e) { tabcontrol.tabstripplacement = dock.left; tabcontrol.itemcontainerstyle = this.findresource("left90") style; } private void btnright_click(object sender, routedeventargs e) { tabcontrol.tabstripplacement = dock.right; tabcontrol.itemcontainerstyle = this.findresource("right90") style; }
Comments
Post a Comment