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