{"id":17238,"date":"2015-03-30T12:00:36","date_gmt":"2015-03-30T16:00:36","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=17238"},"modified":"2015-03-30T12:00:36","modified_gmt":"2015-03-30T16:00:36","slug":"creating-beautiful-ios-controls-with-paintcode","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/creating-beautiful-ios-controls-with-paintcode\/","title":{"rendered":"Creating Beautiful iOS Controls with PaintCode"},"content":{"rendered":"

\t\t\t\tDelivering a beautifully designed app can be the difference between having an app that gets used, or having an app that no one notices. Of course, having a beautiful app doesn’t just happen – creating something different often means creating your own custom controls, and creating beautiful custom controls on iOS can be a difficult task without intimate knowledge of CoreGraphics. This is where PaintCode steps in. PaintCode is a vector drawing app that generates C# code in real-time, allowing you to design your iOS controls and export the resulting “drawing code”. This is great because it allows you to create resolution-independent controls that will look great on any size of device.<\/p>\n

From the beginning, the Xamarin Designer for iOS has supported real-time\u00a0rendering of custom controls, which allows you to see instant feedback on your code changes. A number of developers have been opting to use images for control customization, which leads to a series of issues including bloating your app store binary size and\u00a0that these images simply won’t scale properly on new screen sizes that Apple may release in the future.<\/p>\n

\"PaintCode<\/a><\/p>\n

StyleKit<\/h4>\n

PaintCode can generate a special class that\"\"\"\"\"\"\"\" contains all of the\u00a0drawings, colors, gradients, shadows, and other design assets used in your app.\u00a0In the following example, I’ve named the StyleKit DemoStyleKit<\/code>. You’ll want to make sure you’re regularly exporting the StyleKit from PaintCode into your Xamarin project in order for changes to be made available to you in your project.\u00a0Exporting your style sheet will create a .cs<\/b> style and copy any images your styles use into the directory of your choice. Once you’ve done this, you’ll need to add these to your existing Xamarin.iOS project.<\/p>\n

Creating a custom control<\/h4>\n

Once you’ve added the exported files, you’re ready to consume the drawing code in a custom control. You will need to create a new class which will be your custom control; in this sample I’ve called it ‘MyTimerView’ and it inherits from UIView.<\/p>\n

It’s here where we’ll consume the auto-generated C# from PaintCode and set it up to support the Storyboard designer. In this example, I annotate the class with the\u00a0DesignTimeVisible attribute. This tells our iOS Storyboard designer that I\u00a0wish to use this class within the Storyboard designer. A\u00a0basic class\u00a0with Storyboard support\u00a0should look something like this:<\/p>\n

\n[Register("MyTimerView"), DesignTimeVisible(true)]\npublic class MyTimerView : UIView\n{\n  public MyTimerView(IntPtr p) : base(p)\n  {\n    Initialize ();\n  }\n\n  public MyTimerView ()\n  {\n   Initialize ();\n  }\n\n  void Initialize ()\n  {\n  }\n\n  public override void Draw(CoreGraphics.CGRect rect)\n  {\n   base.Draw(rect);\n  }\n}\n<\/pre>\n
Because PaintCode\u00a0exports the drawing code into the StyleKit, we can implement the drawing with just one line of code!<\/p>\n
\npublic override void Draw(CoreGraphics.CGRect rect)\n{\n  DemoStyleKit.DrawTimer(rect, Angle);\n}\n<\/pre>\n
If you save and build the project now and open your Storyboard, you should find MyTimerView within the control toolbox. You can drag and drop this into your view and instantly see how it looks.<\/p>\n
\"A<\/a>Advanced properties<\/h4>\n
It would be great to be able to control the angle of the green progress line from the Properties panel within our IDE. Fortunately,\u00a0custom controls allow for design time properties for a number of types, including string, bool, SizeF, UIColor, and UIImage. To add an angle property to our properties pad, let’s add the following to our class:<\/p>\n
\nfloat angle;\n[Export("Angle"), Browsable(true)]\npublic float Angle\n{\n  get { return angle; }\n  set\n  {\n    angle = value;\n    SetNeedsDisplay ();\n  }\n}\n<\/pre>\n
It’s also worth ensuring that the _angle property has an initial value by setting it in the\u00a0Initialize<\/span><\/span> method. Once you’ve done this, you’ll see a new property available to you and the changes to the value will automatically be updated in the custom control. This allows you to create very customizable controls without needing to drop into code to make tweaks.<\/p>\n
Learn more<\/h4>\n
You can learn more about PaintCode on their website<\/a>\u00a0and purchase the\u00a0app from the\u00a0Mac App Store.<\/a><\/p>\n
To get started, download the sample project from this blog post from GitHub<\/a>.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Delivering a beautifully designed app can be the difference between having an app that gets used, or having an app that no one notices. Of course, having a beautiful app doesn’t just happen – creating something different often means creating your own custom controls, and creating beautiful custom controls on iOS can be a difficult […]<\/p>\n","protected":false},"author":1929,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,4],"class_list":["post-17238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
Delivering a beautifully designed app can be the difference between having an app that gets used, or having an app that no one notices. Of course, having a beautiful app doesn’t just happen – creating something different often means creating your own custom controls, and creating beautiful custom controls on iOS can be a difficult […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1929"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=17238"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17238\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=17238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=17238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=17238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}