How To Create Custom Picker Control (Dropdown Button) In .NET MAUI

[Music] foreign [Music] hello guys welcome to my channel in this video I am going to show you demo about creating custom picker control in.net mavi application so here I just created a new project called custom picker control now let me add here new folder custom controls so in that I am just going to design drop down button so let me add here continue called drop down button okay and here to set this drop down button as a frame so in code behind I am just going to inherit from trim now here I am just going to design layout for drop down button right now I'm just setting here dummy value later on we will add this data from bindable property foreign okay now this drop down button I can access on any page so let me just add your name space okay so here on main page I'm just going to Now display this drop down button from the custom called custom controls folder now let me run the application so we can see now this static layout that I have designed on a main page okay so here now it's displaying I just select item now let me just set here border color and okay so now it's uh looking good now here I'm just going to add now cream gesture recognizer and on the tap of this Frame I'm just going to display some data in pop-up so for that now let me add one plugin so just right click on your project click on manage new get packages and search for plugin.mavi.popup and install that plugin in your project okay now here another custom control I'm just going to add as a DOT net mavic content page and that name will be I'm just going to add as a picker control picker control View okay now this speaker control view is going to use instead of content page arms is going to use this pop-up page so that that I'm just going to fetch from mavi.plugging.mavi.popup so let me add that namespace so from this Mario pop-up plugin I'm just going to use base pop-up page okay now here on the click of this tab gesture of drop down button now I can just display s like this dot display pop-up in that I I just need to specify bigger control View and that is a going to display containing pop-up okay now let me run the application and let's see so on the click of drop down button it just is going to display this speaker content View foreign containing copper page okay now I'm just going to add here collection view in this picker control view so whatever the data are we going to bind to this drop down button that I am just going to display here in this pickle container okay now let me replace this vertical State layout with a collection View okay now here in a code behind of a bigger control uh picker control view I'm just going to access now item source then the item template the technical control file so this I am just going to set here in a collection View so collection view dot item source is equal to whatever the item Source I will pass from this drop down button from here that I am I'm going to access here in a picker control View same way I'm just going to set item template and the height request of this collection here okay now let me create here bindable property in drop down button.chamel.cs because I need to pass here now item Source item template and the height request so let me create here properties for that okay so here property name I'm just going to set as a item source then that written type will be the type of paper enumable then declaring type will be the type of our current class so that going to be drop down button okay now let me create cater and Setter property for this item source okay now this item Source property I am going to pass here in a pickle control view now let me create another property template that I am going to pass here and this speaker highest request also I am going to pass okay so now this tree property I have created in drop down button I can access here in a main page so I can set now item source then item template and the Picker type request okay so here in the main page code behind I am just going to pass some dummy data in item Source property so let me just create one folder called model and in here I'm just going to create one class okay so here I'm just going to use only one property right now that title then let's let me add another property that I will add some dummy record later on okay so here now in a main page okay so here in a drop down control item Source I am just setting uh whatever the items I have added here and four item template either you can set item template if you design any item tablet then you can set from here also or you can directly specify item template here in UI so let me just add in UI okay so so this title property I'm just going to access for displaying purpose now let me run the application okay now here on the click of her drop down button it's just going to display data in pop-up okay so it's displaying like this let me just said that bigger height decrease let me read in the application I I forgot to set here bigger high frequency so due to that by default it take as a zero so it's not displaying data so later on I am just going to set here some default speaker control height request so when the user not pass any height request it is going to set default height request okay so now it's a displaying all item here in picker now let me just set vertical option of this uh speaker control View okay and and it's fine so we're just going to display here at the end of screen and also now you can just format the layout from this data template so you can add like reading and font size or whatever the changes you do that is going to reflect here in base UI okay now I'm just going to select item from this picker control View and going to bind here in a drop down button label so for that let me add here selects and change event in the selection mode okay so here what is the item is selected that I'm just going to get from this collection view current selection dot question default and that I'm just going to pass here in a drop down button so when I call this pop-up action dot display pop-up is uh going to wait like if any value is going to return from this pop-up control that I can access here so now I just need to do is pop-up action.close popup and in that whatever the item I selected that I am just going to pass so now I can access item here and another thing I need to do I need to do is what type of value this display pop-up is returning so right now like we don't know which type of value because we are accessing as a i enumerable item source so we don't know so right now I'm just returning as an object format so that value we will get here now let me run the application and let's see it's a returning value on the selection of item or not okay so here on the selection of any item so it's a returning response in object format title and value okay now another thing like we don't know uh from this item source which item we need to display like which field value we need to display here in our selection so for that let me create another property in a drop down button called display member so in that whatever the property name I passed that I'm just going to fetch that value I am going to display here in drop down button label okay so here in the main page like we have title and value property so I want to display Title Here in a drop down so now I can specify display member as a title so from the item Source I want to display title in a selected item here in a drop down button okay now to get value uh using display member for that I need to use a reflection so let me add that code okay so from this object I'm just going to get property that will be the display member that will and if any value is not available then it's just going to return null okay now let me run the application okay so now whatever the value I select that just is going to display here in picker control okay now let me add another condition like if a display member name is not empty then only I am just going to fetch a value from this response using display member and also let me set here height requires of speaker control view by default I am setting as a 200 okay now in some cases like when I click here in a drop down button we need to wait till some like we need to wait till some data hatched from API so for that let me just create some property like this pop-up is not going to display until some data is loaded from the API after that this pop-up is going to display okay so for that I am just going to create bindable property for like a first I'm just going to create is loading property to show loader like some of data is loading from API so this property is going to be type of Boolean okay now this I'm just going to bind here so let me add here activity indicator so from the current Uh current please like drop down button class reference I'm just going to hatch is loading property here so based on that it's just going to display Bluetooth now another property I'm just going to create is open picker command like when I click on picker control that time first it will set this is loading property to true until the data fetch from API and after that it is going to set this is loading property to false so let me create Now command okay so this open clicker command is the type of I command okay now let me create event also like uh give sum of user not using a view model concept that time they can use event to display data foreign like if a display member name is not empty then only I am just going to fetch a value from this response using display number and also let me set here height request of speaker control view by default I am setting as a 200 okay now in some cases like when I click here in a drop down button we need to wait till some like we need to wait till some data hatched from API so for that let me just create some property like this pop-up is not going to display until some data is loaded from the API after that this pop-up is going to display okay so for that I am just going to create bindable property for like a first I'm just going to create is loading property to show loader like some of data is loading from API so this property is going to be type of Boolean okay now this I'm just going to bind here so let me add here activity indicator okay so from the current Uh current page like drop down button class reference I'm just going to hatch is loading property here so based on that it's just going to display Bluetooth now another property I'm just going to create is open picker command like when I click on picker control that time first it will set this is loading property to true until the data fetch from API and after that it is going to set this is loading property to false so let me create Now command okay so this command is going to be type of I command okay now also I am just going to create one event okay so if the user using view model then they can use this open picker command and if they are not using viewmodel concept then they can use directly open picker event so now here in a drop down button wherever you use this drop down button then you can specify either open pickle command or open picker event so let me just use open pickle event and also here now you can set is loading property so here in a drop down open picker event I can set foreign and once the data heads from API then I will set this uh his loading property to files so for temporary I'm just going to set something like this it's just gonna be delayed for one second and then it's just going to set is loading to false now let me run the application so now we will see this loader running on a drop down button okay sorry here I forgot to set here in a drop down tab just a recognizer first I need to bind this command so on the click of drop down button I need to invoke this open picker command and that open picker event so let me just set if open speaker command is available then on the screen to execute that otherwise if any event is registered then that rewind at that event I am just going to invoke okay so now it's just uh going to display loader okay so here on the click of this drop down button it's just displaying uh this activity indicator because we said here is loading to true and it's just gonna wait for one second so here you can call Api and once the API response is available that then you can just display the Picker control so for that uh displaying picker control view I need to create another bindable property like is the display picker control so let me just copy this command property and I'm just going to create another property call is display is display picker control okay so that going to be type of Boolean so when it is true that time I just display quicker control view so let me just Implement property change event so here I'm just going to create one method is display picker control property changed so here I will check like if the new value is not null then I will just check thank you if this property is display picker control is true that time I just going to display now this equal control View so now here I cannot access directly this item Source item template picker hide request and display member all property so for that I need to use this so from the bindable object I converted that to drop down button now I can access property that available like controls dot item Source then controls dot item template okay so when this is display picker control property become true that time it is going to open the pop-up control and in that it just display list of item after that again I will set this is display picker control to false to like when I again user click on that drop down button that time we need to display again this uh picker control View now let me run the application so now on the click of drop down button it's just going to wait for one second and after that okay so here now I need to inform to drop down control like is display speaker control to true so when I set this as a true then it is going to display the pop-up okay so now it's just waiting for uh response from API and after that it is just displaying pop-up so like that you can do here you can uh on main page here you can call any API and once the response from API is available then you can set that to here in a drop down control item Source right now I just set already I'm just showing that so you can add that let let me adjust this code here so just assume this is calling API and after that it's just setting that data into item source and it's just setting is display picker control to true okay so now it is gonna display and here whatever the item you select it's just going to display in this drop down button now here like we need to access like whatever the item is selecting in this drop down so for that I need to create an another property called selected item so whatever the item is selected that I am just going to bind in one bindable property so let me create that prop uh property here is going to set property name as a current item property so whatever the item is selected that's just going to bind here foreign data is bind to collection view so for that purpose I am just setting as object here I am just setting binding mode to two ways so either user can set a current item directly from like a directly from the view model or whenever the user select any item from here so that time also is just going to reflect here so for that purpose I'm here it's just a default binding mode I set as a tool now here on property change I'm just going to create current item property change method okay foreign then whatever the code I have added here on this speaker is display picker control property change that code I am just going to now uh I just are going to remove from here and that I am just going to set here and here on the drop down close I'll just set now current proper current item is equal to whatever the response we select from this pop-up control okay so now I can access access this current item property okay now let me create another property for placeholder like if you just want to display any text here as a placeholder right now I'm just displaying uh this static text select item so for that I'm just going to create another property for placeholder okay so this property is going to be type of string okay now here I will check like if the current item foreign item is available then we display current item tags here in this label if there is no text available then we just going to display whatever the tags that we pass here in a placeholder property so that I am just going to display here okay so now I can access this current item property as well as a placeholder property here in this drop down control that I added here in main page so now I can set placeholder like this okay so when I run the application that time now it are going to display select item in this format on this drop down button okay so now it's displaying as a select item here in drop down and when I select any item that this is going to now replace with this current drop uh this drop down label now let me just set if user set like when application open that page open that time user want to set some default item then user can set something like that drop down DOT current item is equal to and this is going to set from this list so when the application launched that time in a drop down control it is going to display this title 7 as a drop down tax okay sorry I need to set this here on main page initialization because this only invoke when I click on here drop down open picker event so when I select and if you see this title 7 is set so I need to set here some item like this directly in the application that damage is going to display Title 1 here in drop down button okay so now it's displaying title one here as a default item okay now let me show you like this all like I binded this item source and everything I did using Code behind now let me achieve same functionality using view model so for that I'm just going to add one plugin first it is community toolkit.mvbm so easily I can create a bindable property uh sorry I notify property I can easily Define okay so I am just going to create main page view model here okay so here on main page on open picker event I am just binding this all data so let me now add same thing here in a view model so for that I am just going to create observable collection of title value okay and this I'm just going to set here in item source okay and same way I have here I have defined open picker event same way I can Define here open picker command so let me just create one command here okay so this command is going to execute when I click here on this drop down so let me just remove this open picker event as we not needed is okay so here now I just going to add some items title and value I'm just going to write here in this item source okay and here let me add another observable property so here I will set is loading to true and wait till API response is written so if you call any API here then just wait till the response game then I add that data in observable collection and after that again say this is loading property to false now to display picker we created one property here in a drop down button is display picker control like that so for that let me create another bind uh observable property is displayed bigger so that once the data response came from API then I will set is display picker to true okay now let me bind this all here is loading with equal to binding is loading so this property is going to now bind from Main phase view model same way is display picker control is equal to this is displayed picker property okay now let me run the application okay so here on the click of this it just uh displaying data and on the second time it's uh not displaying pop-up that due to this is display picker control property is not become false so let me just see here okay so this default binding mode I set as a one range so let me just start as a two way because uh once the response like once the pop-up is closed we are setting this is display picker to false but uh is not reflecting here on main page view model so that reason I set as a two way now also let me just add here delay so we can see loader okay so now you see this uh activity indicator showing after that it's just a displaying items okay now to get whatever the value is selected so for that you can access using current item property that we Define here in drop down button so we have current item properties so using that I can access whatever the value is selected so let me just create observable property type of title value and that is going to be so you can set a default value also here so let me just set default value is going to be so same these current item now I can bind here and whatever the item is selected if you want to display label then you can also display like this current item dot title so it's just going to display whatever the value selected from this drop down okay so here now it's displaying if you see here in label it's displaying default text that uh we set in current item now if I select any value from this speaker then it's just going to uh display here too okay now let me just uh quickly uh overview of this all the property so this item Source property uh we use to bind data here in picker control so that I am using a plugin.mavi DOT popup plugin to display that data and here item template so whatever the change I do like if I set here horizontal State layout and in that I want to display some image so you can just design any layout as you want so that this is going to reflect here in this UI okay so that item template property we use for that purpose and this display member like which value you want to like whatever the value I select from this that here in a drop down button if you want to display some value here some different value here on this pop-up and other value you want to display here and what uh this drop down button there you can just specify display member so if I set here as a value and when I select any item so this is just going to display a value from current object and this is display picker control is just used to like when the item source is set after that when you set this property to true that time is just going to open this picker control and this current item property so if you want to bind some default value to this drop down button then using this property you can bind it and also you if you want to fetch which item is selected in this drop down button then using this current item property you can catch that value okay so here I am selecting title and here is displaying value so whatever the value from the class you want to buy and whatever the property that just you need to Define here in display member okay so I hope you like this video that's all for today thank you so much for watching it

Channel: Programming With Pragnesh

Views: 10,214

Keywords: Dropdown In .NET MAUI, .NET MAUI DropDown, Dropdown, Picker Control In .NET MAUI, Custom Controls In .NET MAUI, Custom Picker Control, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: fMB6LuEB-4o

Length: 57min 15sec (3435 seconds)

Published: Sat Oct 08 2022