在 windows phone 8 中像 instagram 一样透视项目标题答案

【问题标题】：Pivot item headers like instagram in windows phone 8在 windows phone 8 中像 instagram 一样透视项目标题
【发布时间】：2014-04-25 14:20:54
【问题描述】：

我需要您的想法，我如何将 Segoe UI 字体或图标放入 Pivot 标题。我开始了一个新项目，并将基本的Pivot 放在我的 XAML 上，如果您要求越来越多的代码，仅此而已。

这是我想知道他们如何将项目作为图标而不是文本的应用程序链接。 http://instagram.com/

我需要示例代码而不是童话或成功故事。

        <phone:PivotItem CacheMode="{x:Null}"   FontFamily="Segoe UI Symbol" Header="feed"  >

【问题讨论】：

我尝试将&#xe158; 放入pivotitem 名称并直接将字体系列更改为segoe ui 符号，但它显示矩形符号。
在您的问题中显示它，以便试图帮助的读者有一些开始。例如，您如何指定 FontFamily，例如，如果您尝试使用 FontFamily="Segoe UI Symbol" 而不是 FontFamily="Symbol"，或者使用 Symbol Enumeration 而不是 unicode 可能不是一个更好的主意。
这是我所做的，但没有工作，我该怎么办？

标签： c# .net xaml azure windows-phone-8

【解决方案1】：

事实证明，Nokia Developer Wiki 上有一个great article 可以做到这一点。

它的要点是不为 PivotItem 设置 Header，而是在页面顶部显示一个 ListBox。然后将 ListBox SelectedIndex 链接到 Pivot SelectedIndex。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ListBox SelectedIndex="{Binding SelectedIndex, ElementName=ContentPivot, Mode=TwoWay}">
        <!-- Items -->
    </ListBox>
    <phone:Pivot x:Name="ContentPivot">
        <!-- Items -->
    </phone:Pivot>
</Grid>

【讨论】：

【解决方案2】：

This is the actual answer 在 MSDN 论坛中。

..this 是它在手机屏幕上的样子。

只需使用事件处理程序。点击图像和SelectionChanged枢轴。

这是我使用的 xaml：

<Grid x:Name="LayoutRoot" Background="#2b5a83">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Grid VerticalAlignment="Top" Height="82" 
          Background="#2b5a83" Canvas.ZIndex="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image x:Name="icon0" Grid.Column="0" 
               Source="/Assets/ApplicationIcon.png" 
               Opacity="0.5" Tap="icon0_Tap"/>
        <Image x:Name="icon1" Grid.Column="1" 
               Source="/Assets/ApplicationIcon.png" 
               Opacity="0.5" Tap="icon1_Tap" />
    </Grid>

    <!--Pivot Control-->
    <phone:Pivot Grid.Row="1" x:Name="MainPivot" 
                 Foreground="White" Background="#2b5a83" 
                 SelectionChanged="Pivot_SelectionChanged">

        <!--Pivot item one-->
        <phone:PivotItem>
            <TextBlock>
                Deneme
            </TextBlock>
        </phone:PivotItem>

        <!--Pivot item two-->
        <phone:PivotItem>
            <TextBlock>
                Deneme 2
            </TextBlock>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

... 和 CSharp 代码隐藏如下：

    private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        switch (MainPivot.SelectedIndex)
        {
            case 0:
                Select0();
                break;
            case 1:
                Select1();
                break;
            default:
                MessageBox.Show("Add another case and write it's new method, " + Environment.NewLine +
                    "Also bind the `Tap` event of another image to a new handler calling this newly created method.");
                break;
        }
    }

    private void Icon1_Tap(object sender, GestureEventArgs e)
    {
        Select1();
    }

    private void Select0()
    {
        icon0.Opacity = 1.0;
        icon1.Opacity = 0.5;
        MainPivot.SelectedIndex = 0;
    }

    private void Select1()
    {
        icon1.Opacity = 1.0;
        icon0.Opacity = 0.5;
        MainPivot.SelectedIndex = 1;
    }

    private void icon0_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        Select0();
    }

    private void icon1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        Select1();
    }

试试吧！ =) ...并让我知道结果:)

【讨论】：