{"id":27849,"date":"2016-09-29T14:13:19","date_gmt":"2016-09-29T21:13:19","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=27849"},"modified":"2016-09-29T14:13:19","modified_gmt":"2016-09-29T21:13:19","slug":"adding-bindable-native-views-directly-to-xaml","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/adding-bindable-native-views-directly-to-xaml\/","title":{"rendered":"Adding Bindable Native Views Directly to XAML"},"content":{"rendered":"

\t\t\t\tXamarin.Forms ships with over 40 pages, layouts, and controls for you to mix-and-match to build great native cross-platform user interfaces. One of my favorite features of Xamarin.Forms is that we have access to 100% of the controls and APIs for iOS, Android, and Windows. For implementing platform-specific features such as geolocation or bluetooth, we can take advantage of the DependencyService<\/code><\/a>. For adding platform-specific controls such as the FloatingActionButton<\/code> on Android, we have many different options at our disposal, from custom renderers<\/a> to effects<\/a> to native embedding<\/a>.<\/p>\n

To help you easily build beautiful user interfaces with platform-specific controls, we’re proud to introduce native view declaration<\/strong>, allowing you to add bindable iOS, Android, and Windows views directly to XAML. Rather than having to write a custom renderer, you can simply add the control directly to XAML with no<\/em> additional configuration. In this blog post, you’ll learn how to add bindable iOS, Android, and Windows views directly to Xamarin.Forms XAML with native view declaration.<\/p>\n

\"An<\/p>\n

Introducing Native View Declaration<\/h2>\n

Getting Started<\/h3>\n

Native view declaration requires that you have the latest Stable channel release<\/a>, Service Release 0<\/a>, which also allows you to take advantage of the new iOS 10 and Android Nougat APIs in your mobile apps. Xamarin.Forms 2.3.3-pre<\/a> introduced support for native view declaration and bindings, so you must be using at least that version of Xamarin.Forms to use this feature. As with all versions of Xamarin.Forms, don’t update any of the Xamarin.Android.Support<\/em> packages; Xamarin.Forms will automatically update these packages if a newer compatible version is available.<\/p>\n

Adding Native Views to XAML<\/h3>\n

Adding native views couldn’t be easier! To make native views consumable via XAML, we must first add XML namespaces (markup xmlns<\/code>) for each platform we’ll be embedding views from. This helps Xamarin.Forms find the native control added to XAML. Controls defined for XAML namespaces other than the specified target platform are ignored. The target platform is automatically selected depending on the platform the app is running on. Next, we can add native view directly to our XAML:<\/p>\n

\n\n\n\t\n\t    \n        \n        \n\t\n\n<\/pre>\n
\"Native<\/p>\n
We can access all native properties for the control directly in our XAML as XML attributes, as well as view these properties via XAML IntelliSense. If the native control requires use of arguments, we can pass these to the native control using the Arguments XML<\/code> attribute. <\/p>\n
\"IntelliSense<\/p>\n
Data Binding Native Views<\/h2>\n
The ability to add native views directly to XAML is great, but many controls also require user interaction, such as entering text. Data bindings allow properties of two objects to be linked so that a change in one causes a change in the other. Native view declaration supports data binding out of the box, so you can bind to properties of native views from within XAML.<\/p>\n
Native view declaration not only supports OneWay<\/code> data bindings, where changes are propagated from source to target object, but also TwoWay<\/code> data bindings. Two-way data binding propagates changes in both directions, allowing us to ensure that two views are always synchronized. This allows us to build very complex views, such as this color picker, with native view declaration in Xamarin.Forms.<\/p>\n
\"An<\/p>\n
Unlike native embedding, native view declaration works in Portable Class Libraries (PCLs) as well. Native data binding will also work in PCLs, though you will need to ensure you have the XAML compiler (XAMLC) turned off for pages that use native view declaration.<\/p>\n
Built on Open Source<\/h2>\n
In addition to the Xamarin SDKs being open-sourced on GitHub, Xamarin.Forms is also open source<\/a>! We want it to be as easy as possible for developers to contribute to Xamarin.Forms. Being part of an open source project means much more than just writing code—there are many ways you can contribute<\/a>. We would love to hear your feedback<\/a> on native view declaration and bindings on the Xamarin Forums and Bugzilla<\/a> if you experience issues.<\/p>\n
Wrapping Up<\/h2>\n
In this blog post, we learned how to use the new native view declaration<\/strong> and native bindings<\/strong> features in Xamarin.Forms 2.3.3 and above to add platform-specific controls directly to XAML without requiring a custom renderer. For more information about native view declaration, visit the Xamarin Forums<\/a>. For samples of native view declaration, visit GitHub<\/a>.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Xamarin.Forms ships with over 40 pages, layouts, and controls for you to mix-and-match to build great native cross-platform user interfaces. One of my favorite features of Xamarin.Forms is that we have access to 100% of the controls and APIs for iOS, Android, and Windows. For implementing platform-specific features such as geolocation or bluetooth, we can […]<\/p>\n","protected":false},"author":546,"featured_media":27906,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[16],"class_list":["post-27849","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Xamarin.Forms ships with over 40 pages, layouts, and controls for you to mix-and-match to build great native cross-platform user interfaces. One of my favorite features of Xamarin.Forms is that we have access to 100% of the controls and APIs for iOS, Android, and Windows. For implementing platform-specific features such as geolocation or bluetooth, we can […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/27849","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=27849"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/27849\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=27849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=27849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=27849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}