windows phone 8 - Pivot HeadTemplate alignment -


here how pivot control looks on wp app.

enter image description here

here code same.

<phone:pivot>             <!--pivot item one-->             <phone:pivotitem>                 <phone:pivotitem.header>                     <contentcontrol>                         <image source="/assets/alarmclock.png"/>                     </contentcontrol>                 </phone:pivotitem.header>                  <grid>                     <textblock text="hello1"/>                 </grid>             </phone:pivotitem>              <!--pivot item two-->             <phone:pivotitem >                 <phone:pivotitem.header>                     <contentcontrol>                         <image source="/assets/clock.png"/>                     </contentcontrol>                  </phone:pivotitem.header>                 <grid>                     <textblock text="hello 2"/>                 </grid>             </phone:pivotitem>              <!--pivot item three-->             <phone:pivotitem>                 <phone:pivotitem.header>                     <contentcontrol>                         <image source="/assets/timer.png"/>                     </contentcontrol>                  </phone:pivotitem.header>                 <grid>                     <textblock text="hello 3"/>                 </grid>             </phone:pivotitem>         </phone:pivot> 

i want customized how header looks. how want headers align (see below image). not sure how done. below how want black grid , vertical pipes. can me ? think have write style same. however, don't know in way can defined style alignment changed per below. enter image description here

the closer want achieve no effort:

<phone:phoneapplicationpage.resources>     <datatemplate x:key="pivotheader">         <grid margin="-11,0,-11,0">             <border borderbrush="#fff70000" borderthickness="1">                 <grid width="152" horizontalalignment="center">                     <image height="80" source="{binding}"></image>                 </grid>             </border>         </grid>     </datatemplate>  </phone:phoneapplicationpage.resources>  <!--layoutroot root grid page content placed--> <grid x:name="layoutroot" background="transparent">     <!--pivot control-->     <phone:pivot headertemplate="{staticresource pivotheader}">         <phone:pivotitem header="/assets/clock.png">             <grid>                 <textblock text="hello 1"/>             </grid>         </phone:pivotitem>          <phone:pivotitem header="/assets/clock.png">             <grid>                 <textblock text="hello 2"/>             </grid>         </phone:pivotitem>          <phone:pivotitem header="/assets/clock.png">             <grid>                 <textblock text="hello 3"/>             </grid>         </phone:pivotitem>      </phone:pivot> </grid> 

however notice pivot control not work tabs on android , iphone.

i wouldn't recommend changing behavior of pivot control in windows phone either.

maybe best way achieve trying use buttons @ top of pivot page , manually handle behavior modifying pivots selection changed.


Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -