Search code examples
imagexamarinxamarin.formsstacklayout

Overlap images in a stack or relative layout in xamarin forms

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: enter image description here

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

thanks in advance!

Solution

  • 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.

    enter image description here

    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.