Need to retrieve images (Varbinary MAX) from SQL Server 2014 to Xamarin by using C#

Question

I am new to the Xamarin platform, I have a local hosted database in SQL Server 2014 using php (with aid of XAMP server) and the table name ItemProductsDB and saved images as varbinary(MAX). I'm getting all the other details from database as a string (example Product Name, Product ID, etc...) but the images as byte[] the class as below.

public class Contactone
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public string Price { get; set; }
    public string Date { get; set; }        
    public byte[] Image { get; set; }        
}

public class ContectList
{
    public List<Contactone> contacts { get; set; }
}

I have already created the cs page and xaml to retrieve the other data except image, the code below JsonParsingPage.cs ( this below code runs just fine but no retrieving of images )

public partial class JsonParsingPage : ContentPage
{
    public JsonParsingPage()
    {
        InitializeComponent();
        this.BackgroundImage = "background.png";
        this.Title = "Meals";
        GetJSON();
    }

    public async void GetJSON()
    {
        // Check network status 
        if (NetworkCheck.IsInternet())
        {
            var client = new System.Net.Http.HttpClient();
            var response = await client.GetAsync("http://192.168.43.226/GetProducts.php");
            string contactsJson = response.Content.ReadAsStringAsync().Result;
            ContectList ObjContactList = new ContectList();
            if (contactsJson != "")
            {
                //Converting JSON Array Objects into generic list
                ObjContactList = JsonConvert.DeserializeObject<ContectList>(contactsJson);
            }
            //Binding listview with server response  
            listviewConacts.ItemsSource = ObjContactList.contacts;
        }
        else
        {
            await DisplayAlert("JSONParsing", "No network is available.", "Ok");
        }

        //Hide loader after server response  
       ProgressLoader.IsVisible = false;
    }       

The fronted Xaml code as below with binding respective fields

e<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"            
         x:Class="TestProject.Views.DetailViews.JsonParsingPage">    
<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>            
        <ListView x:Name="listviewConacts" Grid.Row="1" HorizontalOptions="FillAndExpand" HasUnevenRows="True" ItemSelected="listviewContacts_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid HorizontalOptions="FillAndExpand" Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Name}" HorizontalOptions="StartAndExpand" Grid.Row="0" TextColor="White"  FontAttributes="Bold"/>
                            <Label Text="{Binding Description}" HorizontalOptions="StartAndExpand" Grid.Row="1" TextColor="Orange"  FontAttributes="Bold"/>
                            <Label Text="{Binding Price}" HorizontalOptions="StartAndExpand" Grid.Row="2" TextColor="Gray"  FontAttributes="Bold"/>
                            <Label Text="{Binding Date}" HorizontalOptions="StartAndExpand" Grid.Row="3" TextColor="Gray"  FontAttributes="Bold"/>
                            <Label Text="{Binding Image}" HorizontalOptions="StartAndExpand" Grid.Row="4" TextColor="Gray"  FontAttributes="Bold"/>
                            <BoxView HeightRequest="2" Margin="0,10,10,0" BackgroundColor="Gray" Grid.Row="4" HorizontalOptions="FillAndExpand" />
                        </Grid>
                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
    <ActivityIndicator x:Name="ProgressLoader" IsRunning="True"/>
</Grid>
</ContentPage>

My question is: what do I have to do to retrieve varbinary images from SQL Server and display them in a Xamarin form (including cs and XAML code)?

Any help would be appreciated.

Pan

Answer 1

After you read byte[] from your DB:

image.Source = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));