We’ve just completed our first Xamarin Forms project here at The Technology Studio and I wanted to share some of the cool things we learnt created along the way (so stay tuned!). One of the controls we needed for the project was a Vector Image view. The advantage of using Vector images over raster images is the fact we don’t need to create different sized images for each platform and/or idiom, a situation that is worsened when developing for iOS and Android.
So lets dig into the control and show you how and where to use it:
The control is pretty straightforward, it inherits from Image (so we can use theproperties later on) and exposes two properties:
- Vector – This is an enum of the different Vector images. I’ve handily called the enum VectorImage in our code but you can call it whatever you like.
- Colour – a Xamarin.Forms.Color. I’ll show how this is used so you don’t need to create multiple colour variations of the same image in the renderers.
The control is below:
The iOS renderer takes in the and draws a Stylekit canvas that we created using Paintcode (a good tutorial on how to use it, and generate code for Xamarin, can be found here).
The Android renderer uses the XamSvg library to take svgs (which should be saved in Resources.Raw) and turn them into Bitmap drawables. We use and convert them into dpi with the following calculation: