.NET MAUI - Building your own custom controls

today I will talk about how you can build custom controls to reuse code in your own apps [Music] welcome to new.net Maui video today I will talk about custom controls and with custom control I mean controls let you build and reuse it can be just in your app or it can be in all of your apps and there are a few different ways you can build them and you can create a.net Maui control and then you can implement it with handlers on all platforms but today we will focus on doing everything in.net Maui and then we can focus on handlers in a video later so subscribe to my channel so you don't will miss that but now we will open Visual Studio and start to write some code okay so now we are inside of Visual Studio I just created a new dotnet Maui app and we will start from there if you wonder what this is It's a bug in the latest version of Mac that they show up so we don't have to care about that at all so what we will do now is that we will create a use control or a control or a custom control or whatever you want to call them I used to call them custom control so we create a folder controls and then we add a new file a.net Maui content page summer should we not use you should use content to view then you can change the Base Class later if you want to so let's do a card control like this and now we can use it just like it is if we want to so we go to our main page we import the namespace call it Con controls CLR name space and custom control demo dot controls that we can remove all other content from here and we just add controls card control so so simple easy to get started with the custom control but now we of course want to modify it so it can look how we want to and of course you want to have some properties there too so we can start going here to chord control assemble.cs and we can add a title property and if we want to bind to that property we need to create a bindable properties so we do public bindable property and give it a name and the name should be the name of the property but it should end with property so title property like this and now we do is equal to bindable bindable property dot create and a name and here I prefer to use name of so let's go and create the actual property public string title and we need to get her and the getter should return the value of the title property so we use get value master from the base class and then we passed title property and then as string and set a set value title property and value just like that okay now we can use name of here name all title and here is the return type and that is string so we do type of string and the next here is decl declaring type and that should be the type of the custom control so type of card control and then we can set the default value if you want to we can set binding modes and we can do some other stuff so let's do property changed and bindable old value new value just like this and we do so so be an action so now we can handle when the title probably changed so we can for example do like this control is card control and then bindable in so we need to do that because we are not able to access the property from the control otherwise this should also be static and we can also make it read only like this so okay so now we can go to the control give this label a name like uh title label you can remove that default text now we can go here and do control Dot title label title label dot text is equal to new value as string okay and now we can go here to main page and we can set title is hello Maui from Daniel okay let's try to run it hello Maui from Daniel and now we can reuse this control multiple times if we want to hello again hello again but we maybe want to do something more excited when we call this a chord control maybe we want to make an actual card so we go inside here we add a frame and now we can select if we want to use frame directly as Base Class of the control in some way that is good because that will be less controls to render in the UI but that also open up to set all the properties of frame from outside so sometimes you maybe don't want that so we do like this instead frame have a vertical stack layout in it and we have the title label still here and now as a second item in this vertical stack layer we want the user to be able to insert content and for that we can use something called content presenter and content template so we insert the content press enter here and there is where our content will be but to make this work we also need a control template we do content View dot control template and then we create a control template and then we wrap our frame into that like this and now as you can see here we are not able to do like this so we remove this properties changed Handler and instead we do like this we can remove the name because we don't need that we don't want to be work to call option Center so we do we have just text then we do template binding and now we can go to the main page and then we can also do like this we add some content to the card control like let's say a new vertical stack layout with the label text label one label two okay now we can see how this will look and here we have the frame the first control hello Maui from Daniel the title that we passed into the property here and then we have a content and that means that we in the second chord control here we can have a complete different content if we want to we can for example do a horizontal stack layout and we take the labels label three label four and then we also do font size Lodge and it will look like this and that makes it possible for us to create a general chord control for as in this example we can have a fixed layout of it but we are also able to insert content and this makes the control very flexible so it's up to you how you want it to work and it depends on what type of control you need but as you can see it's very easy to create your own controls like this in don't know and that also makes things very reusable so this was a short video but that shows also how easy it is to get started building your own custom controls that you can reuse everywhere in your app and you can also package them up in a nugget package and use in all of your apps so thank you for watching don't forget to like this video And subscribe to the channel and we see you next time bye bye

Channel: Daniel Hindrikes

Views: 14,336

Keywords: dotnet, dotnet maui, .NET, .NET MAUI, C#

Id: 3Cd3amJ-qcw

Length: 10min 24sec (624 seconds)

Published: Mon Sep 19 2022