为每个数据透视表项标题分配一个图像

Question

I am trying to assign an image for each of my pivot items's header instead of a Text .

I tried several methods (one was given by this post http://social.msdn.microsoft.com/Forums/wpapps/en-US/e7b5fd17-3465-4a94-81af-5c056c992c11/add-image-to-pivot-title?forum=wpdevelop )

I managed to assign the same image for my pivot but not one image for each header.

This is what I tried :

 <phone:Pivot.HeaderTemplate  >
                    <DataTemplate>

                        <Image Source="21.jpg"  Height="55" Width="55"/>

                    </DataTemplate>
                </phone:Pivot.HeaderTemplate>

This obviously gave me the same image for each headers ,

So i wanted to try something like this :

<phone:Pivot.HeaderTemplate  >
                    <DataTemplate>

                        <Image Source="{Binding}"  Height="55" Width="55"/>

                    </DataTemplate>
                </phone:Pivot.HeaderTemplate>


[...]




  <phone:PivotItem    ???  >


  <// phone:PivotItem  >

But then i don't know what to add my image path.

i used this method when i wanted to assign a text as a header and it worked :

  <phone:Pivot.HeaderTemplate  >
                    <DataTemplate>
                       <TextBlock Text="{Binding }" FontSize="88"  />


                    </DataTemplate>
                </phone:Pivot.HeaderTemplate>



  <phone:PivotItem    Header = "Title1"      />

How can i assign an image for each of my Header ?

Answer 1

You should be able to simply provide the image source in the Header:

<phone:PivotItem Header = "21.jpg" />

This sets the data context to use for the HeaderTemplate for that particular item.

Answer 2

You need to use a Converter Class to solve this issue.

    namespace MyImageConvertor
    {
        public class MyValueConverter : IValueConverter
        {
            #region IValueConverter Members

            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                try
                {
                    var uri = new Uri((string)(value), UriKind.RelativeOrAbsolute);
                    var img = new BitmapImage(uri);
                    return img;
                }
                catch
                {
                    return new BitmapImage();
                }
            }

            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {

                var img = value as BitmapImage;
                return img.UriSource.AbsoluteUri;
            }

            #endregion
        }
    }

Then use the this convertor in your xaml.

<UserControl x:Class="ValueConverter.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"
mc:Ignorable="d"
xmlns:this="clr-namespace:MyImageConvertor">
<UserControl.Resources>
    <this:MyValueConverter x:Key="ImageConverter"/> 
</UserControl.Resources>
<phone:Pivot>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
 <Image Source="{Binding ImageUrlProperty, Converter={StaticResource ImageConverter},Mode=TwoWay}"></Image>
 </DataTemplate>
 </phone:Pivot.HeaderTemplate>
</phone:Pivot>

Make sure you have the full image path in the ImageUrlProperty value like ..\\Images\\logo.png .