如何正确使用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
    }

Answer 1

您不应该引用该路径,因为source属性是跨平台的,并且由于每个平台都有一个不同的文件夹,如图像,您只需指定文件名和扩展名.Image类知道查找文件的位置.

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

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

资料来源: https ://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Local_Images

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"));

Answer 3

通过单击 Resources/Drawable 文件夹并选择 New/Existing item 在解决方案资源管理器中添加图像。请不要将图像复制到 Resources/Drawable 文件夹。我希望它有帮助。