Windows Phone Pivot Control: Enable text wrapping for the Title

Posted 21 February 2011   Tweet

By default, the Title of the Pivot control will clip its content when it gets to the end of the line. For most applications, the Title is not long, but if you’re data binding to a lot of information, there may be a legitimate scenario where you want the title to trim.

Imagine where you’ve used data binding and the Title is bound to a field like “SEATAC: Seattle-Tacoma International Airport, 17801 International Blvd”: you don’t want this clipped, as the address may be important.

The easiest way to enable this is to use a TitleTemplate that contains a TextBlock with TextWrapping set to Wrap instead of the default, which just clips.

Here is the before at runtime:

So to do this, you just use this DataTemplate for the TitleTemplate:

<controls:Pivot 
    Title="SEATAC: SEATTLE-TACOMA INTERNATIONAL AIRPORT, 17801 INTERNATIONAL BLVD">
    <controls:Pivot.TitleTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" TextWrapping="Wrap" />
        </DataTemplate>
    </controls:Pivot.TitleTemplate>
    <!--Pivot item one-->
</controls:Pivot>

This will only work with Title content that is text, of course. And here’s the after, where the title text now wraps:

Hope this helps.