How to add image and keep text on PivotItem

Question

This question shows how to substitute PivotItem headers text with images, but I wish to have both (plus, the text should be a variable).

The goal is to replicate the following Navigation model:

_{(source: s-msft.com)}

Is it possible to adapt this simple XAML to achieve both text and image? If not, how to do it?

<Page
    x:Class="Lenny.Windows.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:Lenny.Windows.Views"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.Content>
                <Grid/>
            </CommandBar.Content>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Pivot>
            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"></Image>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png" >
                <Grid />
            </PivotItem>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
                <Grid/>
            </PivotItem>
            <PivotItem Header="/Assets/LockScreenLogo.scale-200.png">
                <Grid/>
            </PivotItem>
        </Pivot>
    </Grid>
</Page>

score 1 · Accepted Answer · answered Feb 24 '16 at 17:14

If you are using MVVM you can use a property from your ViewModel and add a textblock in the header template to make a binding with this property and you can change this value from your ViewModel.

I said this because you need the text needs to be variable.

If you are not using MVVM pattern you need to use the Binding Approach

https://msdn.microsoft.com/en-us/library/windows/apps/mt269383.aspx

in xaml you need to add a stackpanel with orientation = horizontal and add your text and your image inside all of them in your header template

How to add image and keep text on PivotItem

1 Answers1