Triggers in Xamarin.Forms | Property Triggers | Event Triggers | Data Triggers | Multi Triggers

[Music] triggers in the last video we have understood about the mvbm architecture and in this video let us understand the concept of triggers sometimes we think that we need to handle some task using the business logic or the code present in the view model or code behind for example let us say that i would like to display a label with an error message if the user doesn't provide the value for the user name then we can handle that in many different ways for example we can handle this requirement within the text changed event of the entry control if the value is empty then we can show the label else we can hide the label by setting the is visible property of the label the other way of doing that will be we can define a property at the view model for example is visible and set the property with true if the value of the username is empty it will set the property value as false and then data bind the property with the label control but remember that we have more efficient way for handling these kind of requirements in xamarin forms with the support of triggers so what is a trigger in simple terms we can say triggers allows us to express actions declaratively in xaml that changes the appearance of controls based on properties or events xamarin forms supports four types of triggers property triggers event triggers data triggers and multi triggers now let us start with property triggers property triggers are used whenever we wanted to change a property of the control according to a specific value of another control in order to define the triggers the following details are required target type it is used to specify the control type that the trigger applies to property we need to specify the property to be used for monitoring value specify the value that causes the trigger to activate while monitoring the specified property setter we can use a collection of setter elements that should be applied when the trigger condition is valid for example let us understand with a simple code i have taken the liberty to create a new xamarin forms empty project and also updated the new git packages to have the latest version of xamarin forms now let me add a new content page and let me provide the name as triggers demo let me quickly format the screen and also close the solution explorer for more room space now let me use the magic of video and create the ui for some simple registration form you can observe that i have created some entry controls for accepting the username password age email and for the confirmation we have a checkbox and two buttons one to register and the other one is to clear the user input and let me use once again the magic of video and let me add the style for the button you can observe i have set the background color text color width and corner radius now let me set the main page as the triggers demo and before execution let me update the title for the content page as registration form and let me execute the page we can observe a simple registration form is displayed now let us get into our requirement that is to understand the property trigger remember that property trigger can be defined on the individual ui element or it can also be defined on the style so in this module i will explain both now to start let me define the property trigger for the styles so let me type in style target type equal to entry setter property equal to background color value equal to light skype loop this property will be implicitly applied by default for all the entry controls now in order to define the property trigger for the style we need to type in style dot triggers let me add a comment property triggers to define the trigger let me add a comment property triggers and to define the triggers we need to use the trigger element target type equal to entry property is is focused value equal to true if this is valid then we can set the properties as per our requirement so let me type in setter property equal to background color value equal to some color and let me set the font size also so let me type in setter property equal to font size value equal to large now let us execute the application we can observe that whenever the entry control gets the focus the background color of the entry control is getting changed and also the size of the entry control is changing hope you have understood what is property trigger next the most widely used trigger that is even triggered remember that even triggers are activated whenever an event of the control occurs for example if you want to change a property when the button is clicked using the clicked event or the text is changed using the text change event etc now remember that in order to handle this event trigger we have to create a subclass for the trigger action of d and the subclass has to provide the implementation for the invoke method by specifying the functionality to be executed whenever the relevant event occurs now let us understand this concept using simple code now for understanding the even triggers let me first create a folder with the name triggers and now let me right click on the triggers folder and create a new class with the name age verification trigger let me remove the constructor and we know that in order to consider a class definition as a trigger then it has to provide the implementation for trigger action right so let me type in colon trigger action of entry and let us override the definition for the abstract method invoke and my requirement is if the user provides any invalid input other than a valid age and if the age group is not in between 18 to 80 then i would like to change the entry control background to rate so that the user can understand something has gone wrong in the input so let me type in where entry equal to sender as entry where flag equal to into dot triparts of entry dot text comma out into h and finally entry dot background color equal to not flag or h is less than 18 or ages greater than 80 question mark color dot red else color dot default now we have defined the trigger action next we need to apply this as our event trigger so let me open our content to page and then let me define the xml namespace for the triggers so let me type in xml namespace colon triggers equal to let me select the triggers namespace next let me scroll down and update the entry control of the h to define the event trigger for the entry control we need to type in entry dot triggers and let me type in the command event triggers and then in order to define the event trigger we need to type in event trigger event equal to text changed and then there we need to specify the trigger action so let me type in triggers colon age verification trigger now let me execute this application and let me try to type in some character we can observe an error and let me provide a value greater than 100 we can observe once again an error and let me provide a valid value we can observe there is no error hope you have understood what is event weaker next we have is data trigger so let us understand that these triggers use data binding to monitor another control to cause the setters to get called instead of the property attribute in a property trigger can't understand the bookish statement right no problem let me make it simple whenever we have a requirement such that based on the data of one control you need to set the property of another control then we can take the support of data triggered for example when you are creating a register view whenever the user clicks on i agree checkbox then only i would like to enable the register button else i would like to disable the register button till i agree so for this kind of requirement we can take the support of data triggers now let us understand this triggers using simple code for understanding the data triggered let me update the pattern code so let me add a new property is enabled equal to false and then in order to define the triggers for the button we need to type in button dot triggers and let me add a command data triggers now my requirement is whenever the user checks the i agree check box then only i would like to enable the register button else i would like to disable the register button okay for that requirement let me type in data trigger target type equal to button binding equal to binding source equal to x colon reference and our source control is the check checkbox right so let me type in the name of the checkbox checkbox agree and the path is is checked and value equal to true let us set the setter so let me type when setter property equal to is enable value equal to true now let me execute the application we can observe the button has been disabled now let me check the i agree check box we can observe the button is disabled but if you observe the button when it is disabled the text is not displayed properly so let us fix that with the support of property trigger for the button so let me type in a command property trigger and let me type in trigger target type equal to button property equal to is enable value equal to false then let me use the setter property background color value equal to light green and then setter once again to set the text color as black now let me execute the application we can observe when the button is disabled we can see the button is in gray background and when i click on the i agree check box oops the default styling has been overridden okay let us fix that also within the data trigger let me add some additional setters to set the background color and the text color done so now if the button is disabled the background color will be light green and if the button is enabled the background color should be in purple now let me execute the application we can observe now our application is behaving as expected right hope you have understood data triggers finally let us understand multi triggers these triggers looks very much similar to that of data triggers but the difference is that data trigger will use a single condition whereas for multi trigger there can be any number of conditions but remember one important point all the conditions must be true before the setters are triggered now let us understand this concept with a simple demo let me first explain my requirement before i start with the demo if and only if the user provides the values for the username password h and check the i agree check box i would like to enable the button else i would like to disable the register button so the first thing i would like to do is to create a converter and in the later part of this module i will explain in detail about the main usage of converters now let me first create the folder with the name converters and let me right click on the folder and create a new class file with the name into boolean converter and in order to consider this class definition as a converter we need to inherit i value converter class so let me remove the constructor and let me type and colon i value converter and let me resolve the namespace issue and then let me provide the implementation for the i value converter class now for both the methods let me remove the throw statement and within the convert method let me type and written into value greater than zero now whenever the length of the value is greater than 0 for the entry control then the convert method returns true else the method returns false and within the convert pack method we don't require any implementation so let me type and written null next let me open the content page and in order to use this converter we need to add the xml namespace reference so let me type in xml namespace colon converters equal to let me select the converter's namespace and then within the resources we need to define the instance for the converter class so let me type in converters into two boolean converter x colon key equal to into two boolean converter now let me scroll down and let me comment the data trigger code and let us now define the multi trigger so let me type in multi trigger target type equal to button and here we can provide any number of conditions so to define the conditions we need to type in multi trigger dot conditions and let me define our first condition so let me type in binding condition binding equal to binding source equal to x colon reference entry name comma path equal to text dot length converter equal to static resource into two boolean converter and the value should be equal to true now let me copy this condition and paste the code let me update the binding source to entry password and entry age and along with this we have a requirement such that if and only if the user checks the i agree check box along with the above entry controls the register button should be enabled right so let me type in binding condition binding equal to binding source equal to x colon reference checkbox agree path equal to is checked value equal to true now after the conditions we need to provide the setters so let me type in setter property equal to is enable value equal to true next in order to support the converter property let us add the text attribute for the entry control so let me update the entry control with the text equal to empty string and to provide a proper headings for the control let me add some labels above the entry control so let me use the magic of video to perform this task done now let me execute the application let me provide the values for the username password and the age and also let me check the i agree check box we can observe the button is enabled but the styles has been overridden no issues let us fix that let me copy the background and text color and paste to the button setters once again let me execute the application and this time we can observe everything is working as expected i hope you have understood the concept of triggers next let us understand how to use behaviors and also if possible let me know what type of trigger i have used in this course as per the requirement of our application when you encounter with this concept in our course

Channel: sekhar srinivas

Views: 2,710

Keywords: Triggers in Xamarin.Forms, Xamarin.Forms Triggers, Property Triggers in Xamarin.Forms, Event Triggers in Xamarin.Forms, Data Triggers in Xamarin.Forms, Multi Triggers in Xamarin.Forms, property triggers, event triggers, data triggers, multi tirggers, food ordering app xamarin, building food ordering app using xamarin.forms

Id: bXLWfcHhW80

Length: 19min 22sec (1162 seconds)

Published: Fri Jan 01 2021