Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
297 views
in Technique[技术] by (71.8m points)

c# - How to correctly use the Image Source property with Xamarin.Forms?

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
    }
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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 ).

enter image description here

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...