如何在 PivotItem 上添加图像并保留文本

Question

This question 展示了如何用图像替换 PivotItem headers 文本，但我希望同时拥有这两者（另外，文本应该是一个变量）。

目标是复制以下导航模型：

_{（来源：s-msft.com）}

是否可以改编这个简单的 XAML 来同时实现文本和图像？如果没有，怎么办？

<Page
    x:Class="Lenny.Windows.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:Lenny.Windows.Views"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Pivot>
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"></Image>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
                <Grid />
            </PivotItem>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
                <Grid/>
            </PivotItem>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
                <Grid/>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

Answer 1

如果您使用的是 MVVM，您可以使用 ViewModel 中的属性并在 header 模板中添加一个文本块以与此属性进行绑定，您可以更改此来自您的 ViewModel 的值。

我这么说是因为你需要文本需要可变。

如果您不使用 MVVM 模式，则需要使用绑定方法

https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx

在 xaml 中，您需要添加一个 orientation = horizontal 的堆叠面板，并在 header 模板

的所有面板中添加文本和图像

如何在 PivotItem 上添加图像并保留文本

How to add image and keep text on PivotItem

xaml

win-universal-app