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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -