Windows Phone 8.1 LongListSelector с изображениями

У меня есть длинный список в моем приложении. В списке должен отображаться значок и надпись под ним. Он отображается как сетка, как показано на изображении ниже

Значок должен быть загружен с сервера и отображен, значок загружается с сервера в виде байтового массива, который можно использовать для создания растрового изображения. Как связать Bitmap с изображением в моем шаблоне LongListSelectors. Мой шаблон данных выглядит следующим образом.

<phone:longlistselector.itemtemplate>
 <datatemplate>
 <grid margin="5,5,5,5" background="{StaticResource PhoneAccentBrush}">
 <grid verticalalignment="Center" horizontalalignment="Center">
 
 
 </grid>
 <stackpanel verticalalignment="Bottom" horizontalalignment="Center"> 
 
 </stackpanel>
 </grid>
 </datatemplate>
 </phone:longlistselector.itemtemplate>

В настоящее время в шаблоне путь значка жестко запрограммирован. Просьба указать некоторые сведения о том, как привязать растровое изображение к изображению.

1 ответ

Использовать Conveter

Предполагая, что имя сборки проекта телефона: 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">
 </converters: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">
 
 
 </grid>
 <stackpanel verticalalignment="Bottom" horizontalalignment="Center">
 
 </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(@"******************************************************************************************************************************************************/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; }
}

licensed under cc by-sa 3.0 with attribution.