如何在 Xamarin.Forms 中正确使用 Image Source 属性? [英] How to correctly use the Image Source property with Xamarin.Forms?

问题描述

我无法以堆栈布局在内容页面上调出图像.我查看了 Xamarin API 文档并找到了

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

I am having difficulty bringing up an image on the content page in a stack layout. I looked through Xamarin API Documentation and found Xamarin.Forms.Image.Source Property, but no sample code to see how it's written. I also checked to see how it was written in C# and seems to match my code in terms of filename path, but in Xamarin, it may be slightly different since it's the first time doing this. The code I'm currently testing through an Android emulator (Google Nexus 5) in Visual Studio 2013 which runs fine, with the exception of the Image not showing.

Image Source:

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

Full Code:

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
    }

解决方案

You shouldn't reference the path because the source property is cross-platform and since every platform has a different folder for assets like images, you only need to specify the filename and extension. The Image class knows where to look to find the file.

Image files can be added to each application project and referenced from Xamarin.Forms shared code. To use a single image across all apps, the same filename must be used on every platform, and it should be a valid Android resource name (which means no spaces and special characters). Place images in the Resources/drawable directory with Build Action: AndroidResource . High- and low-DPI versions of an image can also be supplied (in appropriately named Resources subdirectories such as drawable-ldpi , drawable-hdpi , and drawable-xhdpi ).

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

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

这篇关于如何在 Xamarin.Forms 中正确使用 Image Source 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！