Why are my Xamarin UWP Images not showing up on device? - image

I am developing a Xamarin UWP app using ffimageloading. The images show up just fine on the Windows Phone emulator that I am running through Visual Studio, but when I deploy it to a device through the device portal all of the images are missing.
<ffimageloading:CachedImage Grid.Column="0" Grid.Row="1"
Source="{helpers:ImageResource MyProject.Assets.Images.music-doublenote.png}" />

The issue was the build configuration. By turning off "Compile with .NET Native tool chain" on the Build tab of Properties for the Release configuration of the main UWP app and deploying the app with WinAppDeployCmd.exe

I had the same problem whenever I kept the image file inside any folder (for. eg assests). But later i started keeping the images file in the main project folder; I didn't keep them inside any folders and they started to show up in the application.

To get "Compile with .NET Native tool chain" working you have to use UWP-specific overload of the Forms.Init call which allows to correctly include FFImageLoading assemblies for Xamarin.Forms usage:
// you'll need to add `using System.Reflection;`
List<Assembly> assembliesToInclude = new List<Assembly>();
//Now, add in all the assemblies your app uses
assembliesToInclude.Add(typeof (FFImageLoadingAssembliesHere).GetTypeInfo().Assembly);
//Also do this for all your other 3rd party libraries
Xamarin.Forms.Forms.Init(e, assembliesToInclude);
// replaces Xamarin.Forms.Forms.Init(e);

I also had the issue with images not showing up on my UWP app. The images were showing up on my Android project but not UWP. For me the solution was to add the file extension. For some reason "myimage" works on Android but not on UWP, has to include the file extension like "myimage.png". Just wanna leave this here for anyone else potentially experiencing the same issue.

Related

How to display images in Muti-Platform Xamarin.Forms Project on iOS

I've got a Xamarin.Forms Project containing an Android and an iOS Platform Project.
I've got my whole application working on Android and I am now struggling on the iOS part. I can't get my images to display on iOS.
I've followed the Microsoft guide on how to work with images on Xamarin.iOS, but it's simply not working.
I have created a minimum example from a new project and uploaded it to GitHub, it can be found here.
Output: On Android, the image is being displayed fine, on iOS, the screen stays empty. In addition to that, the logs I've added to AppDelegate.cs show, that the images cannot be found by using UIImage.FromBundle()
I've also checked the CSProject file of the iOS project, but it already contains the <ImageAsset> item groups.
I am on Visual Studio Professional 2022 (Windows) Version 17.4.1
Can someone please have a look into this? I am going crazy...
I have test your project with the Visual Studio 2022 for mac. And I had the same results in the Android platform and ios platform. The small car icon will show at the top of the screen.
But for the iphone 14 pro simulator, which has a notch screen. The car icon almost be covered. So you can try to run it on the ipad or a device without notch screen to check the car icon will show or not.
In addition, I have checked your Assets.xcassets folder and the official sample on the github. There is no a such xxx_vector folder in it.
Background information:
What's deprecated (but still works) is individual resource files (aaa.png, aaa#x2.png), with no xcasset.
An xcasset containing those files is not deprecated. Nor is it likely to become deprecated in the future.
If you still want to test with .pdf containing vectors:
What is problematic about your setup is that you have TWO representations of car_settings. One with .pngs, one with vector pdf.
What happens if you remove the xcasset with .pngs, and rename the one with pdf to match the filename in it? (car_settings xcasset, with car_settings.pdf).
Close VS, and delete all .bin and .obj folders after making this change, to ensure VS correctly rebuilds with the vector version.
If this still fails, then you likely have encountered a bug. Add as an issue at github xamarin forms issues. Be sure to mention the versions of VS and Xamarin.Forms that has the problem.

How to debug a Cordova app showing blank screen in XCode Simulator

We inherited an app where the frontend is built in Vue 2 and the mobile app built with cordova-ios (6.2.0) and cordova-android (10.1.1). It has built ok and loaded in the XCode (13.2.1) simulator until recently.
It's got some fairly old packages which I upgraded, and managed to get it to run both in vue ui and Android Studio (Chipmunk). (I had upgraded the packages because somewhere along the line that build broke -- so I deleted node_modules and package-lock.json, then upgraded packages one by one until I got it working again.)
However, when I do the Cordova build for iOS, open the project in XCode, do an XCode build, then open it up in a simulator, the screen is completely blank.
These are the only files that changed in version control between releases:
package.json
package-lock.json
babel.config.js
(various Vue files under src/views)
I'm fairly new to mobile development so don't really know how to proceed. How would I go about debugging the project (simulator, XCode, whatever) to see what has broken?
Any extra information you need please ask.
Edit 1: Avinash's suggestion about debugging via Safari Dev Console was a good tip (thanks Avinash). I've checked the app HTML vs a working build and it seems somehow the injection of the app content into <div id="app"> is not happening. In the android version it's fine, so maybe something in the cordova build is not happy.
There's an error message in the debug logging in XCode saying it could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier which is also different from the output in a working build.
Avinash's suggestion is spot on in that it can help troubleshoot startup problems (I've had to do this a bunch of times myself). From your update, it sounds like there's an issue with the splash screen configuration.
There's some iOS specific documentation for the splash screen plugin on the Cordova documentation website. A couple tips that might be useful in tracking down the issue:
You can use a single image for the splash screen if desired. I've got just one defined for my app (the needed dimensions are defined in the Cordova docs above):
<platform name="iOS">
...
<splash src="www/res/screen/ios/Default#2x~universal~anyany.png" />
</platform>
I have also run into issues where the storyboard file has gotten corrupted, probably by me falling on my keyboard and clicking on something while the editor was open. To rebuild, you can remove and re-add the iOS platform:
$ cordova platform rm ios
$ cordova platform add ios
This should copy over the splash image and rebuild the storyboard file.

