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

Xamarin's new IOS Designer

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. 

    [Register("MyButton")]
    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.SaveState();
            context.SetShadowWithColor(shadowOffset, shadowBlurRadius, shadow);
            context.SaveState();
            rectanglePath.AddClip();
            image.Draw(rect);
            context.RestoreState();
            context.RestoreState();

            strokeColor.SetStroke();
            rectanglePath.LineWidth = 1;
            rectanglePath.Stroke();
        }
    }

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.