C# （Windows 10 UWP）如何将PivotItem控件中的Header属性绑定到Pivot控件中的自定义HeaderTemplate？

我刚刚在Windows10UWP项目中尝试了新的导航控件，即选项卡/枢轴。这是我的代码，它第一次运行得很好

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot>
        <PivotItem x:Name="PivotItem_Inbox" Header="Inbox">
            <Grid/>
        </PivotItem>
        <PivotItem x:Name="PivotItem_Draft" Header="Draft">
            <Grid/>
        </PivotItem>
    </Pivot>
</Grid>

XAML设计视图：

我想修改它的标题模板，这样我就可以分配新的背景颜色、字体大小、视觉状态等。所以我决定声明HeaderTemplate元素标记

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot>
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Green">
                    <TextBlock Text="{Binding Header}" FontSize="24" FontFamily="Segoe UI"/>
                </Grid>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <PivotItem x:Name="PivotItem_Inbox" Header="Inbox">
            <Grid/>
        </PivotItem>
        <PivotItem x:Name="PivotItem_Draft" Header="Draft">
            <Grid/>
        </PivotItem>
    </Pivot>
</Grid>

但是在声明HeaderTemplate之后，现在我似乎缺少了每个pivot项控件中的标题文本（这是前一张图像中的“收件箱”和“草稿”）。我已经尝试了很多方法来重新绑定它，但仍然没有成功。请帮忙

XAML设计视图2（最终结果）：

我得到了解决方案

要创建自定义pivot标头，需要创建XAML用户控件。这是我的用户控件，我将其命名为TabHeader.xaml：

<UserControl
x:Class="Edelweisuniversalapp.Pages.Dashboard.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Edelweisuniversalapp.Pages.Dashboard"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="128"
d:DesignWidth="128">

<Grid Height="128" Width="128">
    <StackPanel>
        <FontIcon
            HorizontalAlignment="Center"
            Margin="0,12,0,0"
            Glyph="{Binding Glyph}"
            FontSize="16"
            />
        <TextBlock
            FontFamily="Segoe UI"
            Text="{Binding Label}"
            Style="{StaticResource CaptionTextBlockStyle}"
            LineStackingStrategy="BlockLineHeight"
            LineHeight="14"
            MaxLines="2"
            IsTextScaleFactorEnabled="False"
            TextAlignment="Center"
            HorizontalAlignment="Center"
            Margin="2,5,2,7"
        />
    </StackPanel>

</Grid>

然后您可以在pivot控件中使用用户控件，如下所示：

<Pivot Style="{StaticResource TabsStylePivotStyle}" Grid.Row="0">            
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Inbox" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content1"/>
            </PivotItem.Content>
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Draft" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content2"/>
            </PivotItem.Content>
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:TabHeader Height="124" Label="Outbox" Glyph="&#xE719;"/>
            </PivotItem.Header>
            <PivotItem.Content>
                <TextBlock Text="Content content content3"/>
            </PivotItem.Content>
        </PivotItem>
    </Pivot>

---

结果是一个更简单的解决方案：

<Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid Background="Green">
            <TextBlock Text="{Binding}" FontSize="24" FontFamily="Segoe UI"/>
        </Grid>
    </DataTemplate>
</Pivot.HeaderTemplate>

---

最初的错误是试图绑定到属性

标题

，这是隐式的，因为这是标题模板。

如果有人想知道，您可以使用Windows上的字符映射程序查看可用的字形代码。Windows 10中的字体是“Segoe MDL2 Assets”。@JakubWisniewski，答案是：设置

HeaderClipper.HorizontalContentAlignment

，给它一个值=

“Center”

。

<Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid Background="Green">
            <TextBlock Text="{Binding}" FontSize="24" FontFamily="Segoe UI"/>
        </Grid>
    </DataTemplate>
</Pivot.HeaderTemplate>