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. 

    public class MyButton : UIButton
        public MyButton ()

        public MyButton (IntPtr handle)
            this.Handle = handle;
        public override void Draw (System.Drawing.RectangleF rect)
            base.Draw (rect);
            var context = UIGraphics.GetCurrentContext();

            //// Color Declarations
            UIColor strokeColor = UIColor.FromRGBA(0.000f, 0.000f, 0.000f, 1.000f);

            //// Shadow Declarations
            var shadow = strokeColor.CGColor;
            var shadowOffset = new SizeF(3.1f, 3.1f);
            var shadowBlurRadius = 5;

            //// Image Declarations
            var image = UIImage.FromFile("Test2.png");

            //// Rectangle Drawing
            var rectanglePath = UIBezierPath.FromRoundedRect(rect, 8);
            context.SetShadowWithColor(shadowOffset, shadowBlurRadius, shadow);

            rectanglePath.LineWidth = 1;

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.