{"id":23934,"date":"2016-01-20T11:29:30","date_gmt":"2016-01-20T19:29:30","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=23934"},"modified":"2016-01-20T11:29:30","modified_gmt":"2016-01-20T19:29:30","slug":"advanced-data-binding-for-ios-android-and-windows","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/advanced-data-binding-for-ios-android-and-windows\/","title":{"rendered":"Data Binding Tips and Tricks for iOS, Android, and Windows"},"content":{"rendered":"

\t\t\t\tUtilizing data binding in Xamarin.Forms applications can greatly simplify application development by automatically synchronizing app data to the user interface with very little work. Previously<\/a>, we took a look at setting up your project to begin data binding and then saw it in action in an app.<\/p>\n

In this blog post, I\u2019m going to explore more advanced data binding scenarios where values are formatted and converted as they are passed between source<\/em> and target<\/em> by the binding engine.<\/p>\n

Control-to-Control Bindings<\/h2>\n

While data bindings are most often used to synchronize a UI with an underlying data model, they can also be defined to link properties of two controls on the same page. This is achieved by setting the BindingContext<\/code> of the target<\/em> object using the x:Reference<\/code> markup extension, as demonstrated in the following XAML code example from the sample application<\/a>:<\/p>\n

<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" x:Class=\"AdvancedDataBinding.RotationPage\" Title=\"Rotation\" Icon=\"xaml.png\">\n\t<StackLayout Padding=\"0,20,0,0\">\n\t\t<Label Text=\"Advanced Data Binding Demo\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" \/>\n\t\t<Slider x:Name=\"slider\" Maximum=\"360\" \/>\n\t\t<Image Source=\"waterfront.jpg\" BindingContext=\"{x:Reference slider}\" \n               Rotation=\"{Binding Value}\" VerticalOptions=\"CenterAndExpand\" \/>\n\t\t<Label BindingContext=\"{x:Reference slider}\" HorizontalOptions=\"Center\"\n               Text=\"{Binding Value, StringFormat='Rotation angle: {0:F0} degrees'}\" \/>\n\t<\/StackLayout>\n<\/ContentPage><\/pre>\n
The Slider<\/code> contains an x:Name<\/code> attribute that is referenced by the two Label<\/code> instances, using the x:Reference<\/code> markup extension. This binding extension defines a property called Name<\/code> to set to the name of the referenced element, in this case slider<\/code>. However, the Name<\/code> property is not explicitly required and is omitted here. The Value<\/code> property of the Slider<\/code> is bound to from both the Rotation<\/code> property of the Image<\/code> and the Text<\/code> property of the Label<\/code>. Therefore, as the slider is moved, the Image<\/code> rotates and the Label<\/code> is updated with the rotation angle, as shown in the following screenshots:<\/p>\n
\"rotation\"<\/p>\n
In Xamarin.Forms, bindings do not perform any implicit type conversions. However, the Binding<\/code> markup extension has a StringFormat<\/code> property that allows you to apply a .NET formatting string to the data. In the second Label<\/code> instance, a formatting string of {0:F0}<\/code> is used to display the Value<\/code> property of the Slider<\/code> to zero decimal places. Formatting strings must be suitable for a call to the string.Format<\/code> method, and the entire formatting string is placed in single quotes to avoid the curly braces being mistaken for the braces used to delimit markup extensions.<\/p>\n
Converters<\/h2>\n
While string formatting can be used to format the data returned from a source<\/em> object, it can\u2019t be used to perform type conversions. This is the role of value converters<\/em>. A value converter is a class that allows you to change the format of data as it\u2019s passed between source<\/em> and target<\/em> by the binding engine. This is achieved by the class implementing the IValueConverter<\/code> interface, which requires you to implement Convert<\/code> and ConvertBack<\/code> methods.<\/p>\n
The following code example shows the IntToBooleanConverter<\/code>, used in the sample application<\/a>, which returns a boolean<\/code> value based on a comparison of two integer values:<\/p>\n
public class IntToBooleanConverter : IValueConverter\n{\n\tpublic object Convert (object value, Type targetType, object parameter, CultureInfo culture)\n\t{\n\t\tint minimumLength = System.Convert.ToInt32 (parameter);\n\t\treturn (int)value >= minimumLength;\n\t}\n\n\tpublic object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture)\n\t{\n\t\tthrow new NotImplementedException ();\n\t}\n}<\/pre>\n
The Convert<\/code> method is called whenever a value passes from the source<\/em> to the target<\/em>. The value<\/code> argument to Convert<\/code> is the value from the source<\/em> to be converted. The targetType<\/code> argument is the type of the target<\/em> property, and the Convert<\/code> method should return an object or value that matches the targetType<\/code>. The parameter<\/code> argument is an optional conversion parameter that can be specified as a property to the Binding<\/code> markup extension. Finally, the culture<\/code> argument can be used if you need to perform a culture-specific conversion. The IntToBooleanConverter<\/code> returns true<\/code> if the value from the source<\/em> is greater than or equal to the value of the parameter<\/code> argument, otherwise it returns false<\/code>.<\/p>\n
The ConvertBack<\/code> method is called whenever a value passes from the target<\/em> to the source<\/em> (for TwoWay<\/code> or OneWayToSource<\/code> bindings). For this method, the value<\/code> argument is the value from the target<\/em> and the targetType<\/code> argument is the type of the source<\/em> property. When the ConvertBack<\/code> method isn’t required, it\u2019s common to have it throw a NotImplementedException<\/code>, or return null<\/code>.<\/p>\n
Similarly, the sample application<\/a> also contains an IntToColorConverter<\/code>, which returns one of two colors depending on a comparison of two integer values.<\/p>\n
In XAML, value converters are usually instantiated in a ResourceDictionary<\/code> and then referenced in a Binding<\/code> expression by using the StaticResource<\/code> markup extension. Because value converters don\u2019t maintain state, a value converter instance can be shared amongst multiple bindings.<\/p>\n
The following code example demonstrates the use of value converters in the sample application<\/a>:<\/p>\n
<ContentPage xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\" xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\" xmlns:local=\"clr-namespace:AdvancedDataBinding;assembly=AdvancedDataBinding\" x:Class=\"AdvancedDataBinding.ConverterPage\" Title=\"Converter\" Icon=\"xaml.png\">\n\t<ContentPage.Resources>\n\t\t<ResourceDictionary>\n\t\t\t<local:IntToBooleanConverter x:Key=\"intToBoolConverter\" \/>\n\t\t\t<local:IntToColorConverter x:Key=\"intToColorConverter\" \/>\n\t\t<\/ResourceDictionary>\n\t<\/ContentPage.Resources>\n\t<StackLayout Padding=\"0,20,0,0\">\n\t\t<Label Text=\"Advanced Data Binding Demo\" FontAttributes=\"Bold\" HorizontalOptions=\"Center\" \/>\n\t\t<Label Text=\"Enter your response (minimum 10 characters):\" \/>\n\t\t<Editor x:Name=\"editor\" HeightRequest=\"100\" \/>\n\t\t<StackLayout Orientation=\"Horizontal\">\n\t\t\t<Label Text=\"Number of characters:\" \/>\n\t\t\t<Label Text=\"{Binding Source={x:Reference editor}, Path=Text.Length}\" \n                   TextColor=\"{Binding Source={x:Reference editor}, Path=Text.Length, \n                               Converter={StaticResource intToColorConverter}, ConverterParameter=10}\" \/>\n\t\t<\/StackLayout>\n\t\t<Button Text=\"Send\" HorizontalOptions=\"Center\" \n                IsEnabled=\"{Binding Source={x:Reference editor}, Path=Text.Length, \n                            Converter={StaticResource intToBoolConverter}, ConverterParameter=10}\" \/>\n\t<\/StackLayout>\n<\/ContentPage><\/pre>\n
In order to reference value converters in XAML, their location must be specified with an XML namespace declaration (xmlns<\/code>). Accessing classes that are local to the application PCL is usually achieved with the local<\/code> prefix. The namespace declaration indicates the namespace name and the assembly containing the code.<\/p>\n
The IntToBoolConverter<\/code> is instantiated in the page\u2019s ResourceDictionary<\/code> and referenced in the Binding<\/code> expression set on the IsEnabled<\/code> property of the Button<\/code>. It\u2019s used to enable the Button<\/code> only when a minimum of ten characters have been entered into the Editor<\/code>. Similarly, the IntToColorConverter<\/code> is used to set the color of the number of characters that have been entered into the Editor<\/code> to green when there\u2019s a minimum of ten characters, otherwise it sets to red. The screenshots below demonstrate this functionality:<\/p>\n
\"converter-pre\"<\/p>\n
\"converter-post\"<\/p>\n
Note that if only one instance of a value converter is being used, it doesn\u2019t need to be stored in a ResourceDictionary<\/code>. Instead, it can be instantiated directly in the Binding<\/code>. For more information, see From Data Bindings to MVVM<\/a>.<\/p>\n
Wrapping Up<\/h2>\n
While data bindings are most often used to synchronize a UI with an underlying data model, they can also be defined to link properties of two views on the same page. This is achieved by setting the BindingContext<\/code> of the target<\/em> object using the x:Reference<\/code> markup extension.<\/p>\n
In Xamarin.Forms, bindings do not perform any implicit type conversions. String formatting can be used to format data returned from a source<\/em> object, and value converters can be used to change the format of data as it\u2019s passed between source<\/em> and target<\/em> by the binding engine.<\/p>\n
For more information about XAML markup extensions, see XAML Markup Extensions<\/a>. For more information about data binding, see Data Binding Basics<\/a> and From Data Bindings to MVVM<\/a>. Xamarin University<\/a> also provides a class on data binding in Xamarin.Forms.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Utilizing data binding in Xamarin.Forms applications can greatly simplify application development by automatically synchronizing app data to the user interface with very little work. Previously, we took a look at setting up your project to begin data binding and then saw it in action in an app. In this blog post, I\u2019m going to explore […]<\/p>\n","protected":false},"author":543,"featured_media":23946,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-23934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
Utilizing data binding in Xamarin.Forms applications can greatly simplify application development by automatically synchronizing app data to the user interface with very little work. Previously, we took a look at setting up your project to begin data binding and then saw it in action in an app. In this blog post, I\u2019m going to explore […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23934","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\/543"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=23934"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23934\/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=23934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=23934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=23934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}