PivotItem header changes during runtime

Question

I ran into a weird problem working with the Windows Phone 8 pivot control.

Apparently, when the Pivot is bound to a list of models and the HeaderTemplate is used for binding to one of the model's properties, changing the property during runtime causes layout problem in the headers.

Here is the sample code. Create a simple model class.

public class MyModel: INotifyPropertyChanged
{
    private string _displayName;

    public event PropertyChangedEventHandler PropertyChanged;

    public string DisplayName
    {
        get
        {
            return _displayName;
        }
        set
        {
            _displayName = value;
            if(PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("DisplayName"));
            }
        }
    }
}

Then initialize the model list (could occur in the ViewModel, or page's code)

Items = new List<MyModel>
{
    new MyModel { DisplayName = "model 1" },
    new MyModel { DisplayName = "model 2" },
}

Connecting the list of models to the pivot control

<phone:Pivot ItemsSource="{Binding Items}" DisplayMemberPath="DisplayName">
    <phone:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </phone:Pivot.HeaderTemplate>
</phone:Pivot>

So now we have 2 pivot items and the headers are displayed correctly. Now we change DisplayName property of the first item during app runtime (say following a button click) and assign a longer string value:

Items[0].DisplayName = "Some other header";

This causes the headers to overlap. Any thoughts?

Raymond Zuo Raymond Zuo · Accepted Answer · 2014-03-03T09:15:58

Elad

if you set displayName property to "Some other header" at first time, and then change the value to "model 2", normal display. So, in my opinion, this problem was caused by the pivot header width property(in your code,the textblock's width). When the pivot was loaded, every header had fixed width, and at this time, you changed the header display name to a longger value, the pivot will not be display correctly.

PivotItem header changes during runtime

1 Answers