how to put images on tabs (pivots) in windows 10 app

Question

I have read most of the Windows 10 UI design guidelines and here are some pictures of examples of a pivot navigation that is essentially a tab navigation with images: https://msdn.microsoft.com/en-us/library/windows/apps/dn997788.aspx#examples

I was unable to find out how to put images on these tabes (pivotitems).

    <Pivot x:Name="mainTabs">
        <PivotItem x:Name="Header1" Header="Header1" Background="{x:Null}" Foreground="{x:Null}"/>
        <PivotItem x:Name="Header2" Header="Header2"></PivotItem>
        <PivotItem x:Name="Header3" Header="Header3"></PivotItem>
        <PivotItem x:Name="Header4" Header="Header4"></PivotItem>
        <PivotItem x:Name="Header5" Header="Header5"></PivotItem>
    </Pivot>

HeaderTemplate works OK for replacing text with pictures but then text is missing, and I would like to keep the text like shown in Windows 10 UI guidelines.

    <Pivot x:Name="mainTabs">
        <Pivot.HeaderTemplate>
            <DataTemplate>
                <Image Source="{Binding}"></Image>
            </DataTemplate>
        </Pivot.HeaderTemplate>
        <PivotItem x:Name="Header1" Header="Assets/play1.png"></PivotItem>
        <PivotItem x:Name="Header2" Header="Assets/play2.png"></PivotItem>
    </Pivot>

Answer 1

Nokia Developer website had some really great article about how to make a tabbed pivot headers like official Instagram or Twitter app in Windows Phone.However , that article is not available for now because Microsoft decided to ignore all of Nokia Developer content , unfortunately.

I researched a bit and found this article instead

http://depblog.weblogs.us/2013/08/29/twitterate-your-windows-phone-app/

PivotItem headers' are being used in PivotHeaderTemplate AFAIR.Basically you can follow the article above or just change your Pivot's HeaderTemplate.

Write a converter that converts your Header property to Text and returns it.

public class ImageToTextConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            var sent = value as string;
            switch(sent)
            {
                case "Assets/play1.png":
                    return "Play 1 Header";
                case "Assets/play2.png":
                    return "Play 2 Header";
                default:
                    return string.Empty;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

Add this converter's namespace to your XAML and define it in your Resources.Then change your template as

<DataTemplate>
    <StackPanel>
        <Image Source="{Binding}"></Image>  
        <TextBlock Text="{Binding Source='',Converter={StaticResource ImageToTextConverter}}" />
    </StackPanel>
</DataTemplate>

Answer 2

I know this post is old and no one likes to kick a dead horse, but I figured I might share my solution that doesn't rely on a value converter and allows you to simply set an image with text. Just for anyone who is looking to add images or anything to a pivot item since there does not seam to be a simple solution out there.

Add a stack panel to the pivot item header with image and text. That's it.

<Pivot x:Name="Tabs" Grid.Row="1" Grid.Column="0" >
            <PivotItem>
                <PivotItem.Header>
                  <StackPanel VerticalAlignment="Top">
                        <Image Width="25" Height="25" Source="../Assets/Home.png"/>
                        <TextBlock Text="Home Tab"/>
                  </StackPanel>  
                </PivotItem.Header>
                <Grid>
                    <TextBlock Text="asdfasfasdfasdfasdf"/>
                </Grid>
            </PivotItem>
            <PivotItem>
                <PivotItem.Header>
                <StackPanel VerticalAlignment="Top">
                    <Image Width="25" Height="25" Source="../Assets/Schedule.png"/>
                    <TextBlock Text="Home Tab"/>
                </StackPanel>
                </PivotItem.Header>
                <Grid>
                    <TextBlock Text="134123475"/>
                </Grid>
            </PivotItem>
        </Pivot>