Bind Base64 String zu Listenansicht in Xamarin Formular

Question

Zunächst einmal bin ich neu in Xamarin.Form. Ich versuche, von Google am besten zu profitieren, aber einige Funktionen, die ich nicht selbst bekommen kann, werden oft gesucht.

Ich erstelle eine Xamarin.Form App. In dieser App speichern ich das Bild in Format in sql server und mein Datentyp in SQL Server ist varchar(Max).

Mein Problem ist, dass, wie kann ich die base64 string zu einem Bild konvertieren und auch mit dem Bild zu Listenansicht binden.

Code of Listview:

<ListView x:Name="listView" HasUnevenRows="true" SeparatorColor="Gray"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
       <Image Source="{Binding image}" Grid.Row="0" 
         Grid.RowSpan="3" Grid.Column="0" 
         HorizontalOptions="Center" HeightRequest="50" 
         VerticalOptions="Center"> 
        <Image.GestureRecognizers> 
         <TapGestureRecognizer Tapped="OnImageTapped" /> 
        </Image.GestureRecognizers> 
       </Image> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

-Code von C#:

Public async Task loadDeveloperList() 
{ 
    try 
    {    
     List<employee> employeeDetail = new List<employee>(); 

     HttpClient client = new HttpClient(); 
     StringBuilder sb = new StringBuilder(); 
     client.MaxResponseContentBufferSize = 256000; 
     var RestUrl = "http://example.com/Getemployee/"; 
     var uri = new Uri(RestUrl); 
     actIndicator.IsVisible = true; 
     actIndicator.IsRunning = true; 
     var response = await client.GetAsync(uri); 

     if (response.IsSuccessStatusCode) 
     { 
      var content = await response.Content.ReadAsStringAsync(); 

      List<employee> onjEmployee = JsonConvert.DeserializeObject<List<employee>>(content); 

      foreach (var item in onjEmployee) 
      { 
       employee emptemp = new employee() 
       { 
        empID = item.empID, 
        name = item.name, 
        city = item.city, 
        post = item.post, 
        salary = item.salary, 
        gender = item.gender, 
        image = item.image        
       }; 
       string cFotoBase64 = emptemp.image; 
       byte[] ImageFotoBase64 = System.Convert.FromBase64String(cFotoBase64); 

       employeeDetail.Add(emptemp);           
      } 
      listView.ItemsSource = employeeDetail; 
     } 
    } 
    catch (Exception ex) 
    { 

    }   
} 

So jemand bitte machen Sie mir eine Idee und eine Lösung.

Answer 1

Gemäß this forum thread könnten Sie einen Konverter dafür erstellen. Halten Sie einfach die Base64-Zeichenfolge als Teil Ihrer Employee, d. H. In der Base64Image Eigenschaft.

Definieren Sie nun einen solchen Konverter.

public class ConverterBase64ImageSource : IValueConverter 
{ 
    public object Convert (object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     string base64Image = (string)value; 

     if (base64Image == null) 
      return null; 

     // Convert base64Image from string to byte-array 
     var imageBytes = System.Convert.FromBase64String(base64Image); 

     // Return a new ImageSource 
     return ImageSource.FromStream (() => {return new MemoryStream(imageBytes);}); 
    } 

    public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     // Not implemented as we do not convert back 
     throw new NotSupportedException(); 
    } 
} 

Jetzt in Ihrem XAML declare und verwenden Sie den Konverter wie folgt aus:

den Namespace auf die Seite Wurzel hinzufügen, ich werde es ist ein normaler ContentPage zu übernehmen, so sollte es aussehen etwas:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:YourApp;assembly=YourApp" 
      x:Class="YourApp.YourPage"> 

Beachten Sie, dass YourApp und YourPage etc. sollten Sie mit Ihrem aktuellen App-Namen und den richtigen Namensraum ersetzt werden.

Jetzt deklarieren Sie den Konverter als Teil Ihrer Seite.

<ContentPage.Resources> 
    <ResourceDictionary> 
     <local:ConverterBase64ImageSource x:Key="Base64ToImageConverter" /> 
    </ResourceDictionary> 
</ContentPage.Resources> 

Schließlich verwenden Sie den Konverter auf Image.

<ListView x:Name="listView" HasUnevenRows="true" SeparatorColor="Gray"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
       <Image Source="{Binding Base64Image, Converter={StaticResource Base64ToImageConverter}}}" Grid.Row="0" 
         Grid.RowSpan="3" Grid.Column="0" 
         HorizontalOptions="Center" HeightRequest="50" 
         VerticalOptions="Center"> 
        <Image.GestureRecognizers> 
         <TapGestureRecognizer Tapped="OnImageTapped" /> 
        </Image.GestureRecognizers> 
       </Image> 
      </ViewCell> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Ihre Bilder sollten jetzt angezeigt werden!