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

Question

我刚刚尝试了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设计视图：​​

我想修改它的头模板，以便我可以指定新的背景颜色，字体大小，视觉状态等等。所以我决定声明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

我得到了解决！

要创建自定义透视标题，您需要创建一个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

Answer 2

一个更简单的解决方案：

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

原来的错误是试图绑定到该属性Header，当这是隐含的，因为这是头模板。