Windows Phone Pivot Control: Enable text wrapping for the Title

Posted 21 February 2011  

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:

PivotBefore

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:

PivotAfter

Hope this helps.

Jeff Wilcox is a Principal Software Engineer at Microsoft on the Azure team.

Jeff has been at Microsoft since 2005 and holds a Bachelor of Science from the University of Michigan. Jeff lives in downtown Seattle.

comments powered by Disqus