如何ReStyle Pivot标头

Question

我最近遇到了一个有趣的应用程序，我想稍微修改我的解决方案，使其类似于他们的Pivot标题模板。该应用可在此处查看http://www.windowsphone.com/en-us/store/app/fhotoroom/acad1eed-3149-4b6c-bc4b-8567f409e3e0

当用户在枢轴项之间滑动时，右上角的图标会相应地突出显示。我引用了一个解决方案，其中图标是路径，当用户在枢轴项之间滑动时，图标会改变颜色。唯一的问题是，我想在右侧显示图标，而在左侧，名称将更改为相应的数据透视表标题名称（但一次只显示一个名称）。我有点迷失如何开始这个。我的想法是，将一个透视样式的副本从混合到应用程序页面，然后以某种方式重新设置，以便在名称在左侧时右侧显示图标。我是否正确地想到了这一点？我怎么可能开始改变风格来反映这样的事情？还有更好的方法吗？

Answer 1

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

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

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

在viewmodel中：

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