Changing font size, color and style of WP7 Panorama/Pivot title

While helping out at the Nokia X-Calibre hackathon, one of the most commonly asked question I got was,

The font size of the panaroma/pivot title is too big. How do I change the size, or even add an image to the title, while still maintaining the default margins…

It really is simple to do this. Lets look at the default panorama/pivot title.

 
 

When you create a new Panorama project, the XAML for the title is as below. As you can see the title of the page is set as “my application”

<controls:Panorama Title="my application">
   <controls:Panorama.Background>
      <ImageBrush ImageSource="PanoramaBackground.png"/>
   </controls:Panorama.Background>
   ....
</controls:Panorama>

To change the size and style of this title, add an extra piece of code such that it looks like this.

<controls:Panorama>
   <controls:Panorama.Title>
      <Grid Height="249">
         <TextBlock Text="my application" Margin="0" FontSize="187" />
      </Grid>
   </controls:Panorama.Title>
   <controls:Panorama.Background>
      <ImageBrush ImageSource="PanoramaBackground.png"/>
   </controls:Panorama.Background>
   ....
</controls:Panorama>

As you can see, I have created an extra XAML block entirely for the title. The default font size of the title is 187 and you can now change it to whatever size, color or style. The grid height of 249 is to ensure that the margins for the rest of the page remains the same even if you change the font size. If you want to include an image in your title, you can just add it under the grid.

 
 

For Pivot title, its similar too, but in the case for pivot, you add it under each pivot item as a header.

<controls:PivotItem >
   <controls:PivotItem.Header>
      <Grid Height="95">
         <TextBlock Text="first" FontSize="72" />
      </Grid>
   </controls:PivotItem.Header>
   ...
</controls:PivotItem>

Here, the default font size is 72 and the grid size is 95 to maintain the default page margins.

You can leave a response, or trackback from your own site.

Leave a Reply


nine − = 2