How to removed "Unknown" images from Xamarin Forms iOS Asset Catalog

Question

When updating images in an Asset Catalog for a Xamarin Forms iOS app, I sometime end up with extra images showing in the image set and sometimes the correct images are not assigned to the correct @1x, @2x etc. I also get this sometimes when I attempt to merge changes to my images between to versions of my project. I have been unable to clean out these images and there is no option to un-assign when you right click on these images in the asset catalog. Even deleting image set from the asset catalog via the Visual Studio IDE did not seem to work correctly as I then started getting some compile time errors that image files could not be found in the Assets.xcasstes folder. Any ideas how to correctly merge / handle this type of situation? I would prefer not to manually re-update the images in the second versiomn (ie branch) of my project.

Answer 1

So using the steps below, I was able to clean things up but it is a very manual process. Still looking for a good way to merge iOS images between branches. The steps below are for VS 2019 on the PC.

FYI - if your project is version controlled, I suggest performing a check in after every change that is made.

1. Go into the image set that has the 'unknow' images in and unset any images that are actually set. (You do this by right clicking in the image and selecting unset from the popup menu.) Save the project / assets after this has been done.
2. Once all images have been unset and you only see the 'unknown' images in the image set, select the image set name in the left hand pane and click the delete button near the top left hand area of the asset manager window. Save the project again.
3. Click on the iOS project in the solution explorer and select the 'Show all files' option in the top tool bar of the solution explorer window. You should now see a folder named Assets.xcassets under your iOS project.
4. Expand the Assets.xcassets folder and ensure your do not see a folder for the image set you deleted. For example, if you delete an image set named 'help', ensure you do not see a folder named help.imageset under the Assets.xcassets folder. If you do see the folder for the image set you just deleted, you may need to manually go into you file explorer and delete the folder from you disk drive.
5. Once the folder for the image set no longer exists in Assets.xcassets folder, I highly recommend cleaning your complete project.
6. Next right click on the iOS project and select 'Unload Project' from the popup menu.
7. After the project has been unloaded, the XXX.iOS.csproj file (where XXX is the name of your project) should automatically open in the Visual Studio editor. You now need to search this csproj file for all instance of the image set name you deleted and remove any XML entries you find. For example, if I deleted the 'config' image set and I found the following entries in my csproj file, I would delete all the XML entries. NOTE: I can't get the XML to actually display here so I put it in a separate answer so everyone can see it.

IMPORTANT.. - Also - make sure in the folders under Assets.xcassets ensure there is no Images.imageset folder unless you actually use an asset image set named Images. Otherwise delete this folder and ensure the folder / files are not referenced in the iOS.csproj file.

8. Once you have removed all the entries from images that are no longer part of your asset catalog, save the iOS csproj. Then right mouse button click on the iOS project in your solution and select 'Reload Project'.

9. You should now be able to re-compile the project with no errors. REMEBER - check-in your project to your version control system frequently and especially at this point.

10. Now you can go back into you Asset Catalog and re-add the needed image sets.

Everything should work correctly after this point.

Answer 2

So for some reason, I cannot get the XML code I posted above to actually display so I am going to try to post it here.

<ImageAsset Include="Assets.xcassets\config.imageset\config.png">
  <Visible>false</Visible>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\config.imageset\config@2x.png">
  <Visible>false</Visible>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\config.imageset\config@3x.png">
  <Visible>false</Visible>
</ImageAsset>
<ImageAsset Include="Assets.xcassets\config.imageset\Contents.json">
  <Visible>false</Visible>
</ImageAsset>

<ItemGroup>
  <ImageAsset Include="Assets.xcassets\Images.imageset\qrbuttonlight32.png">
    <Visible>false</Visible>
  </ImageAsset>
</ItemGroup>
<ItemGroup>
  <ImageAsset Include="Assets.xcassets\Images.imageset\qrbuttonlight64.png">
   <Visible>false</Visible>
  </ImageAsset>
</ItemGroup>
<ItemGroup>
  <ImageAsset Include="Assets.xcassets\Images.imageset\qrbuttonlight96.png">
   <Visible>false</Visible>
  </ImageAsset>
</ItemGroup>

You need to make sure you delete the complete XML tag - in this case it would be the entire ImageAsset XML node for each file in the config imageset.