windowswindows-phone-8windows-phonepivotviewer

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


Please check the below image for reference regarding my question.

enter image description here

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.


Solution

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