Saturday, June 22, 2013

How to use Xamarin's new UI Designer with Paint Code for custom controls.

After reading this post by the Xamarin team, I really wanted to get to work on making some nifty things. So, I basically pulled down the latest updates in the Alpha channel from Xamarin, made a new project, and hopped right in.

I wanted to see how much easier it was to make custom styled components and add them to my applications, and boy, was I impressed how much faster it is.

Using the UIButton for this little example of code, is probably the worst thing I could have done, but oh well. I created this simple class, MyButton and inherited from UIButton.

The Draw code, came from PaintCode.. I had to tweak a couple things, one, I had to tweak image.Draw to match the button's submitted rect for Draw. Below is a screenshot from PaintCode, I set the Corners to rounded, upped the radius so that it was visible for the rounding of the corners, then I picked a texture image, for the fill.

Below is rendered output inside of their new designer.. which means I didn't need to deploy in order to see a result.