Windows Phone 8, remove the Header of each PivotItem

Question

I struggled with this problem for hours. I want to use the control Pivot as a Pager in Windows Phone, so I want to remove the Header of each PivotItem. What I have done is to create a DataTemplage for the Pivot's HeaderTemplate, as below:

<DataTemplate x:Name="DataTemplateScrollTestItemHeader" 
                  x:Key="DataTemplateScrollTestItemHeader">
        <TextBlock
            Height="0"
            Width="0"
            Margin="0,0,0,0"
            Padding="0,0,0,0"
            Text=""/>
</DataTemplate>

In code, I set the HeaderTemplate to this DataTemplate:

PivotTestType.HeaderTemplate = DataTemplateScrollTestItemHeader;

What happened is the header text is disappeared, but the header still occupied some space. I have read this： Windows Phone 8: remove pivot header But it's the same with my method. It can't remove the space of the Header. Anyone know how to handle this?

Try this style for Pivot to hide headers - http://stackoverflow.com/a/28767442/1219241 — alcsan, Feb 27 '15 at 14:37

score 1 · Answer 1 · edited May 23 '17 at 11:56

I think the best would be to underdstand how the pivot is constructed (with this you will be able to do whatever you want with your pivot), I wrote a small example which may help you:

<phone:Pivot Name="myPivot" VerticalAlignment="Stretch" Title="myPivot">
   <phone:Pivot.Template>
       <ControlTemplate TargetType="phone:Pivot">
           <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                   VerticalAlignment="{TemplateBinding VerticalAlignment}">
             <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
              </Grid.RowDefinitions>

              <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
                Content="{TemplateBinding Title}" Margin="10,0,0,0"/>

              <primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" Margin="0,5,0,5"/>

              <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
          </Grid>
       </ControlTemplate>
    </phone:Pivot.Template>
    <phone:Pivot.HeaderTemplate>
        <DataTemplate>
           <Grid Height="30">
             <TextBlock Text="{Binding}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" Margin="0,0,10,0"/>
           </Grid>
        </DataTemplate>
    </phone:Pivot.HeaderTemplate>
    <phone:PivotItem Margin="0">

    </phone:PivotItem>
 </phone:Pivot>

With the code above you can change height, background color etc. of pivot title, header itempresenter and so on.
And don't forget to add xmlns-primitives at the beginning of xaml:

xmlns:primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"

You can also find more on this site or MSDN: this, MSDN.

ROMAN · Answer 2 · 2013-12-15T08:56:52.307

0

Remove all Headers from PivotItems and build (F6) the application.

Result

<phone:Pivot Title="MY APPLICATION">

            <phone:PivotItem>

               // Some code

            </phone:PivotItem>

            <phone:PivotItem>

               // Some code

            </phone:PivotItem>

        </phone:Pivot>

edited Dec 15 '13 at 08:56

answered Dec 15 '13 at 08:41

ROMAN

1,476
2
11
24

Hi Roman, If I remove headers, the space is still be occupied. – Vigor Dec 15 '13 at 08:46
Did you build, rebuild or clean the project ? – ROMAN Dec 15 '13 at 08:47
Be sure you don't set the headertemplate anymore! Just leaving it out will fix it! ( so not in code, nore in xaml ) – Depechie Dec 16 '13 at 09:12

score 0 · Answer 3 · answered Mar 27 '14 at 15:31

Hy, Here is my solution to remove the header and title :

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="PivotWithoutHeaderTitleStyle" TargetType="phone:Pivot">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="Transparent"/>
        <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="*"/>
                        </Grid.RowDefinitions>
                        <ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="0" Height="0"/>
                        <Primitives:PivotHeadersControl x:Name="HeadersListElement"   Margin="0" Height="0"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ImagePivotItemStyle" TargetType="phone:PivotItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:PivotItem">
                    <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="Pivot">
                                <VisualState x:Name="Right"/>
                                <VisualState x:Name="Left"/>
                                <VisualState x:Name="Center"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>  <phone:Pivot Name="ImagesPivot" Margin="0,0,0,0" Style="{StaticResource PivotWithoutHeaderTitleStyle}" ItemContainerStyle="{StaticResource ImagePivotItemStyle}">
        <phone:Pivot.TitleTemplate>
            <DataTemplate/>
        </phone:Pivot.TitleTemplate>
        <phone:Pivot.HeaderTemplate>
            <DataTemplate/>
        </phone:Pivot.HeaderTemplate>
        <phone:Pivot.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </Grid>
            </DataTemplate>
        </phone:Pivot.ItemTemplate>
    </phone:Pivot>

Hope that will help

Windows Phone 8, remove the Header of each PivotItem

3 Answers3