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

Posted 2023-04-13

【中文标题】如何正确使用 Xamarin.Forms 的 Image Source 属性？

【英文标题】：How to correctly use the Image Source property with Xamarin.Forms?

【发布时间】：2015-08-31 06:20:09

【问题描述】：

我无法在堆栈布局中的内容页面上显示图像。我查看了 Xamarin API 文档并找到了 Xamarin.Forms.Image.Source Property，但没有示例代码可以查看它是如何编写的。我还检查了它是如何用 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
    

【问题讨论】：

您是否阅读过此文档 - developer.xamarin.com/guides/cross-platform/xamarin-forms/…？通常在 Android 上，您将图像添加为可绘制资源，然后仅指定图像名称，Forms 会在资源中找到合适的图像。

感谢您的信息。我还有一个问题要问，我在哪里使用此代码var NfcImage = new ImageAspect = Aspect.AspectFit; NfcImage.Source = ImageSource.FromFile("xamarin_logo.png"); 指定页面上的图像位置？如果我将它放在 new Image 构造函数中，则不起作用

我想通了，我按照标题为“本地图像”的那个，将文件路径名调整为Source = "xamarin_logo.png"，它工作了。再次非常感谢您的链接。真的很有帮助。

【参考方案1】：

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

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

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

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

【讨论】：

在 UWP 项目中，将所有图像保留在根文件夹下并不是最佳解决方案，您是否有任何其他解决方案将图像保留在子文件夹下。请参考这里的问题。 ***.com/questions/37939758/…

像往常一样，在 Xamarin 表单中没有任何效果。我已经尝试了上述所有解决方案

【参考方案2】：

如果您愿意使用代码添加图片， 试试这个

自动下载并显示图片

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

【参考方案3】：

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