{"id":11203,"date":"2014-06-02T09:42:43","date_gmt":"2014-06-02T13:42:43","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=11203"},"modified":"2014-06-02T09:42:43","modified_gmt":"2014-06-02T13:42:43","slug":"design-native-ios-user-interfaces-in-your-favorite-ide","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/design-native-ios-user-interfaces-in-your-favorite-ide\/","title":{"rendered":"iOS User Interface design in Visual Studio and Xamarin Studio"},"content":{"rendered":"

\t\t\t\tThe Xamarin Designer for iOS<\/strong> is our state of the art, user interface creation tool for building iOS applications. Built into both Visual Studio and Xamarin Studio, it seamlessly integrates into the developer workflow. With this new designer, creating amazing iOS user interfaces is easier than ever before.<\/p>\n

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

The designer comes with a variety of great features such as design-time custom control rendering, design-time custom properties, and auto layout. It offers a fantastic experience integrating the design surface to the backing code, while maintaining complete support for the iOS storyboard format. Let’s take a look at some of what it has to offer.<\/p>\n

Reference Controls Directly Without Outlets<\/h2>\n

Connecting controls to code happens by simply specifying the control’s Name<\/strong> in the Property Pad<\/strong>. It’s no longer necessary to create outlets as Xcode does. Once the Name<\/strong> is set, it can be immediately used in code to reference the control.<\/p>\n

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

Automatic Creation of Event Handlers<\/h2>\n

Now your control’s events are automatically wired up to code rather than specifying actions and connecting them to a target, all you need to do is simply double-click on a control and the event handler is automatically created for you.<\/p>\n

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

Additionally, a control’s events are all available in the Property Pad<\/strong>. You can auto-generate an event handler there, or you can select any pre-defined method to handle the event.<\/p>\n

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

Storyboards Fully Supported<\/h2>\n

The iOS designer supports all the great features of storyboards. Segues, orientation, device size selection and auto-layout are all available. You can even bring existing storyboards developed in Xcode into the designer and they will work seamlessly.<\/p>\n

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

Design-time Custom Control Rendering<\/h2>\n

The richness of the iOS user interface is among the top reasons why iOS apps are so beautiful. iOS offers wonderful APIs for developing controls that developers use to create amazing user experiences. However, the design-time experience for custom controls in Xcode is not ideal. Other than the frame where the control is rendered, the Xcode designer doesn’t give much in the way of design-time support.<\/p>\n

With the Xamarin Designer for iOS, custom controls are rendered at design-time, offering a realistic view of what the control will look like in the user interface.<\/p>\n

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

Design-time Properties<\/h3>\n

Even better, custom controls can be authored to make their own properties available in the Property Pad<\/strong> at design-time. Changing these properties causes the control’s view to refresh in the designer. This allows developers using the control to iterate on its look and feel before running the app, which makes it more efficient to work with custom controls, and makes using them in the designer a joy.<\/p>\n

Backwards Compatible with iOS 6<\/h3>\n

If you have to provide support for iOS 6, the Xamarin Designer for iOS will even give you a live preview of what your full storyboard will look like when running on iOS 6. Simply select the 6<\/b> button in the designer menu and you will get a live preview.<\/p>\n

\"iOS6<\/p>\n

Learn More with our Designer Documentation<\/h2>\n

We’ve assembled a variety of great documentation about the designer to get you going:<\/p>\n

Xamarin Designer for iOS Overview<\/a>\nIntroduction to the iOS Designer<\/a>\nWalkthrough – Using the iOS Designer<\/a>\nDesignable Controls Overview<\/a>\nWalkthrough Using Custom Controls in the iOS Designer<\/a>\nAuto Layout with the Designer<\/a><\/p>\n

Having such a great designer built into Visual Studio and Xamarin Studio will enable developers to be even more productive than ever before. We’re excited to see the great user interfaces you will create with it.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

The Xamarin Designer for iOS is our state of the art, user interface creation tool for building iOS applications. Built into both Visual Studio and Xamarin Studio, it seamlessly integrates into the developer workflow. With this new designer, creating amazing iOS user interfaces is easier than ever before. The designer comes with a variety of […]<\/p>\n","protected":false},"author":546,"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-11203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"

The Xamarin Designer for iOS is our state of the art, user interface creation tool for building iOS applications. Built into both Visual Studio and Xamarin Studio, it seamlessly integrates into the developer workflow. With this new designer, creating amazing iOS user interfaces is easier than ever before. The designer comes with a variety of […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/11203","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\/546"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=11203"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/11203\/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=11203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=11203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=11203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}