c# - How to customize Pivot headers? -
i new windows phone 8.1 app development, want know how customize pivot header properties font, foreground colour, size, etc. can't find of these properties. so, hope me.
create resource dictionary ( if don't have 1 ) add-new item-resource dictionary
apply on app.xaml
<application.resources> <resourcedictionary> <resourcedictionary.mergeddictionaries> <!-- styles define common aspects of platform , feel required visual studio project , item templates --> <resourcedictionary source="assets/style/customstyle.xaml"/> </resourcedictionary.mergeddictionaries> </resourcedictionary> </application.resources>
add template resource dictionary
<style x:key="custompivotstyle" targettype="pivot"> <setter property="margin" value="0,0,0,0"/> <setter property="padding" value="0"/> <setter property="foreground" value="{themeresource phoneforegroundbrush}"/> <setter property="background" value="transparent"/> <setter property="borderbrush" value="#ff1f1f1f"/> <setter property="itemspanel"> <setter.value> <itemspaneltemplate> <grid/> </itemspaneltemplate> </setter.value> </setter> <setter property="template"> <setter.value> <controltemplate targettype="pivot"> <grid x:name="rootelement" background="{templatebinding background}" horizontalalignment="{templatebinding horizontalalignment}" verticalalignment="{templatebinding verticalalignment}"> <grid.rowdefinitions> <rowdefinition height="auto"/> <rowdefinition height="*"/> </grid.rowdefinitions> <visualstatemanager.visualstategroups> <visualstategroup x:name="orientation"> <visualstate x:name="portrait"> <storyboard> <objectanimationusingkeyframes storyboard.targetproperty="margin" storyboard.targetname="titlecontentcontrol"> <discreteobjectkeyframe keytime="0" value="{themeresource pivotportraitthemepadding}"/> </objectanimationusingkeyframes> </storyboard> </visualstate> </visualstategroup> </visualstatemanager.visualstategroups> <contentcontrol x:name="titlecontentcontrol" contenttemplate="{templatebinding titletemplate}" content="{templatebinding title}" style="{staticresource pivottitlecontentcontrolstyle}"/> <scrollviewer x:name="scrollviewer" horizontalsnappointsalignment="center" horizontalsnappointstype="mandatorysingle" horizontalscrollbarvisibility="hidden" margin="{templatebinding padding}" grid.row="1" template="{staticresource scrollviewerscrollbarlesstemplate}" verticalsnappointstype="none" verticalscrollbarvisibility="disabled" verticalscrollmode="disabled" verticalcontentalignment="center" zoommode="disabled"> <pivotpanel x:name="panel" verticalalignment="stretch"> <pivotheaderpanel x:name="header" background="{templatebinding borderbrush}"> <pivotheaderpanel.rendertransform> <compositetransform x:name="headertranslatetransform" translatex="0"/> </pivotheaderpanel.rendertransform> </pivotheaderpanel> <itemspresenter x:name="pivotitempresenter"> <itemspresenter.rendertransform> <translatetransform x:name="itemspresentertranslatetransform" x="0"/> </itemspresenter.rendertransform> </itemspresenter> </pivotpanel> </scrollviewer> </grid> </controltemplate> </setter.value> </setter> </style> <style targettype="textblock" x:key="custompivotheader"> <setter property="fontsize" value="20"/> <setter property="fontweight" value="bold"/> <setter property="fontfamily" value="segoe ui"/> <setter property="margin" value="10,10,0,0"/> <setter property="verticalalignment" value="bottom"/> </style>
apply pivot
<pivot x:name="pivot" margin="0,0,0,0" style="{staticresource custompivotstyle}"> <pivot.headertemplate> <datatemplate> <textblock text="{binding}" style="{staticresource custompivotheader}"/> </datatemplate> </pivot.headertemplate> </pivot>
Comments
Post a Comment