Windows Phone 8.1 LongListSelector with Images

Question

I have a long list selector in my application. The list should display an icon and a caption below it. It appears as a grid as seen in the image below

The icon should be downloaded from the server and displayed, the icon is downloaded from the server as an byte array which can be used to generate the Bitmap. How do i bind the Bitmap to the Image in my LongListSelectors template. My data template is as below.

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

Currently in the template the icon path is hardcoded. Please provide some input on how to bind the bitmap to the image.

Answer 1

Use a Conveter

Assuming the assembly name of the phone project is: PhoneApp1

Create a converter with the following code:

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();
    }
  }
}

use the following namespace declaration in your 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>

Code Behind and Model

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