如何为数据透视表项标题添加图片

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>

提前感谢

在红色标记区域中，我们可以添加图片吗？

- kartheek

Answer 1

使用这个提示：

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

然后将您的枢轴项标题设置为

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

- Karthik Krishna Baiju

Answer 2

是的，它是相关的。只需使用HeaderTemplate即可。

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

我可以补充一下，虽然这通常是可能的，但并不建议普遍使用。除非您需要针对完全不同的事物进行数据透视功能。它有些不直观。

- Toni Petrina

---

谢谢您的回答，我该如何在项目1、项目2（标题）的位置上显示图像（与网格中添加的相同图像）？给出的答案为所有枢轴项（在标题中）显示一个图像，我已经更新了我的问题并附上了XAML代码。 - kartheek

Answer 3

借鉴@toni petrina的想法，我使用数据绑定将图片添加到了Pivot控件的HeaderTemplate中。在我的应用程序中，使用带有图像的Pivot头模板实现了图像库，效果非常好。

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>

我创建了一个简单的类，其中有一个字符串属性来保存图像源，并准备了一个List，并在页面加载事件上将其分配给pivot的ItemsSource

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

- kartheek

---

我可以为枢轴提供另一张图片吗？当枢轴未显示时，我想添加一张要显示的图片。 - Yawar