windows phone 8 - Pivot HeadTemplate alignment -
here how pivot control looks on wp app.
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.
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
Post a Comment