{"id":35538,"date":"2018-02-16T13:48:28","date_gmt":"2018-02-16T18:48:28","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=35538"},"modified":"2018-02-16T13:48:28","modified_gmt":"2018-02-16T18:48:28","slug":"extend-xamarin-forms-controls-functionality-with-behaviors","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/extend-xamarin-forms-controls-functionality-with-behaviors\/","title":{"rendered":"Extend Xamarin.Forms Controls Functionality with Behaviors"},"content":{"rendered":"

\t\t\t\tXamarin.Forms provides a way to build 100% native, cross-platform applications with both a shared logic layer and a shared user-interface layer. Built-in Xamarin.Forms controls also provide a ton of functionality out-of-the-box to create some amazing apps.<\/p>\n

That said, mobile app developers are a crazy and creative bunch, and it would be impossible for the Xamarin.Forms engineers to create APIs for the controls that covered every conceivable scenario we come up with. That’s where Xamarin.Forms Behaviors<\/a> come in!<\/p>\n

These little gems of awesomeness allow you to attach additional functionality to a Xamarin.Forms control (actually, any Xamarin.Forms View<\/code>\u00a0) without having to subclass that control or write any messy code in the code-behind page. That’s because Behaviors are written as their own classes, and stand by themselves. Not only that, you can also attach more than one Behavior to a single control!<\/p>\n

Write Your First Xamarin.Forms Behavior<\/h2>\n

Let’s take a look at how you can build a simple Behavior. This Behavior will attach a validation routine to a Picker<\/code>\u00a0control. The validation routine will change the background color of the Picker<\/code> if the currently selected item’s text is not in a preset list of valid values.<\/p>\n

The end result will look like the following (and of course it validates a favored topic\u2014beards!):<\/p>\n

\"\"<\/p>\n

Behaviors Methods<\/h3>\n

To start with, all behaviors must inherit from the Behavior<T><\/code>\u00a0class.<\/p>\n

public class SimplePickerValidator : Behavior<Picker>\n{\n    protected override void OnAttachedTo(Picker bindable)\n    {\n        base.OnAttachedTo(bindable);\n    }\n\n    protected override void OnDetachingFrom(Picker bindable)\n    {\n        base.OnDetachingFrom(bindable);\n    }\n}<\/pre>\n
There are two methods that we override here:<\/p>\n
    \n
  1. OnAttachedTo<\/code>: Gets invoked whenever the behavior is attached to the Picker<\/code>.<\/li>\n
  2. OnDetachingFrom<\/code>: Is naturally invoked when the behavior is being removed from the Picker<\/code>.<\/li>\n<\/ol>\n
    Note that a strongly typed Picker<\/code>\u00a0is passed in to both methods. This is because we inherited from Behavior<Picker><\/code>.<\/p>\n
    When implementing a behavior, you’ll generally want to handle an event that the host control emits. Inside that event handler, you’ll be able to add the additional functionality, or additional behavior, to the control. So, the OnAttachedTo<\/code>\u00a0becomes the place to subscribe to the event, while the OnDetachingFrom<\/code>\u00a0becomes the place to unsubscribe from the same event.<\/p>\n
    This SimplePickerValidator<\/code> behavior now looks like this:<\/p>\n
    public class SimplePickerValidator : Behavior<Picker>\n{\n\n    protected override void OnAttachedTo(Picker bindable)\n    {\n        bindable.SelectedIndexChanged += Bindable_SelectedIndexChanged;\n    }\n\n    protected override void OnDetachingFrom(Picker bindable)\n    {\n        bindable.SelectedIndexChanged -= Bindable_SelectedIndexChanged;\n    }\n\n    void Bindable_SelectedIndexChanged(object sender, EventArgs e)\n    {\n\n    }\n}<\/pre>\n
    Implementing<\/h3>\n
    Before implementing the Bindable_SelectedIndexChanged<\/code>\u00a0method, there needs to be a way for the calling code, like the XAML page, to specify what the correct values are for this behavior to validate against.<\/p>\n
    Bindable properties1<\/sup><\/a> to the rescue! That’s right, behaviors can contain bindable properties, just like any other Xamarin.Forms control. Add a property called ValidValues<\/code> like so:<\/p>\n
    public class SimplePickerValidator : Behavior<Picker>\n{\n    static readonly BindableProperty ValidValuesProperty =\n        BindableProperty.Create(nameof(ValidValues), typeof(string[]), typeof(PickerColorBehavior));\n\n    public string[] ValidValues\n    {\n        get => (string[])GetValue(ValidValuesProperty);\n        set => SetValue(ValidValuesProperty, value);\n    }\n\n    protected override void OnAttachedTo(Picker bindable)\n    {\n        bindable.SelectedIndexChanged += Bindable_SelectedIndexChanged;\n    }\n\n    protected override void OnDetachingFrom(Picker bindable)\n    {\n        bindable.SelectedIndexChanged -= Bindable_SelectedIndexChanged;\n    }\n\n    void Bindable_SelectedIndexChanged(object sender, EventArgs e)\n    {\n\n    }\n}<\/pre>\n
    Finally, implement the logic of Bindable_SelectedIndexChanged<\/code>:<\/p>\n
    void Bindable_SelectedIndexChanged(object sender, EventArgs e)\n{\n    \/\/ Bound and cast to a picker\n    if (!(sender is Picker bindable))\n        return;\n\n    \/\/ Make sure the picker is data bound\n    if (!(bindable.ItemDisplayBinding is Binding displayBinding))\n        return;\n\n    \/\/ Get the binding's path\n    var displayBindingPath = displayBinding.Path;\n\n    \/\/ Use reflection to get the value of the selected item of the picker\n    var selectedItem = bindable.SelectedItem.GetType().GetRuntimeProperty(displayBindingPath);\n    var selectedText = selectedItem.GetValue(bindable.SelectedItem);\n\n    \/\/ Check to see if everything is valid\n    if (ValidValues != null && ValidValues.Contains(selectedText))\n    {\n        IsValid = true;\n        bindable.BackgroundColor = Color.Default;\n    }\n    else\n    {\n        IsValid = false;\n        bindable.BackgroundColor = Color.Salmon;\n    }\n}<\/pre>\n
    Here’s what’s going on in the above event handler: because the behavior is checking to see whether the displayed value in a data-bound Picker<\/code>\u00a0is equal to a value in an array, you first need to get that value out. You can use reflection to get to the text displayed in a Picker<\/code>‘s\u00a0data binding.2<\/sup><\/a><\/p>\n
    Once the value is in selectedText<\/code>, check to see if that exists in the ValidValues<\/code> array.<\/p>\n
    Adding Behaviors<\/h3>\n
    The very last step is to add this behavior to a control. In XAML, it would look like this:<\/p>\n
    <Picker Title=\"Rate Your Beard\" \n    ItemsSource=\"{Binding BeardRatings}\" \n    SelectedItem=\"{Binding SelectedBeardRating}\" \n    ItemDisplayBinding=\"{Binding Description}\">\n\n    <Picker.Behaviors>\n        <local:PickerColorBehavior \n            ValidValues=\"{x:Static local:BehaviorsPageViewModel.ValidRatings}\" \/>\n    <\/Picker.Behaviors>\n    \n<\/Picker><\/pre>\n
    Note the <Picker.Behaviors><\/code>\u00a0property is the collection where this (and any other Behaviors) are added, and that the local<\/code>\u00a0XAML namespace was defined elsewhere.<\/p><\/blockquote>\n
    That Easy!<\/h2>\n
    With that, you now have a reusable behavior that can be set up to validate whether a selected item is in a preset array. Check out the full working solution in GitHub<\/a> that demonstrates this behavior, as well as another behavior that adds a command to an Entry<\/code> control to be fired every time the text changes.<\/p>\n
    Behaviors can also add commands to controls that don’t already have them. Imagine having a command for the ListView.ItemSelected<\/code>\u00a0event; a behavior can do that<\/a>! More information about creating these types of Behaviors can be found in the documentation<\/a>. For even more info, check out the episode of the Xamarin Show<\/a> where James Montemagno and Matt go over the ins and outs of behaviors.<\/p>\n
    The Xamarin community has contributed several behaviors to an open source project called The Xamarin Community Toolkit<\/a>. Head there to see even more examples of how behaviors are built, reuse some of the ones there, and contribute your own!<\/p>\n
    Behaviors allow developers to attach additional functionality to Xamarin.Forms Views<\/code>, without the need to subclass the View<\/code>\u00a0or mess with the code-behind, and to add more than a single behavior to a View<\/code>. By making your behavior standalone, you can reuse them across all of your applications!<\/p>\n
    1<\/sup>If you’re using a Behavior in a Xamarin.Forms style, do not use Bindable Properties. Here a <BindableObject, StateInstance><\/code> is a better choice.\n2<\/sup>An assumption that the binding is of a type Binding<\/code> is being made here, and that there are not indexers in the binding path, for convenience.<\/p>\n
    Discuss this post on the forums!<\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
    Xamarin.Forms provides a way to build 100% native, cross-platform applications with both a shared logic layer and a shared user-interface layer. Built-in Xamarin.Forms controls also provide a ton of functionality out-of-the-box to create some amazing apps. That said, mobile app developers are a crazy and creative bunch, and it would be impossible for the Xamarin.Forms […]<\/p>\n","protected":false},"author":569,"featured_media":35631,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[16],"class_list":["post-35538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
    Xamarin.Forms provides a way to build 100% native, cross-platform applications with both a shared logic layer and a shared user-interface layer. Built-in Xamarin.Forms controls also provide a ton of functionality out-of-the-box to create some amazing apps. That said, mobile app developers are a crazy and creative bunch, and it would be impossible for the Xamarin.Forms […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/35538","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\/569"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=35538"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/35538\/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=35538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=35538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=35538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}