Creating Custom Controls In .NET MAUI / Xamarin (Custom Loader Control)

hello guys welcome to my channel in this video i am going to show demo about creating custom loader control using net mavi application so here i just created the new dotted mavi project so let me add loader control so before adding loader control so i am just going to create loader control like this like in loader control there was one activity indicator and one label [Applause] [Applause] so let me relearn the app okay so if you see here loader is running and here one text is displaying so on each and every page like we need to like to display loader we need to modify and we need to rewrite this code every time so i am just going to create a custom control that has activity indicator and the label so let's create the custom control for loading so here i am just going to add one custom controls folder and in that i will add content view of dotnet mavi [Applause] okay so i'm just going to use text layout and here in code behind also i will set base class as a state layout [Applause] so first here i'm just going to use activity indicator and this activity indicator color property so that i will create a bindable property and i will bind it from the code behind so here activity indicator and another property label so the label tags also i will add [Applause] from the bindable property [Applause] [Applause] okay so here in code behind loadercontrol.gml.cs i am just going to create first activity indicator related bindable property [Applause] so for creating bindable property you can use bindable property and the property name so first i'm just going to use here activity indicator color so for that i am just going to create in the cater color property so bindableproperty.create so here you need to specify property name return type declaring type and the default value so let's add one by one so property name will be so i'm just going to create one property of color type just let me [Applause] and this will be this indicator property name will become here [Applause] so that bindable property name will be this one indicator color so that i can access wherever i want to use it another property is written type so this property we created indica indicator color is the type of color so here i'm just going to specify this property is the type of color and that default value i'm just going to set right now default as a color dot light blue [Applause] and the binding mode i am just going to set as a one-way [Applause] [Applause] [Applause] okay so here i am just missing declaring type so this will be the type of loader control okay so now this indicator color property is ready so this property i am just going to use here in loader control so color is equal to here i will set [Applause] this reference like this activity indicator reference to stick layout class i'm in loader control class and that so let me set binding source will be this loader control and that part will be the this one indicator color [Applause] okay now similarly i am just going to create another property [Applause] loader tags [Applause] okay let me rename it to loading tags and this will be the type of string because we are going to bind this loading text to label and this return type will be string and default value i am just going to set as a please wait [Applause] okay now this loading text i'm just going to bind it here [Applause] okay now let's add this loader control on main page so this is like i added stake layout activity indicator so i'm just going to remove this now instead of this i'm just going to use this loader control so let me access so i'm just i'm just going to add namespace query [Applause] okay here i can now specify loading text so default text we added as a here please wait so right now i'm not going to add any tags and any activity indicator color now let's run the application and let's see like by default it's going to display please wait tax and color will be light blue okay so now activity indicator color is right now light blue and default x is please wait now let me add another loader control with custom tags so here i'm just going to add loading tags as a loading and indicator color will be the red okay so if you see here that indicator color is changed and for loading tags i think i need to re-run the application so let me re-run so we will see this loading tags okay so here loading tags property is not changing so let me see here okay so here i did mistake i i am just setting here loading text property as a indicated color that's why it's not changing so let me just set it as a loading text now let me rerun the app so now it should work okay so now it's displaying loading tags like whatever the text we specify here in loading control so now let me add another control [Applause] [Applause] so i'm just going to remove this label and all okay so now it's displaying this loading control using like uh creating tags and indicator color whatever the color we specify now let me create another property like a loading text uh like that i am just going to create loading text color property like if user want to customize color also so for that here in loadercontrol.jaml.cs i am just going to create another property called loadingtextcolorproperty and that written type will be a type of color so here also i am just going to set return type as a color [Applause] and this property name will be a loading text color [Applause] so default color i am just going to set as a i think i'm just so okay i i will just set default color to black and whatever the [Applause] color you just specify that will reflect here so let me just set here loading text color to [Applause] create and for this property green okay now this loading text color property i need to bind in ui right now i just created in code behind so let me bind it to here loading control so for that here text color will be from this loader control and part will be the this loading text color okay now let me run the application okay so now it's displaying default color black and here for second loader control i have set as a loading text color to red so it's displaying in red color okay now let me try to change orientation to like horizontal for this property and this one okay now let me rerun the app and let's see like that this loader control displaying in horizontal format okay so now if you see here it's displaying in horizontal also let me set just [Applause] vertical text alignment [Applause] ok now let me design the app okay so now it's displaying loading tags in horizontal format as well as vertical format okay so that's all for today i hope you like this video

Channel: Programming With Pragnesh

Views: 5,047

Keywords: .NET MAUI, MAUI, Custom Controls In .NET MAUI, Customize Controls In .NET MAUI, Custom Loader Control In .NET MAUI, Loader Control, Customize UI, Custom Loader Control, Custom Activity Indicator Using .NET MAUI, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: mgHbOGXuj0Y

Length: 17min 48sec (1068 seconds)

Published: Sun Jul 17 2022