如何在 Xamarin.Forms 中正確使用 Image Source 屬性？

Question

我無法以堆棧布局在內容頁面上顯示圖像。 我查看了 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
    }

Answer 1

您不應該引用路徑，因為源屬性是跨平台的，並且每個平台都有不同的文件夾來存放圖像等資產，您只需要指定文件名和擴展名。 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 : //docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#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 文件夾。 我希望它有幫助。