如何重新设置数据透视表头的样式

Question

我最近遇到了一个有趣的应用程序，我想对我的解决方案进行一些修改，使其类似于他们的 Pivot Header 模板。该应用程序可以在这里看到http://www.windowsphone.com/en-us/store/app/fhotoroom/acad1eed-3149-4b6c-bc4b-8567f409e3e0

当用户在枢轴项目之间滑动时，右上角的图标会相应地突出显示。我引用了一个解决方案，其中图标是路径，并且当用户在数据透视项之间滑动时，图标会改变颜色。唯一的事情是，我想在右侧显示图标，而在左侧，名称更改为相应的枢轴标题名称（但一次只显示一个名称）。我对如何开始这个有点迷茫。我的想法是，从 blend 到应用程序页面中获取一个枢轴样式副本，然后以某种方式重新对其进行重新设计，以便图标显示在右侧，而名称在左侧。我是否正确地考虑了这一点？我如何开始改变风格以反映这样的事情？有没有更好的办法？

Answer 1

我认为数据透视表头与您想要实现的行为不匹配。默认情况下，每个数据透视项目都有自己的标题，如果我没有误解，在这种情况下，您有一个用于整个数据透视控件的标题，标题中显示的文本和突出显示的图标会根据活动的数据透视项目而变化。

如果是这样，删除数据透视表头会更容易。然后在页面顶部创建一个元素作为数据透视表头。将选定的枢轴索引绑定到模型中的属性。然后将标题元素中的文本绑定到一个属性，该属性根据选定的枢轴索引返回不同的字符串。使用类似的数据绑定概念来突出显示图标（您已经为此参考了解决方案）。示例：

<Grid Background="DarkBlue">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding HeaderText}" Foreground="White"
               FontSize="40" Margin="10,5,5,5"/>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!--Some icons here-->
        ....
    </StackPanel>
</Grid>
<phone:Pivot SelectedIndex="{Binding PivotIndex, Mode=TwoWay}" Grid.Row="1">
    <phone:PivotItem>
        ...
    </phone:PivotItem>
    ....
</phone:Pivot>

在视图模型中：

private int _pivotIndex;
public int PivotIndex
{
    get { return _pivotIndex; }
    set { _pivotIndex = value; NotifyPropertyChanged("PivotIndex"); }
}

public string HeaderText
{
    get { return GetHeaderByIndex(PivotIndex); }
}

private string GetHeaderByIndex(int pivotIndex)
{
    switch (pivotIndex)
    {
        case 0:
            return "#recent";
        case 1:
            return "#favorite";
        default:
            return "";
    }
}

怎么样，或者不是这样？

Answer 2

诺基亚制作了一个非常好的教程如何做到这一点。您可以通过教程或直接下载页面底部的代码。

Tabbed interface with Pivot animation for Windows Phone