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

Question

我刚刚在Windows 10 UWP项目中尝试了新的导航控件,它是tab/pivot.这是我的代码,它第一次运行良好...

<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

Answer 1

一个更简单的解决方案:

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

最初的错误是尝试绑定到属性Header,因为这是隐式的,因为这是标题模板.

Answer 2

我得到了解决方案！

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

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