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.

Answer 1

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

...