how to add images for pivot item header

Question

Am developing a simple app for learning pivot control in wp7.

can we add images for pivot item instead of text in header(red mark area in bellow image )

Answer 1

Yes it is. Simply use HeaderTemplate

<Pivot>
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <Image ... />
        </DataTemplate>
    </Pivot.HeaderTemplate>
</Pivot>

May I also add that while this is generally possible, it is not recommended for the general use. Unless you need pivot functionality for something completely different. It is somewhat non intuitive.

Answer 2

use this tip :

<phone:Pivot>
        <phone:Pivot.HeaderTemplate>
            <DataTemplate>
                <Image Source="{Binding}" /> // important
            </DataTemplate>
        </phone:Pivot.HeaderTemplate> 
</phone:Pivot>

and then set your Pivot Item header as

<phone:PivotItem Header="path-to-image" >

Answer 3

with the Idea of @toni petrina i added images to the HeaderTemplate to the pivot control using data binding. am implemented image gallery in my app using pivot with images in header template gives great look and feel

Xaml code is :

<controls:Pivot Title="Photo Gallery" Name="mainPivot" ItemsSource="{Binding PivotImages}">
        <controls:Pivot.HeaderTemplate>
            <DataTemplate>
                <Image Name="play" Source="{Binding imgSrc}" Height="80" Width="120" Margin="0,10,0,0"/>
            </DataTemplate>
        </controls:Pivot.HeaderTemplate>
        <controls:Pivot.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Name="mainImage" Source="{Binding imgSrc}" />
                </Grid>
            </DataTemplate>
        </controls:Pivot.ItemTemplate>
</controls:Pivot>

and i have created a simple class with one string property to save the images source and prepared a List and assigned to the pivot ItemsSource on page loaded event

mainPivot.ItemsSource = items; // items is the list with image sources