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

StijnvanGaal · Answer 1 · 2016-01-14T14:17:58.347

0

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

edited Jan 14 '16 at 14:17

answered Jan 14 '16 at 13:25

StijnvanGaal

441
3
17

i do not have it in a property, all what i have is just the filename in the data source which i use to get a bitmap object. – Abd-elhameed Quraim Jan 14 '16 at 13:41
edited without property. however this is not really a binding – StijnvanGaal Jan 14 '16 at 14:18
it is a part of a listview item; how can i do that? – Abd-elhameed Quraim Jan 14 '16 at 14:43

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Binding Image from bytes in listview (Windows phone 8.1)

2 Answers2