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 ).

is it possible to add images, please suggest me

my xaml code is:

 <Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <controls:Pivot Title="MY APPLICATION" Name="mainPivot">
        <!--Pivot item one-->
        <controls:PivotItem Header="item1">
            <Grid>
                <Image Source="/SchoolList;component/Gallery/child.jpg"/>
            </Grid>
        </controls:PivotItem>

        <!--Pivot item two-->
        <controls:PivotItem Header="item2">
            <Grid>
                <Image Source="/SchoolList;component/Gallery/class.jpg"/>
            </Grid>
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

thanks in advance

in marked red area can we add images

score 7 · Answer 1 · answered Oct 17 '14 at 20:37

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

check the screen shot

score 1 · Answer 2 · answered Jan 21 '13 at 15:00

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.

answered Jan 21 '13 at 15:00

Toni Petrina

7,014
1
25
34

thanks for your answer, how can i display the images (same image that added in grid ) in place of item 1, item 2 (header). the given answer is displaying one image for all pivot items (in header ) and i updated my question with xaml code – kartheek Jan 22 '13 at 07:00

score 1 · Accepted Answer · answered Jan 28 '13 at 05:33

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

Can I provide another image for the pivot in which I can add a image which I want to show when the pivot is not showing. — Yawar, Feb 02 '15 at 13:22

how to add images for pivot item header

3 Answers3

Linked