带图像的Windows 8.1 LongListSelector

Question

我的应用程序中有一个长长的列表选择器。列表应该显示一个图标和标题在它下面。如下图所示，它显示为一个网格。

​

​

该图标应从服务器下载并显示，该图标作为字节数组从服务器下载，可用于生成位图。如何将位图绑定到LongListSelectors模板中的图像。我的数据模板如下。

  <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="5,5,5,5" Background="{StaticResource PhoneAccentBrush}">
                            <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Image Height="70" Width="70"  Margin="10,0,0,0" Source="/Assets/Images/appimg.png">
                                </Image>
                            </Grid>
                            <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">        
                            <TextBlock Margin="5,5,5,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap" Text="{Binding appTitle}"></TextBlock>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
 </phone:LongListSelector.ItemTemplate>

目前，在模板中，图标路径是硬编码的。请提供一些关于如何将位图绑定到图像的输入。

Answer 1

使用凸起器

假设电话项目的程序集名称是: PhoneApp1

使用以下代码创建转换器：

using System;

namespace PhoneApp1.Converters
{
   using System.Globalization;
   using System.IO;
   using System.Windows.Data;
   using System.Windows.Media.Imaging;

public class ByteToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var data = value as byte[];

        if (data != null)
        {
            using(var stream = new MemoryStream(data))
            {
                var bitmapImage = new BitmapImage();
                bitmapImage.SetSource(stream);
                return bitmapImage;
            }
        }
        return null;
    }

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

在xaml中使用以下名称空间声明：

xmlns:converters="clr-namespace:PhoneApp1.Converters"

XAML：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.Resources>
            <converters:ByteToImageConverter x:Key="ByteToImageConverter" />
        </Grid.Resources>
       <phone:LongListSelector x:Name="lstTiles">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5,5,5,5" Background="{StaticResource PhoneAccentBrush}">
                        <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Image Height="70" Width="70"  Margin="10,0,0,0" Source="{Binding Image, Converter={StaticResource ByteToImageConverter}}">
                            </Image>
                        </Grid>
                        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
                            <TextBlock Margin="5,5,5,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap" Text="{Binding Title}"></TextBlock>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
    </Grid>

代码背后和模型

 public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        this.BindTiles();
    }


    private void BindTiles()
    {
        var sampleRandomImageBytes = Convert.FromBase64String(@"iVBORw0KGgoAAAANSUhEUgAAAGgAAABbCAYAAACf8sCiAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADeSURBVHhe7dExAQAwDMCgmVj9O21tcORAAe/PbFwF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKos0e0/44s5MWYKUAAAAASUVORK5CYII=");

        var data = new[]
        {
            new AppTitle { Title = "Tile 1", Image = sampleRandomImageBytes }, new AppTitle { Title = "Tile 2", Image = sampleRandomImageBytes },
            new AppTitle { Title = "Tile 3", Image = sampleRandomImageBytes }, new AppTitle { Title = "Tile 4", Image = sampleRandomImageBytes }
        };

        lstTiles.ItemsSource = data;
    }
}

public class AppTitle
{
    public string Title { get; set; }

    public byte[] Image { get; set; }
}