Styling Windows Phone 7 Pivot Control Titles

For a Windows Phone 7 application I’m currently working on I needed to change the font the titles of a couple of PivotItems on a Pivot control. Normally I won’t recommend using another font than Segoe WP for this, but sometimes the branding of the app leaves you no other choice.

Changing the font of the title turned out to be a lot harder than I thought. To spare you the trouble, here’s how it’s done in Expression Blend.

Walkthrough

For this walkthrough I created a very cool app, containing a Pivot control with three PivotItems.

image

Changing the font of the title of the Pivot itself is easy. With the Pivot selected in the Objects and Timeline pane set the font property to whatever you need.

imageimage

Setting the same font for the titles of the PivotItems is a bit more complex. With the Pivot control still selected, click on the Pivot(just below the tabbar above the design area) and follow Edit Template –> Edit a Copy…

image

The Create Style Resource dialog appears. You could name the style here and place it a Resource Dictionary if you like. For now, just hit OK.

image

You’ll end up with the inner components of the Pivot.

image

Select the HeaderListElement from the Objects and Timeline pane. This is the bar that contains the titles of the PivotItems. And go to HeaderListElement –> Edit Additional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy

image

I probably should give my style a cool hip name, but for the demo I’ll just leave that up to you and hit OK right away…

image

We have reached our final destination, the template that holds the properties for the title of the PivotItem.

To set the font of the titles you need to do a little trick. Because the ContentPresenter doesn’t have a font property you need to change it to something else, preferably another control that can contain content. So, change the xaml of template and turn the ContentPresenter into a ContentControl.

image

The ContentControl has the needed text properties. I’ve set the font to the one I needed and changed the font size to 70pt. A small side note: make sure you embed the font in your app, otherwise it won’t work when the app is running in the emulator or on the phone.

image

As you might have notices, the color of the titles is grey and white. Which isn’t very cool. So the last part of this tutorial will show how to change that.

Have a look at the visual states on the State pane and notice there are two states. Selected and Unselected.

Select the Selected state and notice the red border around the design area indicating every property you change will be recorded into this visual state. You can use resources in your visual states. Which is handy when you want to use the phone’s accent color. Make sure the element named "ContentPresenter” is selected in the Objects and Timeline pane and select the foreground color brush. Select the Color resources tab and set the color to the PhoneAccentColor.

image

To show a bit of what the visual states can do, and have a little bit of fun with the Pivot control too, we’re going to make the selected state slightly bigger than the unselected state. With the Selected state and the “ContentPresenter” element still selected change the scale of the RenderTransform to 1,1 for both the X and Y scale.

image

To make the scaling a bit more noticeable when the app is running. I’m going to set the transition between states to 0.5 seconds, with a CubicInOut easing.

image

And that’s is. You’ve changed the title of the items in a Pivot control.

1 comment for “Styling Windows Phone 7 Pivot Control Titles

Leave a Reply

%d bloggers like this: