Назначить изображение для каждого заголовка элемента Pivot

Question

Я пытаюсь назначить изображение для каждого из своих заголовков элементов сводной таблицы вместо текста.

Я попробовал несколько методов (один был дан этот пост http://social.msdn.microsoft.com/Forums/wpapps/en-US/e7b5fd17-3465-4a94-81af-5c056c992c11/add-image-to-pivot-title?forum=wpdevelop)

мне удалось присвоить один и тот же образ для моего поворота, но не одно изображение для каждого заголовка.

Это то, что я пробовал:

<phone:Pivot.HeaderTemplate > 
        <DataTemplate> 

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

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

Это, очевидно, дал мне тот же образ для каждого заголовка,

Так я хотел бы попробовать что-то вроде этого:

<phone:Pivot.HeaderTemplate > 
        <DataTemplate> 

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

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


[...] 




    <phone:PivotItem ??? > 


    <// phone:PivotItem > 

Но тогда Я не знаю, что добавить мой путь к изображению.

я использовал этот метод, когда я хотел назначить текст в качестве заголовка, и она работала:

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


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



    <phone:PivotItem Header = "Title1"  /> 

Как я могу присвоить изображение для каждого из моего заголовка?

Answer 1

Вы должны быть в состоянии просто указать источник изображения в заголовке:

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

Это задает контекст данных для использования в HeaderTemplate для этого конкретного пункта.

Answer 2

Для решения этой проблемы вам необходимо использовать класс конвертера.

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

Затем используйте этот преобразователь в своем 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> 

Убедитесь, что вы имеете полный путь к изображению в ImageUrlProperty значение как .. \ Images \ logo.png.