Image
Inherits from Xamarin.Forms.ContentView
If you'd like to show an animated GIF, use the default Image control instead.
One of the most common controls you'll want to use is the Image control. Because of its importance, effort has been invested into ensuring that it has all the power you need. Let's start with the basics.
Is that it? No, we're just getting started. Below are all of the properties you can add to images.
Properties
Done now? Nope, still have much more to consider.
Image Transformations
You can apply several different transformations to your images. Each is discussed below.
Blur
You can easily add a blur to your image with this simple transformation.
Blurring is a very CPU-intensive operation. The higher the radius value the more intensive this becomes. Use caution to not over blur something dynamically when you can instead replace it with a statically blurred image. Android devices have been known to crash with radius values over 15 or so.
Circle
The circle transformation masks your images into a circle shape. The syntax for this is below.
Drop Shadow
The filter adds a customizable drop shadow to your images.
When using the drop shadow transformation be sure you do not have a background color. Otherwise, the background color will cover the drop shadow.
Fill Color
This fills the image with the selected color. Not sure why you'd ever use this? Well, there's a great usage for this when used with Masks on layered images.
Flip
Flips the image either horizontally, vertically, or both.
Grayscale
Converts the image to grayscale.
Reflection
Draws a reflection of the image as if the image were sitting on a glass surface.
Rounded
Rounds the corners of the image and optionally adds a border.
Tint
Tints the image using the provided color.
Keep in mind you can use more than one transformation on a single image.
Now are we done? Not quite, what's the rush?
Layering Images
Want to go to the next level with your images? Layer them! Look at the sample below:
To make this, simply stack the original mountain under one of our built-in Masks. Note how the mask is just a PNG with an alpha channel. Notice how the mask is black. Applying a Fill Color transformation allows us to match the tint we added to the mountain photo producing a nice color vignette effect.
Styling
Ratio vs. HeightRequest
While HeightRequest can be used to size images, using Ratio is preferred.
Last updated