如何在Windows Phone 8中的Pivot Header中添加图像和按钮

Question

请查看下面的图片以获取有关我的问题的参考。

我正在尝试使用注销按钮在PIVOT标题中实现一个公司徽标。

以与上述链接类似的方式，即Bank of America windows phone app。

我是Windows Phone 8应用程序开发的新手。

任何有关实施此概念的解决方案/指导/帮助将不胜感激。

Answer 1

更新1

在xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone"

顶部添加<phone:PhoneApplicationPage ... />

---

您需要为Pivot创建自定义样式，因为Pivot的标题需要满足第一列和第三列定义必须为的条件：Width =“Auto”。您无法像这样直接分配UI元素。

<phone:Pivot>
    <phone:Pivot.Title>
        <!-- XAML Elements -->
    </phone:Pivot.Title>
    <phone:PivotItem>
    .....
</phone:Pivot>

请尝试以下代码。

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="PivotStyle1" TargetType="phone:Pivot">
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Grid/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="phone:Pivot">
                    <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>

                        <Grid Background="#d60019" Height="50">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <TextBlock
                                HorizontalAlignment="Left"
                                Margin="12,0,0,0"
                                Foreground="White"
                                FontSize="20"
                                VerticalAlignment="Center"
                                Text="Bank of America" 
                                Tap="TextBlock_Tap_1"/>

                            <ContentControl
                                ContentTemplate="{TemplateBinding TitleTemplate}"
                                Content="{TemplateBinding Title}" 
                                Grid.Column="1"
                                HorizontalAlignment="Left"
                                Margin="0,0,0,-7"
                                VerticalAlignment="Center"
                                Style="{StaticResource PivotTitleStyle}"/>

                            <TextBlock
                                Foreground="White"
                                FontSize="20"
                                Margin="0,0,10,0"
                                Grid.Column="2"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Text="sign out" />

                        </Grid>

                        <Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
                        <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot">
    <phone:Pivot
    Title=""
    Style="{StaticResource PivotStyle1}">

        <phone:PivotItem
        Header="accounts" />

        <phone:PivotItem
        Header="deals" />

    </phone:Pivot>
</Grid>