Simply trying to add an image to a basic login screen

I have a super simple login screen that I've mainly built as a practice tool. I'm trying to add a logo (png image file) to the top of the 'login screen' but I can't get the image to show up at all. I've tried just about all I can think of.

        public LoginPage()
        {
            BackgroundColor = Color.FromHex("#189DFF");

            var layout = new StackLayout { Padding = 40 };

            // Logo image for login screen 
            var CRMLogo = new Image { Aspect = Aspect.AspectFit };
            CRMLogo.Source = ImageSource.FromResource("CRM_Icon.png");

            // Y U NO SHOW UP?!?!?!?!?!?!?!?!?!?!

            var label = new Label
                {
                    Text = "Please Login to Continue",
                    Font = Font.SystemFontOfSize(NamedSize.Medium),
                    TextColor = Color.White,
                    VerticalOptions = LayoutOptions.Center,
                    XAlign = TextAlignment.Center,
                    YAlign = TextAlignment.Center,
                };

            layout.Children.Add(CRMLogo);
            layout.Children.Add(label);

            var username = new Entry { Placeholder = "Username", };
            layout.Children.Add(username);

            var password = new Entry { Placeholder = "Password", IsPassword = true };
            layout.Children.Add(password);         

            var signInButton = new Button { Text = "Sign In", TextColor = Color.White, BackgroundColor = Color.FromHex("#7FBF3F") };
            var forgotPasswordButton = new Button { Text = "Forgot your password?", TextColor = Color.White, BackgroundColor = Color.FromHex("#FF7F00") };

            layout.Children.Add(signInButton);
            layout.Children.Add(forgotPasswordButton);

            Content = new ScrollView { Content = layout };
        }
    }

The image does not show up on either iOS or Android. The image itself is just a regular PNG file, nothing special. It's located directly in the Resources folder at the root, not behind any other folders.

Posts

  • KymPhillpottsKymPhillpotts AUMember, University ✭✭

    Just a thought, do you have the build actions set correctly for them?

  • Yes, I tried them as both EmbeddedResource and even as AndroidResource/iOSResource respectively.

    Nothing... :/

  • AdamWolfAdamWolf USMember, University ✭✭

    @BradfordKolumbic Are you adding the file to the iOS and Android project as a BundledResource or are you adding it to the PCL project?

    When you add it to the iOS and Android project as a BundledResource you can use this code:

    new Image() {Source = ImageSource.FromFile("CRM_Icon.png")}

  • SmathsSmaths USMember ✭✭
    edited February 2015

    When you describe that the image.png is located in the Resource folder at the Root, you mean of the iOS and Android projects in your whole solution correct?
    I assume you do, but that might be something to check.

    The first thing I noticed was the “ImageSource.FromResource”. Perhaps this is specifically what you want to use but if not, the “ImageSource.FromFile” works consistently for me.

    Here is the process I recommend:
    1. Place image iOS generated Resources folder.
    2. Make sure the build action is “Bundle Resource”
    3. Change this line:

    CRMLogo.Source = ImageSource.FromResource(“myImage.png”);
    

    to...

    CRMLogo.Source = ImageSource.FromFile(“myImage.png”);
    

    I’m not an extremely experienced developer so I’d have to do a little reading as to why your method is not working, but I expect and hope my suggestions will give you the results you’re looking for.

  • Fixed it!

    I changed the code to the following:
    var CRMLogo = new Image { Aspect = Aspect.AspectFit, Source = "CRM_Icon.png"};

    As compared to the original code:

    var CRMLogo = new Image { Aspect = Aspect.AspectFit };
    CRMLogo.Source = ImageSource.FromResource("CRM_Icon.png");
    

    That did the trick!
    Thank you for your help, everyone! :)

Sign In or Register to comment.