Windows Phone 8: remove pivot header

Question

I have got a strange problem with the styling of my pivot control. I edited a copy of the default template in Expression Blend because I want to remove the entire header.

Answer 1

dBlisse's solution worked for me to hide the header template but for title I played with margins and the below trick worked for me, not sure if this is a good idea, but checked on different resolutions and looks fine.

Notice the Margin="0,-39,0,0" for stack panel below:

<phone:Pivot Background="Transparent" Margin="-12,0">
    <phone:Pivot.ItemTemplate>
        <DataTemplate>
             <StackPanel Margin="0,-39,0,0">
                  YOUR CONTROLS HERE
             </StackPanel>
        </DataTemplate>
    </phone:Pivot.ItemTemplate>
    <phone:Pivot.HeaderTemplate>
        <DataTemplate/>
    </phone:Pivot.HeaderTemplate>
</phone:Pivot>

Answer 2

Try this one:

<UserControl.Resources>
    <ResourceDictionary>
        <Thickness x:Key="PivotPortraitThemePadding">0,0,0,0</Thickness>
        <Thickness x:Key="PivotLandscapeThemePadding">0,0,0,0</Thickness>
        <Style x:Key="PivotWithoutHeaderStyle" TargetType="Pivot">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <Grid/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Pivot">
                        <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="Orientation">
                                    <VisualState x:Name="Portrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Landscape">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}" Height="0"/>
                            <ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="0" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
                                <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                    <PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}" Height="0" Margin="0" Visibility="Collapsed">
                                        <PivotHeaderPanel.RenderTransform>
                                            <CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
                                        </PivotHeaderPanel.RenderTransform>
                                    </PivotHeaderPanel>
                                    <ItemsPresenter x:Name="PivotItemPresenter">
                                        <ItemsPresenter.RenderTransform>
                                            <TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
                                        </ItemsPresenter.RenderTransform>
                                    </ItemsPresenter>
                                </PivotPanel>
                            </ScrollViewer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</UserControl.Resources>

...

    <Pivot Style="{StaticResource PivotWithoutHeaderStyle}">

...

Answer 3

I finally figured it out! (I'm building a Universal Windows 10 App and had the same question.)

Add a blank HeaderTemplate to your Pivot controls as dBlisse suggested:

<Pivot ItemsPanel="{StaticResource ItemsPanelTemplate1}">
    <Pivot.HeaderTemplate>
        <DataTemplate/>
    </Pivot.HeaderTemplate>
</Pivot>

And add this template in App.xaml:

<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    <Grid Margin="0,-48,0,0"/>
</ItemsPanelTemplate>

Answer 4

So removing the header AND the title doesn't work anymore on Windows Phone 8. So I ported an existing control from: http://www.codeproject.com/Articles/136786/Creating-an-Animated-ContentControl to Windows Phone 8.

Answer 5

You can remove the PivotItem header on the Pivot Control by replacing the Pivot.HeaderTemplate property with a blank DataTemplate. If you're trying to remove the Title rather than the Header, then I would like to know the solution too. ^^

<phone:Pivot ItemsSource="{Binding Data}" ItemTemplate="{StaticResource CustomPivotItemTemplate}">
    <phone:Pivot.HeaderTemplate>
        <DataTemplate/>
    </phone:Pivot.HeaderTemplate>
</phone:Pivot>

Answer 6

The template of the Pivot control was changed in WP8 and it now requires that the PivotHeadersControl be present in the template. (You could remove it in WP7.x)
Just have a zero height or other "empty" content in your header instead.

I'm not aware of this having been publically documented as most people who've upgraded to WP8 are using the shim to the old version of the control. However, I Noted this at the end of a blog article at http://blog.mrlacey.co.uk/2013/01/pivot-and-panorama-have-moved-and.html