How do I add images to an Xamarin iOS project and make them available in Interface Builder?

Question

I am working in Xamarin to build an iOS iPad app.

I have created a folder called Resources in the project root e.g. ProjectName/Resources. Within here is a subfolder ProjectName/Resources/Images. I have added 2 images into the Images folder.

Then, in Interface Builder (in Xcode), I have added a UIImageView to my xib file and gone to the Image drop down in the attributes inspector. There are no images available to select.

Maybe I have to add them via Xcode instead? If so what are the correct steps and file structures to use?

What is the correct way to work with images and make them available for selection in Interface Builder?

Answer 1

Xamarin Studio only exports images that would live in the top-level app bundle directory when the app gets compiled. This is because Xcode's .xib files only seem to be able to refer to images in the top-level app bundle.

There are multiple ways of achieving your goal:

The first option is to specify a LogicalName to be whatever you want the name to be inside of the compiled app bundle. In Xamarin Studio, this property is called the Resource ID (may or may not be available depending on which version of Xamarin Studio you are using - it was only recently added). You can also set the LogicalName by editing the *.csproj file like so:

<BundleResource Include="Icons\icon.png">
  <LogicalName>icon.png</LogicalName>
</BundleResource>

Normally, that Icons\icon.png file would be copied into the iOS app bundle as Icons/icon.png, however, the LogicalName property overrides the relative install path/name. In this case it would be copied over as simply icon.png.

As another example, you can also do this:

<BundleResource Include="Icons\iOS\icon.png">
  <LogicalName>AppIcon.png</LogicalName>
</BundleResource>

This will copy the Icons\iOS\icon.png file into the root of the iOS app bundle and also rename it to AppIcon.png.

A second option is to simply move your image file(s) into the Resources folder. The Resources folder is a special directory that gets stripped out of the default path names when copied over to the iOS app bundle. In other words, Resources\icon.png would be copied over into the root of the iOS app bundle as icon.png rather than Resources\icon.png as is the case with normal project directories.

A third option is to simply register other "Resource" directories of your own (and they can exist within other directories, including the default Resources directory).

For example, you could have the structure in your project:

Resources/
   Icons/
      icon.png
      [email protected]

And in your *.csproj file, edit the following tag:

<IPhoneResourcePrefix>Resources</IPhoneResourcePrefix>

and replace it with:

<IPhoneResourcePrefix>Resources;Resources\Icons</IPhoneResourcePrefix>

This will ensure that the icon.png and [email protected] files are installed in the root of the iOS app bundle.