Binding Image from bytes in listview (Windows phone 8.1)

Question

I am developing my first windows phone 8.1 app. I need to bind an image in a list view. the image is in bytes[] format. I have already converted to a Bitmap image using this function

public async Task<BitmapImage> GetImageFromByteArray(string s_FileName)
    {
        using (InMemoryRandomAccessStream raStream = new InMemoryRandomAccessStream())
        {
            using (DataWriter writer = new DataWriter(raStream))
            {
                byte[] data = await GetImageBytes(s_FileName);
                writer.WriteBytes(data);
                await writer.StoreAsync();
                await writer.FlushAsync();
                writer.DetachStream();
            }

            raStream.Seek(0);
            BitmapImage bitMapImage = new BitmapImage();
            bitMapImage.SetSource(raStream);
            return bitMapImage;
        }
    }

now i need to bind this image to an image control in a listview item.

Here is my XAML Code. the image control name is (img_test)

<Grid>
    <ListView x:Name="lst_Test" Background="White" Foreground="Black" SelectionChanged="lst_BestDrivers_SelectionChanged" Margin="10">
        <ListView.Resources>
            <DataTemplate x:Key="ItemsTest">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid Grid.Column="0" Grid.RowSpan="4" />
        <Grid Grid.Column="1" Grid.ColumnSpan="5" />

        <Image x:Name="img_test" Grid.Column="0" Grid.RowSpan="3" Margin="10,10,10,10" />
        <TextBlock Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="5" Text="{Binding Name}"></TextBlock>
        <StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="1">
            <TextBlock Text="{Binding ID}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
            <Image Source="ms-appx:///Assets/Icons/Icon1png" HorizontalAlignment="Right" VerticalAlignment="Center"></Image>
        </StackPanel>
    </Grid>
            </DataTemplate>
        </ListView.Resources>
        <ListView.ItemTemplate>
            <StaticResource ResourceKey="ItemsTest"/>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Thanks in advance

EDIT: Here is what is done to clarify more:

1- I use the Image Filename to get an array of bytes using a remote web service.

2- I use the returned bytes[] to get a bitmap object.

How can I use this array or the bitmap for binding? I tried the sample in here , but it did not work for me because the calling of the web service requires an async call which is not possible after implementing the IValueConverter interface

Answer 1

after digging and see many samples here in stackoverflow and other sites, I have to solve the async problem. It is solved using the TaskCompletionNotifier class in here which allows me to make async calls while implementing the ivalueconverter interface. using the above function to get the bitmap image from the bytes array.

all what i need to do is

    public class BytesToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        using (InMemoryRandomAccessStream raStream = new InMemoryRandomAccessStream())
        {
            return new TaskCompletionNotifier<BitmapImage>(GetImageFromByteArray((String)value));
        }
    }
}

Also, i need to add a static resource using this

xmlns:Global="using:MYNAMESPACE"
<Page.Resources>
    <Global:BytesToImageConverter x:Key="LocalImageConverter" />
</Page.Resources>

the class BytesToImageConverter is the one implementing the ivalueconverter interface.

now, use the resource to bind the image

<Image DataContext="{Binding PhotoPath, Converter={StaticResource LocalImageConverter}}" 
               x:Name="img_test" 
               Source="{Binding Result}"
               Grid.Column="0" 
               Grid.RowSpan="3" 
               Margin="10,10,10,10" 
               Width="90"
               Height="90"
               Stretch="Fill"/>

the source is bound to Result

this will do the trick.

thanks to all

Answer 2

Assuming you have your BitmapImage in a property, ready for binding. You can just Bind the Image Source to the BitmapImage

<Image x:Name="img_test" Source="{Binding MyBitmapImage}" Grid.Column="0" Grid.RowSpan="3" Margin="10,10,10,10" />

If you don't have your BitmapImage in a property, then you should just set the source of the object

img_test.Source = myBitmapImage