Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I load an image from the Asset Catalog on cross-platform xamarin XAML?

Tags:

It seems like a really easy thing to do, and in theory it looks very straight forward:

  1. create the Asset Catalog
  2. add an Image Set and name it "imageName" (without .png)
  3. add the images
  4. done

or at least that's what i read pretty much everywhere, but I still can't get it to work.

My XAML looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CrossBaiscs"
             x:Class="CrossBaiscs.MainPage">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Orange">
            <Label Text="Welcome to Xamarin.Forms!"
                   TextColor="White"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />

            <Image VerticalOptions="CenterAndExpand"
                   HorizontalOptions="Center"
                   Source="logo1.png"/>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

And I added the images on the Asset Catalog:

Screenshot

I'm testing with Xamarin Live Player on an Iphone 6, and I can't see any image under the Label.

So... What am I missing?

EDIT

It works for this guy: Is it possible to use Image Set in a Xamarin Forms

But not for me, i did try removing the .png extension and leaving the xaml like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CrossBaiscs"
             x:Class="CrossBaiscs.MainPage">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Orange">
            <Label Text="Welcome to Xamarin.Forms!"
                   TextColor="White"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />

            <Image VerticalOptions="CenterAndExpand"
                   HorizontalOptions="Center"
                   Source="logo1"/>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Still doesn't work. Tried cleaning build folders and deleting bin/obj folders, still nothing.

Tried adding the resources to the Resources folder and deleting the Image Set from the Asset Catalog:

Resources on folder

Still didn't work.

Ideas?

EDIT 2

I left those 3 images on Resources folder and added the extension .png on XAML and it worked, still would be nice to know how its supposed to be done using the Asset Catalog.

like image 676
n.lell Avatar asked Dec 11 '17 20:12

n.lell


2 Answers

Just to point out something that's probably obvious but caused me issues for ages - you can't use the LaunchImages set that comes with the asset catalog as it is not eligible to list in the Image dropdown. You have to create a new Image Set.

After I did this, the following answers suddenly worked (where they hadn't before):

Including the Asset Catalog folder in the project

Creating a storyboard that comes with a code-behind

like image 86
Michael Rodrigues Avatar answered Oct 13 '22 13:10

Michael Rodrigues


don't use the .png extension in the XAML

<Image VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center"
               Source="logo1"/>
like image 43
Jason Avatar answered Oct 13 '22 12:10

Jason