How to add image and button in Pivot Header in windows phone 8

Question

Please check the below image for reference regarding my question.

I am trying to implement a firm logo in PIVOT Header with a signout button.

In the similar way as shown in above link, i.e. Bank Of America windows phone app.

I am new to windows phone 8 application development.

Any solution/guidance/help for implementing this concept would be appreciated.

Answer 1

UPDATE 1

Add xmlns:Primitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone" at top <phone:PhoneApplicationPage ... />

---

You need to create custom style for Pivot because Pivot's title needs to fulfill condition that first and third column definition must be: Width="Auto". You can't assign UI elements directly like this.

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

Try the below code.

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