Overlap images in a stack or relative layout in xamarin forms

Question

I have a list of images in an Assets folder in my PCL project, all these images are as embedded resource, and I can get these images and display normally in a ContentPage derived class without using xaml, but, I need to put those images overlapped to another as in the example below:

How I position these images like in the image showed? someone can help-me? Iam completely noob in Xamarin Froms c#

thanks in advance!

You can archive that by using grid, when you put many elements on the same row or column they will overlap, just use grid with one row an add every image to the same row with left margin to get your desire effect. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid PS: if the image will be only static you should put only one image with all them, try merge the images with Photoshop or something like that, because performance... — FabriBertani, Mar 31 '18 at 21:44

score 2 · Accepted Answer · edited Sep 07 '19 at 12:37

You mentioned "without using XAML" I understand then that you are using C# (code behind) to load and present your images.

The easiest way to make some overlapping on the images is by making all your images children of a StackLayout and setting a negative spacing in the StackLayout.

private void LoadSomeImages()
{
    stackImages.Children.Clear();
    stackImages.Spacing = -25;
    stackImages.Orientation = StackOrientation.Horizontal;

    for (int i = 0; i < 4; i++)
    {
        var image = new Image
        {
            WidthRequest = 60,
            HeightRequest = 59
        };

        image.Source = ImageSource.FromResource("SWOverlappedImages.reactivex.png");
        stackImages.Children.Add(image);
    }
}

Being

stackImages the StackLayout that will be holding the Images.

reactivex.png the image name in your resources.

The negative Spacing will tell how much overlapping you desire. Also, keep in mind that Spacing and the Image Width are highly related.

In the example above by setting the Spacing on -25, I am overlapping almost half of the Image.

Also, the above will work fine if all the images share the same size, or at least the same Width.

nice man! its wok fine! thanks! – Armando Marques da S Sobrinho Apr 01 '18 at 01:33 — Armando Marques da S Sobrinho, Apr 01 '18 at 01:33

Overlap images in a stack or relative layout in xamarin forms

1 Answers1