Create Button Control With Progress Bar (Activity Indicator) In .NET MAUI / Xamarin

hello guys welcome to my channel in this video i'm going to show you demo about creating a custom button control with a progress bar so here like on the click of button it's just going to display activity indicator till the tasks you are executing here on the click of button so let me add here one folder in this project button control with progress bar so here i am just going to add new folder called custom controls and in that i am just going to add dot net mavic content view call button control here i'm just going to add now instead of continue i am just going to use frame and also in button control code behind i'm just going to inherit button control from frame and let me set background color of this frame going to be primary color and here i'm just going to use horizontal stick layout instead of vertical stick layout okay so here i just simply design like activity indicator and here button text let me just set background color of activity sorry color of activity indicator to white and i will just set by default is running to true and let's see this button control on let me add on main page and here above button i'm just going to add button control and now let me run the app so right now i didn't added any bindable property so later on i'm just going to add text property and loading tags like on the click of button like what the loading tags we want to display so that i am just going to create okay so it's looking like this now let me just set here in button control this label text color as a white and this horizontal option to center okay now here on main page like you can now align this button control like if i set here horizontal option to center then let me rerun the app so it's just going to align this button control to center like this button okay so like this you can align now let me just set here corner radius also okay now i am just going to create a bindable property for tag so let me create here so this return type will be type of string and declaring type will be type up okay now i'm just going to create a getter and factor method for this text property same way i am just going to create another property for loading tags and default text i am just going to add here as a like please wait and you can change like any default value whatever value you want now let me create another property called is in progress so here i'm just going to another create another bindable property that will be the type of bool here on property change i'm just going to create matter who is in is in progress property changed so okay so let me add here in button control this label name to lbl button tags and this like if it is is in progress then i'm just going to set control dot lbl button tags dot tax equal to this control dot loading text so i'm just going to set text from like whatever the text axis in this loading text property that i am setting here otherwise like once that is in progress become false that time i will just again reset text to control text now let me bind this all property in button control ui okay so here now button tabs i will bind from code behind so here i have created the bindable property for loading tags and tags so here now this button tags are going to become from binding source x reference to this page so here i have added x color name to this so this page by from this page binding context i'm just going to set text property and same way herein is running also i am just going to set this binding property reference to current page and that part will be in progress okay now let me just set text here and by default one button i will set this is is is in progress to true and other button i will set is in progress to false now let me run the app and let's see okay so it's drawing here accepts and let me see okay so here i did mistake uh this is in progress property going to be boolean and i just add written type to string so because of that it's throwing exception now let me just rerun the app okay so here this first button i sat as a is in progress to true here in main page so it's displaying activity indicator and that default loading tags and for second button it's only displaying tags and here let me just set minor configuration so instead of is running i will set is visible property so this space here that activity indicator occupied that will just removed and i will set here is running to always true so by that way uh yeah that's space remote now here another thing i am just going to set i just disable this frame uh once this is in progress property uh become true so by that way user cannot click on button multiple time so it's just not going to invoke command on the click of button so here i will just set frame dot trigger data trigger and the target type will be frame here binding will be this and part will be is in progress so if is in progress is true then i just set is unable to false so like user cannot click on this frame and same way another trigger i'm just going to set again like if property become false then just re-enable this frame okay now another property i am just going to create that command property so user can bind command here from this for this button control like command and another property i will create is called tap like if user click on tab or user click on command unlike user bind command so let me create that so here in button control i'm just going to create now one event that going to be called tapped and here on button control on the tab i'm just going to now invoke this event now another property i am just going to create a bindable property for command so let me just add here this property will be the type of i command and that written type also i command okay so now this command i'm just going to bind here so now i can access here tap the event as well as command on this page so let me just first i'm just going to use first this tabbed event so i'm just going to set now button1 dot is in progress to true and i just wait till like 500 millisecond and after that i will again reset to button in is in progress to false and now let me just remove default is in progress property true now let me run the app so here on the click of this button one it's just going to set is in progress property to true and when it is true that time that button is enable property become false so user cannot tap on this button again until that is in progress property become false so here on the click of this button so if you see it's displaying a progress bar until that is in progress property become false here you can set now loading tags also to like some whatever the tags you want uh one that you can set let me just read an app so you can see this reflection okay so you can set whatever the text you want same way here you can now bind command also support that like you can create a view model for this main page and in that you can create a submit button command and in here you can just need to bind like this binding and submit button command whatever and in that view model you just need to set is in progress property like this way okay so that's all for today i hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 6,566

Keywords: Button Control With Progress Bar In .NET MAUI, Button Control With Progress Bar In Xamarin, .NET MAUI, .net maui, .net maui C#, Button Control With Activity Indicator

Id: 7CafvZ17oUE

Length: 21min 0sec (1260 seconds)

Published: Sun Aug 21 2022