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.

The adapted style:

<Style x:Key="PivotWithoutHeader" TargetType="phone:Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
                        <!--<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>-->
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And the usage of my style:

<phone:Pivot Grid.Row="1" x:Name="Objects" ItemsSource="{Binding Profiles}" 
                                 Style="{StaticResource PivotWithoutHeader}">
                        <phone:Pivot.ItemContainerStyle>
                            <Style TargetType="phone:PivotItem">
                                <Setter Property="HorizontalAlignment" Value="Stretch" />
                            </Style>
                        </phone:Pivot.ItemContainerStyle>
                        <phone:Pivot.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Image Source="Resources/homer.png"/>
                                    <TextBlock Text="{Binding Name}"/>
                                    <TextBlock Text="#Sample" />
                                    <Button Margin="347,0,0,0" Command="{Binding DataContext.SettingsCommand, ElementName=Objects}" CommandParameter="{Binding .}" />
                                </Grid>
                            </DataTemplate>
                        </phone:Pivot.ItemTemplate>
                    </phone:Pivot>

My thought was just to remove or set the visibility of <Primitives:PivotHeadersControl> to collapsed but then my app crashes without any exception and the following message in my output window: "The program '[2332] TaskHost.exe' has exited with code -1073741819 (0xc0000005) 'Access violation'" appears.

I read some posts to move up the pivot so that the header is out of the screen but I need my customized pivot at the bottom of my page with some other controls above it.

Does anybody have an idea how to remove the header?

EDIT: For clarity I want to remove title and header.

Out

Did you figure out how to do this? – Politburo

Some kind of. Please look at the marked answer. – Out

Answer 1

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.

Out

I have an universal app and this did work https://mcmap.net/q/1893145/-windows-phone-8-remove-pivot-header just didn't gave me back my space – Chalkboard

+1 for being right about it not working, haven't tested the control though. – Secret

Answer 2

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>

Keon

Yes I would like to remove the title and the header. Sorry, my question wasn't clear about that. – Out

Replacing HeaderTemplate with empty DataTemplate should remove both Header and Title – Decimal

Answer 3

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}">

...

Wanderjahr

This works perfectly on a Windows Phone 8.1 solution. I believe with an empty data template for Header, this can be used for Universal apps as well. Thanks! – Hospitable

Answer 4

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

Shiftless

Thanks matt for the link. I would like to remove the title AND the header. Any suggestions for that? I already tried setting the opacity and the height (the title is still here but overlapped by the content of the pivotitem). – Out

Answer 5

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>

Cyanosis

Answer 6

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>

Delladelle