Hiding and showing a databound PivotItem header during runtime

Question

I think the present implementation of PivotItem is somewhat inconsistent not to say flawed. If the property Header is set before or after it has been rendered completely the size of the header is set appropriately, however, setting the Header back to null or string.empty does not cause the header to shrink again. Is there an elegant way of hiding and showing a PivotItem header when the Header is set via DataBinding or can a PivotItem be forced to revalidate it's boundaries?

As of now I'm trying "solve" my problem with some rather crude code which includes Events and the complete recreation of the Pivot programmatically and then attach all the PivotItems again. Maybe an OK solution for just page, but certainly somewhat iffy when this needs to be done 10+ times.

[This question has been asked before in a somewhat similiar context, but was never really solved.]

Shawn Kendrot Shawn Kendrot · Accepted Answer · 2012-05-27T21:10:17

Are you trying to remove the header for only one item while keeping the other headers? If so, I would not recommend this. It would be very confusing.

If trying to collapse all of them, you can bind the visibility of the PivotHeaderTemplate to a few things. One is the DataContext of your page

<controls:Pivot x:Name="MyPivot" >
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid Visibility="{Binding DataContext.HeaderVisibility, ElementName=MyPivot}">
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" />
            </Grid>
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>

Then you could have a HeaderVisibility property in the viewmodel of your page.

If you want to set the text to null of the headers, you can use a value converter

xaml:

<controls:Pivot x:Name="MyPivot" >
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid Visibility="{Binding Converter={StaticResource TextToVisibilityConverter}}">
            <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"/>
            </Grid>
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>

And the converter:

public class TextToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value == null) return Visibility.Collapsed;

        return (string.InNullOrEmpty(value.ToString()) ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Hiding and showing a databound PivotItem header during runtime

4 Answers