Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

Query data including image from json webservice and show in image-object (Xamarin.Forms)

$
0
0

Hi all

To show images from our central datastore in Xamarin.Forms is a "major case" for us to go with Xamarin.

I try now for day's to display an image in Xamarin - without success - I am desperate and have no Idea how to bring it to work :-(

I hope, that someone can show me the right way...

Description:

I have to query data (including images) from an existing (json) WebService .
The images are stored on a SQL-Server (not in file-system).
The WebService is built with vb.net and runs on a Windows-Server as Service.
To test the WebService we also have built a small Windows testclient.
To be able to send the images over json, we encode/decode the Byte-Array to string:

Encode (with .Default-Encoding, the image can be showed in a DataGidview of the Windows testclient):

  • cPFA_Grid_Foto = System.Text.Encoding.Default.GetString(dt.Rows(i).Item("PFA_Grid_Foto"))

Decode (in Windows-testclient):

  • dr(cField) = System.Text.Encoding.Default.GetBytes(reader.Value)
    In the Windows-testclient I can display the images in a DataGridView.

Xamarin.Forms:

  • I can query the data from WebService and retrieve the data.

  • I am not able to display the image-data in an image-object

  • In (Xamarin) System.Text.Encoding I don't have a .Default-Option

    => Therefore (and as I know, that .default should not be used), I have also have tried out .UTF8- and .UNICODE-en- and decoding
    Further I have tried submit the byte-array as byte-array (so that json convert it to a string)
    => With .UTF8 and .UNICODE the image can't displayed in the Windows-testclient

In Xamarin, I have the following code to show the data in an image-object:
Note:

Variable cFotoDefault is encoded with .default (can be displayed in Windows test-client -> in Xmarin I don't have a decoder .default)

Variable cFotoUTF8 is encoded with .UTF8 and I decode it also with .UTF8

Variable cFotoUNICODE is encoded with .UNICODE and I decode it also with .UNICODE

Variable cFotoArray is not encoded -> json does submit it as string

public class EmpfehlungDetails : ContentPage
        {
            Label TitelLabel; 
            Label AdresseLabel; 
            Image FotoAnzeige;
            Byte[] ImageFotoUnicode;
            public EmpfehlungDetails(Empfehlung eq)
            {
                Title = "Details zu Empfehlung"; 
                NavigationPage.SetHasNavigationBar(this, true); 
                string cFirma1 = eq.cPAB_Firma.Trim();
                string cFirmenZusatz = eq.cPAB_FirmenZusatz.Trim();
                string cStrasse = eq.cPAB_Strasse.Trim();
                string cPLZ = eq.cPAB_PLZ.Trim();
                string cOrt = eq.cPAB_Ort.Trim();
                string cTelFestnetz = eq.cPAB_Kontakt_FestnetzNummer.Trim();
                string cTelMobile = eq.cPAB_Kontakt_MobileNummer.Trim();
                string cMail = eq.cPAB_Kontakt_Mailadresse.Trim();
                string cAdresse = eq.cPFA_Adresse.Trim();
                string cKundenNummer = eq.cPFA_Kundennummer.Trim();
                //
                // Foto-Felder
                string cFotoDefault = eq.bPFA_Grid_Foto;
                string cFotoUTF8 = eq.bPFA_Grid_FotoUTF8;
                string cFotoUNICODE = eq.bPFA_Grid_FotoUNICODE;
                string cFotoArray = eq.bPFA_Grid_FotoArray;
                //
                Byte[] ImageFotoDefault = Encoding.Unicode.GetBytes(cFotoDefault); 
                // -> 11'520 Bytes (Foto zu MTC)
                //
                Byte[] ImageFotoUTF8 = Encoding.UTF8.GetBytes(cFotoUTF8); 
                // -> 10'409 Bytes  (Foto zu MTC)
                //
                Byte[] ImageFotoUnicode = Encoding.Unicode.GetBytes(cFotoUNICODE);
                // -> 5'760 Bytes  (Foto zu MTC)
                //
                Byte[] ImageFotoArray = Encoding.UTF8.GetBytes(cFotoArray); 
                // -> 7'680 Bytes  (Foto zu MTC)
                //
                TitelLabel = new Label { Text = "Anbieter: " + cFirma1, Font = Font.SystemFontOfSize(NamedSize.Large), TextColor = Color.Blue, BackgroundColor = Color.White };
                AdresseLabel = new Label { Text = cAdresse, TextColor = Color.Black, BackgroundColor = Color.White };
                // Tests
                //FotoAnzeige = new Image { Source = ImageSource.FromStream(() => new MemoryStream(ImageFotoUnicode)), WidthRequest = 100, HeightRequest = 100, BackgroundColor = Color.Aqua, };
                // => No crash, Image is not shown
                FotoAnzeige = new Image { Source = ImageSource.FromStream(() => new MemoryStream(ImageFotoUTF8)), WidthRequest = 100, HeightRequest = 100, BackgroundColor = Color.Aqua, };
                // => No crash, Image is not shown
                //
                // FotoAnzeige = new Image { Source = ImageSource.FromStream(() => new MemoryStream(ImageFotoArray)), WidthRequest = 100, HeightRequest = 100, BackgroundColor = Color.Aqua, };
                // => Crash
                //
                // Test with URI that works
                //Uri link = new Uri("http://www.matso.ch/about/Kernkompetenzen.jpg");
                //FotoAnzeige = new Image { Source = ImageSource.FromUri(link), WidthRequest = 100, HeightRequest = 100, BackgroundColor = Color.Aqua, };
                //
                Content = new ScrollView // Nötig, damit die Seite gescrollt werden kann!
                   {
                       HorizontalOptions = LayoutOptions.Fill,
                        Orientation = ScrollOrientation.Vertical, 
                       Content = new StackLayout
                     {
                         Spacing = 5,
                         Padding = 5, // Abstand zwischen den Elementen
                         VerticalOptions = LayoutOptions.Start, // Start der Anzeige oben -> funktioniert bei WP nicht (zentriert)
                         Children = 
                {
                TitelLabel,
                FotoAnzeige,
                AdresseLabel,
                }
                     },
                   };
            }
        }

Questions:

- Is the code O.K. to show an Image from stream (should the code work in principal)?

- Do I miss something?

- Do I have to change something in the WebService - if yes - what?

Thanks a lot for any feedback.


Viewing all articles
Browse latest Browse all 58056

Trending Articles