如何在Xamarin.Forms中正确使用Image Source属性？

Question

我在使用堆叠布局的内容页中遇到了一个展示图片的问题。我查看了 Xamarin API 文档并找到了 Xamarin.Forms.Image.Source 属性，但没有样例代码可以参考。我还检查了与我的文件名路径相匹配的 C# 代码，但在 Xamarin 中可能会稍有不同，因为这是第一次这么做。我目前正在通过 Visual Studio 2013 中的 Android 模拟器 (Google Nexus 5) 进行测试，一切正常，但图片无法显示。

图片来源：

new Image
{
     VerticalOptions = LayoutOptions.Center,
     HorizontalOptions = LayoutOptions.Center,
     Source = "/Assets/xamarin_logo.png",
},

完整代码：

public NFCPage()
    {
        StackLayout stackLayout = new StackLayout // instantiate a StackLayout object to layout its children
        {
            Spacing = 5, // amount of spae between each child element
            //HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.FillAndExpand, // defines how the elements should be laid out; fill the entire width of the content to the screen
            BackgroundColor = Color.Blue,

            Children = // gets a list of child elements
            {
                new Label
                {   
                    TextColor = Color.White,
                    BackgroundColor = Color.Red,
                    XAlign = TextAlignment.Center, // set text alignment horizontally
                    Text = "Google",
                },
                new Label
                {
                    Text = "Place your device directly at the symbol.",
                    XAlign = TextAlignment.Center,
                    TextColor = Color.White,
                },
                new Image
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Source = "/Assets/xamarin_logo.png",
                },
                new Button
                {
                    Text = "QR Code",
                    TextColor = Color.White,
                },
                new Button
                {
                    Text = "?",
                    TextColor = Color.White,
                },
            }
        };
        Content = stackLayout; // apply stackLayout to Content
    }

- TheAmazingKnight

---

你读过这篇文档了吗 - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/images/? 通常在Android上，您将图像添加为可绘制资源，然后仅指定图像名称，Forms将在资源中找到相应的图像。 - Jason

谢谢提供的信息。我还有一个问题要问，我该在哪里使用这段代码 var NfcImage = new Image{Aspect = Aspect.AspectFit}; NfcImage.Source = ImageSource.FromFile("xamarin_logo.png"); 来指定图像在页面上的位置？如果我将其放置在 new Image { } 构造函数中是不起作用的。 - TheAmazingKnight

我解决了，我按照“本地图片”这个教程，并将文件路径名称调整为 Source = "xamarin_logo.png"，然后它就可以工作了。再次感谢您提供的链接，真的帮了我很大的忙。 - TheAmazingKnight

Answer 1

不应该引用路径，因为源属性是跨平台的，每个平台都有一个不同的资源文件夹来存储图像等资产，所以您只需要指定文件名和扩展名。Image类知道在哪里查找文件。

可以将图像文件添加到每个应用程序项目中，并从Xamarin.Forms共享代码中引用。要在所有应用程序中使用单个图像，必须在每个平台上使用相同的文件名，并且它应该是有效的Android资源名称（这意味着没有空格和特殊字符）。将图像放置在Resources/drawable目录中，构建操作：AndroidResource。还可以提供高 DPI 和低 DPI 版本的图像（在适当命名的资源子目录中，例如drawable-ldpi、drawable-hdpi和drawable-xhdpi）。

var beachImage = new Image { Aspect = Aspect.AspectFit };
beachImage.Source = ImageSource.FromFile("waterfront.jpg");

来源：https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images

- Adam

---

在 UWP 项目中，将所有图像都放在根文件夹下并不是最佳解决方案，您是否有其他解决方案可以将图像放在子文件夹下？请参考以下链接中的问题。http://stackoverflow.com/questions/37939758/xamarin-cross-platform-uwp-images-are-missing - Ashaar

像往常一样，Xamarin Forms 什么都不起作用。我已经尝试了上面的所有解决方案。 - user1034912

Answer 2

如果你想使用代码添加图片， 可以尝试这个方法。

自动下载并显示图片。

        var webImage = new Image { Aspect = Aspect.AspectFit };
        webImage.Source = ImageSource.FromUri(new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"));

- Asbar Ali

Answer 3

通过点击资源/Drawable文件夹并选择新建/现有项目在解决方案资源管理器中添加图像。请不要将图像复制到资源/Drawable文件夹中。希望这对您有所帮助。

- Karthikeyan Ramasamy