Best way to display dynamic text on bitmap image

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.

Best Answer


Sign In or Register to comment.