{"id":17019,"date":"2015-02-25T12:56:57","date_gmt":"2015-02-25T17:56:57","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=17019"},"modified":"2015-02-25T12:56:57","modified_gmt":"2015-02-25T17:56:57","slug":"triggers-in-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/triggers-in-xamarin-forms\/","title":{"rendered":"Triggers in Xamarin.Forms"},"content":{"rendered":"<p>\t\t\t\tTriggers were introduced in Xamarin.Forms 1.3 along with <a href=\"\/behaviors-in-xamarin.forms\/\">Behaviors, which we covered previously<\/a>. Triggers allow you to declaratively express actions in XAML that are executed when a specified condition is met. Xamarin.Forms support four types of triggers:<\/p>\n<ul>\n<li><strong>Property Trigger<\/strong> &#8211; executed when a property on a control is set to a particular value.<\/li>\n<li><strong>Data Trigger<\/strong> &#8211; same as the property trigger but uses data binding.<\/li>\n<li><strong>Event Trigger<\/strong> &#8211; occurs when an event occurs on the control.<\/li>\n<li><strong>Multi Trigger<\/strong> &#8211; allows multiple trigger conditions to be set before an action occurs.<\/li>\n<\/ul>\n<p>Let\u2019s take a look at each one in detail.<\/p>\n<h3>Property Trigger<\/h3>\n<p>Property Triggers (represented by the <code>Trigger<\/code> element) are added to a control\u2019s <code>Triggers<\/code> collection. The <code>Setter<\/code> collection inside is executed when a specified property equals the specified value. <\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-17029\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/PropertyTrigger1.gif\" alt=\"PropertyTrigger\" width=\"354\" height=\"360\" border=\"1\" \/><\/p>\n<p>Wouldn\u2019t it be nice to provide some visual indicator that an input control has focus? To achieve this, we can set the <code>BackgroundColor<\/code> property when the property <code>IsFocused<\/code> of the <code>Entry<\/code> element is true.<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;Entry Placeholder=&quot;enter name&quot;&gt;\n    &lt;Entry.Triggers&gt;\n        &lt;Trigger TargetType=&quot;Entry&quot;\n             Property=&quot;IsFocused&quot; Value=&quot;True&quot;&gt;\n            &lt;Setter \n                Property=&quot;BackgroundColor&quot;\n                Value=&quot;Yellow&quot; \/&gt;\n        &lt;\/Trigger&gt;\n    &lt;\/Entry.Triggers&gt;\n&lt;\/Entry&gt;\n<\/pre>\n<p>Alternatively, we can set them in styles so that they can be attached to every <code>Entry<\/code> element in the screen.<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;ContentPage.Resources&gt;\n   &lt;ResourceDictionary&gt;\n     &lt;Style TargetType=&quot;Entry&quot;&gt;\n       &lt;Setter Property=&quot;AnchorX&quot; Value=&quot;0&quot; \/&gt;\n       &lt;Style.Triggers&gt;\n         &lt;Trigger  TargetType=&quot;Entry&quot;\n                   Property=&quot;IsFocused&quot; \n                   Value=&quot;True&quot;&gt;\n           &lt;Setter Property=&quot;BackgroundColor&quot; \n                   Value=&quot;Yellow&quot; \/&gt;\n         &lt;\/Trigger&gt;\n       &lt;\/Style.Triggers&gt;\n     &lt;\/Style&gt;    \n   &lt;\/ResourceDictionary&gt;\n&lt;\/ContentPage.Resources&gt;\n<\/pre>\n<h3>Data Trigger<\/h3>\n<p>DataTriggers are very similar to PropertyTriggers, except that instead of specifying the <code>Property<\/code>, we specify the <code>Binding<\/code> for the trigger. This <b>Binding<\/b> generally refers to another <code>VisualElement<\/code>\u2019s property on the page or it could reference a property in a ViewModel. <\/p>\n<p>The code below shows how to disable the button when the entry\u2019s <code>Text.Length<\/code> property is <code>0<\/code>.<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;StackLayout Spacing=&quot;20&quot;&gt;\n&lt;Entry x:Name=&quot;emailAddress&quot; Text=&quot;&quot; Placeholder=&quot;email address&quot;\/&gt;\n&lt;Button Text=&quot;Send&quot;&gt;\n  &lt;Button.Triggers&gt;\n    &lt;DataTrigger TargetType=&quot;Button&quot;\n         Binding=&quot;{Binding Source={x:Reference emailAddress},\n                                           Path=Text.Length}&quot;\n         Value=&quot;0&quot;&gt;\n      &lt;Setter Property=&quot;IsEnabled&quot; Value=&quot;False&quot; \/&gt;\n    &lt;\/DataTrigger&gt;\n  &lt;\/Button.Triggers&gt;\n&lt;\/Button&gt;\n&lt;\/StackLayout&gt;\n<\/pre>\n<h3>Event Trigger<\/h3>\n<p>Event Triggers execute user-defined code when a specified event occurs.<\/p>\n<p>In the above Property Trigger example, we saw how to change the background color of an <code>Entry<\/code> element based on the <code>IsFocused<\/code> property entirely in XAML. Alternatively, we can use an Event Trigger to execute an action written in C# based on the <code>TextChanged<\/code> event of an entry to perform some basic validation.<\/p>\n<p><strong>Define the TriggerAction in code<\/strong><\/p>\n<p>Every action that we define has to inherit from <code>TriggerAction&lt;T&gt;<\/code>\u00a0where <code>T<\/code> is the element to which a trigger is attached. When a trigger is fired, the <code>Invoke<\/code> method will be called. In the code below, we change the <code>Entry<\/code>\u2019s <code>BackgroundColor<\/code> to indicate whether the input is valid or not.<\/p>\n<pre class=\"lang:csharp decode:true\">\npublic class NumericValidationTriggerAction : TriggerAction&lt;Entry&gt; \n{\n   protected override void Invoke (Entry entry)\n   {\n      double result;\n      bool isValid = Double.TryParse (entry.Text, out result);\n      entry.BackgroundColor = \n            isValid ? Color.Default : Color.Red;\n   }\n}\n<\/pre>\n<p><strong>TriggerAction in XAML<\/strong><\/p>\n<p>To use the C# code, just declare a namespace for the assembly (<code>xmlns:local<\/code> in this sample) and add the <code>NumericValidationTriggerAction<\/code> element to the event trigger:<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;Style TargetType=&quot;Entry&quot;&gt;\n&lt;Style.Triggers&gt;\n    &lt;EventTrigger Event=&quot;TextChanged&quot;&gt;\n        &lt;local:NumericValidationTriggerAction \/&gt;\n    &lt;\/EventTrigger&gt;\n&lt;\/Style.Triggers&gt;\n&lt;\/Style&gt;\n<\/pre>\n<h3>Multi Trigger<\/h3>\n<p>A MultiTrigger looks similar to a <code>Trigger<\/code> or <code>DataTrigger<\/code> except there can be more than one condition. All the conditions must be <code>true<\/code> before the <code>Setters<\/code> are triggered. <\/p>\n<p>In the code below, we enable the button when either the <code>email<\/code> or the <code>phone<\/code> entries are filled in by the user. Each condition is <code>true<\/code> when the length of the text input is zero (ie. nothing has been entered). When <i>both<\/i> conditions are true (ie. both are empty) then the trigger&#8217;s <code>Setter<\/code>s are called, which in this case disables the button. When either have text entered, the overall condition becomes <code>false<\/code> and the button is enabled.<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;Style TargetType=&quot;Button&quot;&gt;\n&lt;Style.Triggers&gt;\n  &lt;MultiTrigger TargetType=&quot;Button&quot;&gt;\n    &lt;MultiTrigger.Conditions&gt;\n      &lt;BindingCondition \n          Binding=&quot;{Binding Source={x:Reference email},\n                            Path=Text.Length}&quot;\n          Value=&quot;0&quot; \/&gt;\n      &lt;BindingCondition \n          Binding=&quot;{Binding Source={x:Reference phone},\n                            Path=Text.Length}&quot;\n          Value=&quot;0&quot; \/&gt;\n    &lt;\/MultiTrigger.Conditions&gt;\n\n    &lt;Setter Property=&quot;IsEnabled&quot; Value=&quot;False&quot; \/&gt;\n  &lt;\/MultiTrigger&gt;\n&lt;\/Style.Triggers&gt;\n&lt;\/Style&gt;\n<\/pre>\n<p>To see how to build a &#8220;require all&#8221; trigger (like you&#8217;d use in a login page, for example) check out our <a href=\"https:\/\/github.com\/xamarin\/xamarin-forms-samples\/blob\/master\/WorkingWithTriggers\/WorkingWithTriggers\/MultiTriggerXaml.xaml#L62-L91\">Triggers sample on GitHub<\/a> that uses an <code>IValueConverter<\/code> along with a <code>MultiTrigger<\/code>.<\/p>\n<p>For even more information on Xamarin.Forms, be sure to check out the <a href=\"http:\/\/developer.xamarin.com\/guides\/cross-platform\/xamarin-forms\/\" title=\"Xamarin.Forms Documentation\">detailed documentation<\/a>.<\/p>\n<p><a href=\"http:\/\/forums.xamarin.com\/discussion\/33900\"><em>Discuss this post in the Xamarin forums<\/em><\/a>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Triggers were introduced in Xamarin.Forms 1.3 along with Behaviors, which we covered previously. Triggers allow you to declaratively express actions in XAML that are executed when a specified condition is met. Xamarin.Forms support four types of triggers: Property Trigger &#8211; executed when a property on a control is set to a particular value. Data Trigger [&hellip;]<\/p>\n","protected":false},"author":547,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-17019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Triggers were introduced in Xamarin.Forms 1.3 along with Behaviors, which we covered previously. Triggers allow you to declaratively express actions in XAML that are executed when a specified condition is met. Xamarin.Forms support four types of triggers: Property Trigger &#8211; executed when a property on a control is set to a particular value. Data Trigger [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17019","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\/547"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=17019"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17019\/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=17019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=17019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=17019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}