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 。

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

2 个答案: