xamarin表单中的堆栈或相对布局中的重叠图像[关闭]答案

【问题标题】：Overlap images in a stack or relative layout in xamarin forms [closed]xamarin表单中的堆栈或相对布局中的重叠图像[关闭]
【发布时间】：2018-09-10 08:38:05
【问题描述】：

我的 PCL 项目的 Assets 文件夹中有一个图像列表，所有这些图像都作为嵌入式资源，我可以在不使用 xaml 的情况下获取这些图像并在 ContentPage 派生类中正常显示，但是，我需要把这些图像重叠到另一个，如下例所示：

我如何定位这些图像，就像显示的图像一样？有人可以帮我吗？我在 Xamarin Froms c# 中完全是菜鸟

提前致谢！

【问题讨论】：

您可以通过使用网格来存档，当您将许多元素放在同一行或同一列时，它们会重叠，只需使用一行网格并将每个图像添加到同一行并留有左边距即可你的欲望效果。 docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/… PS：如果图片只是静态的，你应该只放一张图片，尝试用 Photoshop 或类似的东西合并图片，因为性能......

标签： image xamarin xamarin.forms stacklayout

【解决方案1】：

您提到“不使用 XAML”我明白您正在使用 C#（代码隐藏）来加载和呈现您的图像。

在图像上进行一些重叠的最简单方法是使所有图像成为StackLayout 的子级，并在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);
    }
}

存在

stackImages StackLayout 将持有图像。

reactivex.png资源中的图片名称。

否定的Spacing 会告诉你想要多少重叠。另外，请记住 Spacing 和 Image Width 高度相关。

在上面的示例中，通过将间距设置为 -25，我几乎重叠了一半的图像。

此外，如果所有图像共享相同的大小，或者至少相同的Width，上述将正常工作。

【讨论】：

好人！它的锅很好！谢谢！