user interface - How to restyle a TabControl in WPF -
i new in wpf. here posting picture of tabcontrol. guide me how can re-style tab having same ui in wpf per picture.
in case, need implement style / template tabcontrol form. tabcontrol has 3 directions tabs are: central (default), left , right directions. need left direction, judging picture.
style tabitem (elements of tabcontrol) 1 in directions.
style tabcontrol left direction:
<style x:key="lefttabcontrol" targettype="{x:type tabcontrol}"> <setter property="tabstripplacement" value="left" /> <setter property="margin" value="0" /> <setter property="padding" value="0" /> <setter property="background" value="white" /> <setter property="borderthickness" value="1" /> <setter property="borderbrush" value="transparent" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type tabcontrol}"> <grid cliptobounds="true" snapstodevicepixels="true" keyboardnavigation.tabnavigation="local"> <grid.columndefinitions> <columndefinition name="columndefinition0" /> <columndefinition width="0" name="columndefinition1" /> </grid.columndefinitions> <grid.rowdefinitions> <rowdefinition height="auto" name="rowdefinition0" /> <rowdefinition height="*" name="rowdefinition1" /> </grid.rowdefinitions> <border x:name="headerborder" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0" background="#fafafa" margin="0"> <tabpanel isitemshost="true" name="headerpanel" panel.zindex="1" keyboardnavigation.tabindex="1" grid.column="0" grid.row="0" /> </border> <grid name="contentpanel" keyboardnavigation.tabindex="2" keyboardnavigation.tabnavigation="local" keyboardnavigation.directionalnavigation="contained" grid.column="0" grid.row="1"> <border background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <contentpresenter content="{templatebinding selectedcontent}" contenttemplate="{templatebinding selectedcontenttemplate}" contentstringformat="{templatebinding selectedcontentstringformat}" contentsource="selectedcontent" name="part_selectedcontenthost" margin="2" snapstodevicepixels="{templatebinding uielement.snapstodevicepixels}" /> </border> </grid> </grid> <controltemplate.triggers> <trigger property="tabcontrol.tabstripplacement" value="left"> <setter targetname="headerpanel" property="grid.row" value="0" /> <setter targetname="contentpanel" property="grid.row" value="0" /> <setter targetname="headerpanel" property="grid.column" value="0" /> <setter targetname="contentpanel" property="grid.column" value="1" /> <setter targetname="columndefinition0" property="columndefinition.width" value="auto" /> <setter targetname="columndefinition1" property="columndefinition.width" value="*" /> <setter targetname="rowdefinition0" property="rowdefinition.height" value="*" /> <setter targetname="rowdefinition1" property="rowdefinition.height" value="0" /> <setter targetname="headerborder" property="frameworkelement.margin" value="0,0,0,0" /> </trigger> <trigger property="uielement.isenabled" value="false"> <setter property="textelement.foreground" value="{dynamicresource {x:static systemcolors.graytextbrushkey}}" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> </style> style tabitem:
<style x:key="{x:type tabitem}" targettype="{x:type tabitem}"> <setter property="background" value="transparent" /> <setter property="foreground" value="gray" /> <setter property="borderthickness" value="1" /> <setter property="borderbrush" value="transparent" /> <setter property="minheight" value="20" /> <setter property="fontfamily" value="./#segoe ui" /> <setter property="fontsize" value="14" /> <setter property="fontweight" value="normal" /> <setter property="snapstodevicepixels" value="true" /> <setter property="istabstop" value="false" /> <setter property="allowdrop" value="true" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type tabitem}"> <border snapstodevicepixels="true" name="border" margin="0,0,2,0" padding="2" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <contentpresenter name="contentsite" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="5,5,5,5" verticalalignment="center" recognizesaccesskey="true" contentsource="header" /> </border> <controltemplate.triggers> <trigger property="tabstripplacement" value="bottom"> <setter targetname="border" property="cornerradius" value="0,0,0,0" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="isselected" value="true"> <setter property="background" value="#f5b79c" /> <setter property="foreground" value="black" /> </trigger> <multitrigger> <multitrigger.conditions> <condition property="ismouseover" value="true" /> <condition property="isselected" value="false" /> </multitrigger.conditions> <setter property="background" value="#db805a" /> <setter property="foreground" value="white" /> </multitrigger> <trigger property="isenabled" value="false"> <setter property="background" value="black" /> <setter property="foreground" value="white" /> </trigger> </style.triggers> </style> mainwindow
<tabcontrol style="{staticresource lefttabcontrol}" background="gainsboro" width="300" horizontalalignment="left"> <tabitem header="new"> <label content="testnew" /> </tabitem> <tabitem header="old"> <label content="testold" /> </tabitem> <tabitem header="recent"> <label content="recenthelp" /> </tabitem> </tabcontrol> output
to add triangle selection, need fix template tabitem. add path triangle , display in current tabitem:
<controltemplate targettype="{x:type tabitem}"> <border snapstodevicepixels="true" name="border" margin="0,0,2,0" padding="2" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <grid> <path x:name="currenttriangle" width="10" height="14" stretch="fill" margin="0,0,-3,0" fill="#fafafa" horizontalalignment="right" data="f1 m 287.328,237.333l 319.344,255.818l 319.344,218.849l 287.328,237.333 z " visibility="collapsed" /> <contentpresenter name="contentsite" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="5,5,5,5" verticalalignment="center" recognizesaccesskey="true" contentsource="header" /> </grid> </border> <controltemplate.triggers> ... <trigger property="isselected" value="true"> <setter targetname="currenttriangle" property="visibility" value="visible" /> </trigger> </controltemplate.triggers> </controltemplate> output triangle:
full listing of tabitem style triangle:
<style x:key="{x:type tabitem}" targettype="{x:type tabitem}"> <setter property="background" value="transparent" /> <setter property="foreground" value="gray" /> <setter property="borderthickness" value="1" /> <setter property="borderbrush" value="transparent" /> <setter property="minheight" value="20" /> <setter property="fontfamily" value="./#segoe ui" /> <setter property="fontsize" value="14" /> <setter property="fontweight" value="normal" /> <setter property="snapstodevicepixels" value="true" /> <setter property="istabstop" value="false" /> <setter property="allowdrop" value="true" /> <setter property="template"> <setter.value> <controltemplate targettype="{x:type tabitem}"> <border snapstodevicepixels="true" name="border" margin="0,0,2,0" padding="2" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <grid> <path x:name="currenttriangle" width="10" height="14" stretch="fill" margin="0,0,-3,0" fill="#fafafa" horizontalalignment="right" data="f1 m 287.328,237.333l 319.344,255.818l 319.344,218.849l 287.328,237.333 z " visibility="collapsed" /> <contentpresenter name="contentsite" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="5,5,5,5" verticalalignment="center" recognizesaccesskey="true" contentsource="header" /> </grid> </border> <controltemplate.triggers> <trigger property="tabstripplacement" value="bottom"> <setter targetname="border" property="cornerradius" value="0,0,0,0" /> </trigger> <trigger property="isselected" value="true"> <setter targetname="currenttriangle" property="visibility" value="visible" /> </trigger> </controltemplate.triggers> </controltemplate> </setter.value> </setter> <style.triggers> <trigger property="isselected" value="true"> <setter property="background" value="#f5b79c" /> <setter property="foreground" value="black" /> </trigger> <multitrigger> <multitrigger.conditions> <condition property="ismouseover" value="true" /> <condition property="isselected" value="false" /> </multitrigger.conditions> <setter property="background" value="#db805a" /> <setter property="foreground" value="white" /> </multitrigger> <trigger property="isenabled" value="false"> <setter property="background" value="black" /> <setter property="foreground" value="white" /> </trigger> </style.triggers> </style> edit: i'll tell in order.
all of styles, have given above placed in app.xaml (it desirable there):
<application x:class="someprogram.app" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:presentationoptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" startupuri="mainwindow.xaml"> <application.resources> <style x:key="lefttabcontrol" targettype="{x:type tabcontrol}"> ... </style> <style x:key="{x:type tabitem}" targettype="{x:type tabitem}"> ... </style> </application.resources> specify picture path
triangle.
by default, template tabitem looks this:
<setter property="template"> <setter.value> <border snapstodevicepixels="true" name="border" margin="0,0,2,0" padding="2" background="{templatebinding background}" borderbrush="{templatebinding borderbrush}" borderthickness="{templatebinding borderthickness}" cornerradius="0"> <contentpresenter name="contentsite" horizontalalignment="{templatebinding horizontalcontentalignment}" margin="5,5,5,5" verticalalignment="center" recognizesaccesskey="true" contentsource="header" /> </border> the contentpresenter responsible displaying contents, in case displaying text in header. need have displayed triangle, add him figure path:
<path x:name="currenttriangle" width="10" height="14" stretch="fill" margin="0,0,-3,0" fill="#fafafa" horizontalalignment="right" data="f1 m 287.328,237.333l 319.344,255.818l 319.344,218.849l 287.328,237.333 z " visibility="collapsed" /> this not image, path easier use, no need keep resource. more information can find here.
so, have triangle appears, need show when tab selected. use trigger it:
<trigger property="isselected" value="true"> <setter targetname="currenttriangle" property="visibility" value="visible" /> </trigger> more information triggers can find here.
gradient color selected
tabitem.
color selected tabitem sets in trigger of tabitem style:
<trigger property="isselected" value="true"> <setter property="background" value="#f5b79c" /> <setter property="foreground" value="black" /> </trigger> here sets values of background , foreground of selected tabitem. gradient color define that:
<lineargradientbrush> <gradientstop color="yellow" offset="0.0" /> <gradientstop color="orange" offset="0.5" /> <gradientstop color="red" offset="1.0" /> </lineargradientbrush> you need set gradient color property background in trigger.
background tabcontrol
background set tabcontrol's style line:
<style x:key="lefttabcontrol" targettype="{x:type tabcontrol}"> ... <setter property="background" value="white" /> more information brushes (gradient's) here.
information styles/templates here.
Comments
Post a Comment