PNG image with transparency not displaying in xamarin forms (xaml)

1
votes

I have made a xamarin forms login screen and I want to put a logo in there, but it is not displaying. I have followed the instructions on the following link: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#using-xaml

I am using xaml

I've tried following the link above but all that is displayed is a blank image, and if I use the following: 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MaisonNickel.MainPage"

             Title="MainPage">

    <ContentPage.Content>
        <Image x:Name="cat" Aspect="AspectFit"/>
    </ContentPage.Content>

</ContentPage>

https://imgur.com/OS5c7cw

also there is no error displayed, I checked the filters, it's a vs bug not refreshing

2
xamlxamarinxamarin.forms
Xamarin Forms Previewer has multiple bugs I would suggest you start checking in devices... - FreakyAli
You don't seem to be adding a Source to the image, are you doing it in code behind? If no image source is set in the Image component, nothing will be displayed. - Mateus Wolkmer
how do I add a the source? - YaRmgl
@MateusW. how do I add it? - YaRmgl
Posted it as an answer. - Mateus Wolkmer

2 Answers

0
votes

You need to add a Source attribute to your Image so there is something to be displayed. You do it like this (in XAML):

<Image x:Name="cat" Aspect="AspectFit" Source="catImage.png"/>

Your "catImage.png" have to exist inside the resources of the platforms you want your app to work. So, for Android, add your image to Resources/Drawable, and for iOS, add it to Resources folder.

You can also add the image to your main project once and use it as Embedded Resource. If you want to do that, I recommend reading this.

Also, if you use a lot of images in your project and it starts losing performance, I recommend using some way of caching images, and for that, I recommend FFImageLoading. It handles caching, placeholder and fade animation to when the Image is loaded, check it out!

0
votes

I am not sure you did follow all the instructions. It's pretty straightfoward. If you want to add the image via embedded resource (so in Xaml) here are the main points:

1) Import the image into your project and set it as embedded resource in the property window (assuming your image is called cat.png, placed in main folder and your assembly is MaisonNickel)

2) create a new Xaml markup extension in main folder

[ContentProperty (nameof(Source))]
public class ImageResourceExtension : IMarkupExtension
{
 public string Source { get; set; }

 public object ProvideValue (IServiceProvider serviceProvider)
 {
   if (Source == null)
   {
     return null;
   }

   // Do your translation lookup here, using whatever method you require
   var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);

   return imageSource;
 }
}

3) Then you must reference the assembly and replace the image source this way:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:MaisonNickel;assembly=MaisonNickel"
   x:Class="MaisonNickel.MainPage">
   <ContentPage.Content>
      <Image x:Name="cat" Source="{local:ImageResource MaisonNickel.cat.png}" Aspect="AspectFit"/>
   </ContentPage.Content>
</ContentPage>

In your code, I don't see any referenced class for imageResource, neither the Source property.

Happy coding!