Exception thrown when trying to remove pivot item (with header template) from code behind windows phone

Question

In my app I need to add and remove pivot items dynamically. I implemented it successfully. But later when I tried to change the pivot items header template, the same code is throwing exception.

The xaml code is as follows

 <phone:Pivot x:Name="HeadPivot" Title="SDPOnDemand">
        <phone:PivotItem x:Name="RequestsPI">
            <phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="Requests" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                </Grid>
            </phone:PivotItem.Header>
        </phone:PivotItem>

        <phone:PivotItem x:Name="FiltersPI">
            <phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="Filters" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                </Grid>
            </phone:PivotItem.Header>

        </phone:PivotItem>

        <phone:PivotItem x:Name="SearchPI">
            <phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="Search Items" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                </Grid>
            </phone:PivotItem.Header>

        </phone:PivotItem>


    </phone:Pivot>

i use the following code to remove and add the pivot Items

HeadPivot.Items.Remove(FiltersPI);
HeadPivot.Items.Add(SearchPI);

The following exception is thrown in the first line

-       $exception  {System.ArgumentException: Value does not fall within the expected range.

If I remove the header template it's working fine. May I know if I'm doing anything wrong?

Are this cannot be done ?

Thanks.

Answer 1

I guess the default HeaderTemplate does not expect UI elements in the Header.

The way to change how the header looks is by changing the HeaderTemplate property of the Pivot itself, and then assign the appropriate object (most likely a simple string) to the Header property of the PivotItem(s). Something like this:

    <phone:Pivot x:Name="HeadPivot" Title="SDPOnDemand">
        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                </Grid>
            </DataTemplate>
        </phone:Pivot.HeaderTemplate>

        <phone:PivotItem x:Name="RequestsPI" Header="Requests">
        </phone:PivotItem>

        <phone:PivotItem x:Name="FiltersPI" Header="Filters">
        </phone:PivotItem>

        <phone:PivotItem x:Name="SearchPI" Header="Search Items">
        </phone:PivotItem>
    </phone:Pivot>