(Windows 10 UWP) 如何将 PivotItem 控件中的 Header 属性绑定到 Pivot 控件中的自定义 HeaderTemplate？答案

【问题标题】：(Windows 10 UWP) How to bind Header property in PivotItem control into custom HeaderTemplate in Pivot control?(Windows 10 UWP) 如何将 PivotItem 控件中的 Header 属性绑定到 Pivot 控件中的自定义 HeaderTemplate？
【发布时间】：2015-09-30 15:40:47
【问题描述】：

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

<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 设计视图：http://i.stack.imgur.com/4qMmO.jpg

我想修改它的标题模板，以便我可以分配新的背景颜色、字体大小、视觉状态等。所以我决定声明 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 之后，现在我似乎缺少每个透视项控件中的标题文本（即上图中的“收件箱”和“草稿”）。我已经尝试了很多方法来重新绑定它，但仍然不成功。请帮忙！

XAML 设计视图 2（最终结果）：http://i.stack.imgur.com/ZoS0a.jpg

【问题讨论】：

标签： c# xaml

【解决方案1】：

我找到了解决方案！

要创建自定义数据透视表头，您需要创建一个 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>

下面是 TabHeader.xaml.cs ：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace Edelweisuniversalapp.Pages.Dashboard
{
public sealed partial class TabHeader : UserControl
{
    public string Glyph
    {
        get { return (string)GetValue(GlyphProperty); }
        set { SetValue(GlyphProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Glyph.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GlyphProperty =
        DependencyProperty.Register("Glyph", typeof(string), typeof(TabHeader), null);

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Label.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof(string), typeof(TabHeader), null);

    public TabHeader()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }
}
}

然后您可以像这样在枢轴控件中使用用户控件：

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

这是结果http://i.stack.imgur.com/gUF46.jpg

【讨论】：

如果有人想知道，您可以使用 Windows 上的字符映射程序查看可用的字形代码。 Windows 10 中的字体是“Segoe MDL2 Assets”。
@JakubWisniewski，答案在这里：blog.hompus.nl/2015/09/04/… 设置 HeaderClipper.HorizontalContentAlignment，给它一个值 = "Center"。

【解决方案2】：

一个更简单的解决方案：

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

最初的错误是试图绑定到属性Header，但这是隐含的，因为这是标题模板。

【讨论】：