CODEWITHSUNDEEP
c#windows-phone-8pivotdatatemplate
Vigor
Vigor

Reputation: 1754

Windows Phone 8, remove the Header of each PivotItem

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?

Upvotes: 1

Views: 1710

Answers (3)

Pierrick Filiatrault
Pierrick Filiatrault

Reputation: 1

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

Upvotes: 0

Romasz
Romasz

Reputation: 29792

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.

Upvotes: 1

ROMAN
ROMAN

Reputation: 1576

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>

Upvotes: 0

Related Questions