2

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 ?

2 Answers 2

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.