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.