How to set ImageSource as Xamarin.Forms.Button?

Question

I am trying to add a background image using the image property in the button. The problem I am facing is that I cannot set StreamImageSource as the background of the button. If I try to do this, I am facing the error below.

The code I use to set the image is:

ImageSource iconsource =ImageSource.FromStream(() => new MemoryStream(ImgASBytes)); Button Icon = new Button (); Icon.Image = iconsource ; 

The error I am encountering is:

Error CS0266: It is not possible to implicitly convert the type "Xamarin.Forms.ImageSource" to "Xamarin.Forms.FileImageSource". Explicit conversion exists (are you skipping listing?)

Answer 1

ImageSource.FromStream () returns a StreamImageSource (see docs ). Button.Image accepts only FileImageSource (see docs ).

This means that what you are trying to achieve will not work, no matter how you try to throw one at the other.

Button.Image will accept images stored as resources in your platform projects and load either using:

 Icon.Image = ImageSource.FromFile ("foobar.png"); 

or

 Icon.Image = "foobar.png"; 

Answer 2

The accepted answer is true that you cannot drop StreamImageSource to FileImageSource , I think the real question is how to transfer images to PCL and use them on buttons, just as you would when creating Image form control.

The answer is to have a Grid that contains both a Button and an Image object, where Image overlaps the Button .

For example, C # code might look like this:

 ImageSource imageSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes)); Button iconButton = new Button (); iconButton.VerticalOptions = LayoutOptions.FillAndExpand; iconButton.HorizontalOptions = LayoutOptions.FillAndExpand; var image = new Image(); image.Source = imageSource; // So it doesn't eat up clicks that should go to the button: image.InputTransparent = true; // Give it a margin so it doesn't extend to the edge of the grid image.Margin = new Thickness(10); var grid = new Grid(); // If we don't set a width request, it may stretch horizontally in a stack grid.WidthRequest = 48; // Add the button first, so it is under the image... grid.Children.Add(iconButton); // ...then add the image grid.Children.Add(image); 

You may need to play around with the dimensions and thickness values, but this should lead to a click on the icon button.

Answer 3

Starting with Xamarin.Forms 3.4.0 you can now use ImageButton. You can use inline images using the extension method described in this MS document

Answer 4

Caution with upper and lower case in file names.

I was wondering why my image buttons were correctly displayed on the simulator, but not on my iPhone.

On the device, the file name must match exactly, the simulator does not care about upper and lower case in file names.

Answer 5

I use this and it works

 var imageA = new Image(); imageA.Source=(FileImageSource)ImageSource.FromFile(allergeneLocation)}; 

or

 var imageA = new Image() { BackgroundColor = Color.Teal, Source = (FileImageSource)ImageSource.FromFile(allergeneLocation)}, }; 

Answer 6

Here is what I tried:

 Button refreshBut = new Button { Image = (FileImageSource) (ImageSource.FromFile("refreshBut.png")) }; 

While it compiles, I get an unhandled null reference exception with a description: The object reference is not installed in the object instance. I'm not sure if this helps someone else try to solve this, but I'm on the same wall.