Clever Geek Handbook

How to add images for the title of the title element

We are developing a simple application for training pivot control

in wp7.

Is it possible to add images for the pivot element instead of the text in the title (red label area below).

Can images be added please suggest me

my xaml code:

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

early

in marked red area can we add images

+3


source to share


3 answers


with @toni petrina's idea, I added images to HeaderTemplate

in the rotary control with data binding

. I have implemented an image gallery in my application using rotation with images in the header template, gives a great look and feel

Xaml code :

<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 created a simple class

one with one string property

to save images source

and prepare a List

and assigned to pivot ItemsSource

on loaded page

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


source


use this advice:

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

and then set the Pivot Item title as



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

check the screen shot

+7


source


Yes it is. Just use HeaderTemplate

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

May I also add that while it is generally possible, it is not recommended for general use. Unless you need pivot functionality for something completely different. This is somewhat unintuitive.

+1


source






More articles:


All Articles