Best way to display dynamic text on bitmap image

jfjoubert

Hi,
I'm a complete newbie to mobile development, so please bare with me.

I've designed a Xamarin Forms Cross Platform project in Visual Studio 2015 Community Edition (targeting only Android at this point) which is an interface to a CDU (Control Display Unit) in the X-Plane 10 simulator. The app consists of a single page which contains a bitmap image of the CDU unit from a Boeing 737-300. I am using an AbsoluteLayout to position all the buttons on top of the "virtual" buttons on the image. The "virtual display" of the CDU is currently made up of a whole bunch of labels to display the various data elements which is returned from the simulator via the network in real time, so the labels are bound to data returned via a TCP socket.

The app is working 100%, but I'm not happy with the limitations of the text displayed inside the labels... I need more control when displaying the CDU screen text.
Here's a screenshot of my app running on my "cheapo" Acer Iconia B1 tablet...

I would like the text to occupy the whole label without any "padding" to the edges of the label. Look at the highlighted line displaying "551"...
I would also like to be able to highlight a subset of characters within a single "view"/label. For example: "MOD RTE LEGS" is the data returned from the sim and I need to display the MOD highlighted and then the rest as normal green text.
I would also like to be able to specify letter spacing and use a custom "monospaced" font.
Here are two images from the actual simulator showing how it should be displayed...

So what are my options? Will it be possible to use the graphics API or maybe even SkiaSharp with custom renderers to handle the display portion of the CDU?

Any help or advice would be greatly appreciated.
Thanks, Jean.

mattleibow

@jfjoubert SkiaSharp could be for you. You could even render the entire screen in hardware accelerated 2D graphics We have a whole stack of new views and layers that work in both native sand Xamarin.Forms.

Be sure to check out the SkiaSharp.Views and SkiaSharp.Views.Forms NuGets. Our samples also have some cool examples of some of the features.

The real benefit of doing it this way is that all your drawing code can be exactly the same, and even be in a pure PCL.

mattleibow

@jfjoubert SkiaSharp could be for you. You could even render the entire screen in hardware accelerated 2D graphics We have a whole stack of new views and layers that work in both native sand Xamarin.Forms.

Be sure to check out the SkiaSharp.Views and SkiaSharp.Views.Forms NuGets. Our samples also have some cool examples of some of the features.

The real benefit of doing it this way is that all your drawing code can be exactly the same, and even be in a pure PCL.