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

Question

请检查下图以供参考我的问题。

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

以与上面链接所示类似的方式，即美国银行的 windows 手机应用程序。

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