如何为枢轴项目标题添加图像

Question

开发了一个简单的应用程序，用于在wp7中学习pivot control。

我们可以为枢轴项而不是标题中的文本添加图像（下图中的红色标记区域）。

是否可以添加图片，请建议我

我的xaml代码是：

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

提前致谢

Answer 1

使用此提示：

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

然后将您的Pivot项目标题设置为

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

Answer 2

是的。只需使用HeaderTemplate

即可

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

我还要补充一点，虽然这通常是可行的，但不推荐用于一般用途。除非您需要针对完全不同的东西的枢轴功能。这有点不直观。

Answer 3

使用@toni petrina的想法，我使用HeaderTemplate将图像添加到data binding到枢轴控件。我在我的应用程序中实现了图像库，使用带有头部模板中图像的数据透视图，可以提供出色的外观和感觉

Xaml代码是：

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

我创建了一个简单的class，其中包含一个string property以保存images source并准备了List并在页面加载时分配给了ItemsSource事件

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