CODEWITHSUNDEEP
xamlxamarinxamarin.ios
Simon
Simon

Reputation: 19938

Xamarin: How do I set a placeholder image in my Image element in XAML?

In Android, it is quite easy to set a image placeholder for development purposes in an imageview.

All one would do is use the tools:src for the placeholder image during development so you could see it in your layout design preview and your actual image you would put into your android:src . Frequently, you don't set the android:src put would populate that imageview with images that you download off the internet once you connect your app to the net:

<ImageView
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:src=@drawable/activated_icon"
                        tools:src="@mipmap/white_activated_icon" />

In Xamarin, you have this to display images:

<Image Source="http://lorempixel.com/1920/1080/nature/3" />

Once the app connects, the image is downloaded from the internet and displayed. How do I put in a placeholder image for development purposes (similar to the way you would do it through tools:src in android) so I can see it within the layout design previews?

Upvotes: 0

Views: 2657

Answers (2)

SYNT4X
SYNT4X

Reputation: 210

I use FFImageLoading for this Case. Just install the Nuget Package and Use the "CachedImage" in XAML.

<ff:CachedImage Source="your url" Placeholder="placeholder while loading"/>

You don´t need to download (and cache) the Image manually then. It will automatically displayed when the download is done. You can use local files (from Resources or Drawable) and files from HTTP/HTTPS.

Upvotes: 1

Tim Klingeleers
Tim Klingeleers

Reputation: 3034

I'm assuming you want to achieve this with Xamarin Forms, as you referring to XAML in the question title.

Or possibly you are referring to the Xamarin Forms Previewer? In that case, disregard the following answer. You can only use local images in the Previewer as far as I can tell.

Answer in case the question is related to runtime Xamarin Forms

There is no standard option to do this in Xamarin Forms. Take a look at this example suggested by Stephane Delcroix from the Xamarin Forums. The important part of this approach is to stack 2 images on top of each other in a grid. 1 is the placeholder that is placed beneath the image that is being loaded, like this:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition());

grid.Children.Add (image);
grid.Children.Add (placeholderImage);

As an alternative option, WebImage of Xamarin Forms Labs allows an option for a DefaultImage, but I'm not sure if that shows immediately. See this class for the code of the Web Image. Keep in mind that Xamarin Forms Labs is no longer under active maintenance.

Of course you can also write a custom renderer. Maybe based on the Xamarin Forms Labs example.

Upvotes: 1

Related Questions