Is it possible to use asset catalog from an iOS class library in a Xamarin Forms iOS app?

Could not find any answers to this specific problem anywhere online.
I've had to factor a Xamarin forms project as there was a requirement to have multiple android/iOS apps that use the same code. Current set up is:
Standard Library
Android App 1
Android App 2
iOS App 1
iOS App 2
Android Class Library
iOS Class Library
For android, the images are in the resources folder in the android class library and the images display fine in the app.
For iOS I have put the images in a Asset Catalog in the iOS class library. These however, do not show in the app. I created an asset catalog in one of the iOS app projects and tested that an image would load from there - and it did. Is it not possible for images to load from an asset catalog in a iOS class library? I have other items in the iOS class library (such as custom renderers, which work fine). If the latter is not possible, is there a different way I keep the images in one place for iOS, without having to change my xaml? This is an existing project, with loads of images already being referenced by name in xaml (e.g. Source="image.png") that are used for both iOS and android. If possible, I don't want to have to maintain an asset catalog per app, although I do know of a way it could be automated, but I want to avoid having to do that if possible.
Using .NET Standard 2.1 and Xamarin Forms 5.0.0.2401
Thanks in advance.

Extending an existing Xamarin Forms app to Uno to enable it to run in a browser using WASM

I am attempting to extend my Xamarin Forms app to Uno to enable it to run in a browser using WASM. I am following the Xamarin Forms porting document at https://platform.uno/xamarin-forms. The article on that page entitled "Uno Platform for Xamarin.Forms Developers" has, as its Get Started, Step 1: Create a Xamarin.Forms project, Check “Place project and solution in the same directory”. My existing Xamarin Forms project (which I want to port) was not created with "Place project and solution in the same directory". How can I port this project which was not created with "Place project and solution in the same directory". Thank you.
To use Uno Platform renderers for Xamarin.Forms, you need to make sure you are using Xamarin.Forms version 4.5.0-uno.571.

Appcelerator App Conversion iOS to Android.

One of our developer developed an app in appcelerator using alloy framework for iOS which works fine. Now we want to run the same app in Android, since the appcelerator is a cross platform tool, we wish to make the Android version of the App. I tried searching about it and explored the applcelerator ide for options but couldn't find it. Can some one please guide me into the right direction?
First of all have a look at this link : http://docs.appcelerator.com/platform/latest/#!/guide/Supporting_Multiple_Platforms_in_a_Single_Codebase this will guide you to update the application for multiple platforms.
Their are basically two different ways to port any application from android to iOS or vise-versa, but before that just let me clear one more thing to you about tiapp.xml.
In the tiapp.xml of your project you need to updated the Development Target by checking for which platform you are developing the application for (iPhone, iPad, android, Mobile Web).
Option 1 :
Cross Platform is build to make code re-usable (i.e. re-use same code for all the platforms), but we have exceptions with many things. Their are lot of components that work fine in iOS but when you use them in android then you will face errors. So in that case you just need to apply conditions for android and iOS like below :
if(OS_ANDROID)
// do something
else if(OS_IOS)
// do something
What you need to do is that you need run the application in android simulator and test the application for these changes and then apply the changes accordingly.
Basically a developer has to target the UI for both the platforms, as their will not be any logical differences between the two. Also their will be UI changes between the same components, like for example a picker in iOS will not look the same as it will when you look it in an android application.
Option 2 :
Now in the project you have assets folder with the platform that you have selected in the tiapp.xml (i.e. iPhone, android etc).
You can create similar structure in the style and view folder, create two folders iOS and android in both the directory (i.e. style and view).
First, move .tss of style folder (except app.tss and index.tss) in the iOS folder, then copy the files in the android folder also.
Repeat the similar process with the View folder also.
Now you have two different structures (i.e. view and styles) according to their platform. Now you can run the application in android simulators and resolve the error that you face.
Hope this small information helps the cause, you can also have look at the documentation of all the components from below link :
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TableView

Resources