Visual State Manager In .Net MAUI - .NET MAUI Tutorial Step-by-Step | 4K

Hello friends and welcome back to this series in the last video we looked at how to use control templates to change the look and feel of your control in this video we'll be looking at visual State manager and we will be using that to also you know Advance the look and F of our control without further Ado let's jump right into the video all right so this is where we stopped uh in the last video we'll be able to use control templat to change the look of our radio button to look like this now in this video we look looking at visual State manager uh to to control the selection of the radio button so that we'll be able to have the look that we want and this is the look that we want when you select one we have the primary color as a background and then we'll have the white color as a text color as a as a foreground all right so now let's go to so this is our control template in our style do do zaml so to do that you go to your style of zaml and then you create a control template we've done this in the last video now what we're going to do is in this border this is where we're going to set the visual States and to use visual States we're going to start with a visual State manager. visual State groups and then right there we have going to have a list of visual States group so which means you can have different group of Vis States uh in the list but we're going to have one in this case but you have to save State uh group list and this group list uh will contain uh a visous States group so we can have visous States group as this and then you know right in this list you can have another visual State group if you want to but in this case we just going to have just one group and this group we're going to call it a name give it a name so let's say x name um let's give it a checked state check States now some sometimes you can reference this this St this group in code to be able to change uh the look on the Fly we're not going to do that so uh we're going to just uh use the state the property the set up to set uh to set uh some properties here so in order to do that we we need to create a visual state visual State and this visual States let's give it a name because we don't have different visual States in this group so let's give this one a name uh the name is um checked so when the um radio button is checked it's very important uh at this point uh to use the um to use the the property of uh um to use a state of the control you're working with so in this case we using checked uh if it is like a list we probably just use like selected know unselected things like focus unfocused and stuff like that so now in here we're going to have some setups so visual State sets we say visual state. sets and then right here we're going to have different Setter so let's the first seter I want to have uh is the property we want to change the property of the the this control this border want to change the uh because the visual state is actually going to be attached to this border you can see it's inside the Border uh so we're talking about the visual State for the border and the border is is inside the template for the radio button so save property and the property I want to change is the background is a background color and then we want to set the value of that to say value of that to uh a static resource static resource and let's give it primary that's is our our color primary and then we close the this now this is having this line so I'm going to I'm going to relaunch the H the have for us to see with this now what you will see is that once this is checked anyone that is checked you have uh the primary color which is the blue color has the background so that is what we expect to have and that's the first thing in the thing in in the thing that we're going to do the other properties that we're going to set which I'm going to show you in the moment so if you go to hard you can see now that this is the selected uh radio button and it's already change if I select another one it's change if I select another one it's change and the reason why they're not changing is because we've not set anything when I click on it they're supposed to be to be uh unchecked but we've not set any visual State for the unchecked which we're going to do um later on so the next value we want to check want to change is want to once this is selected you want to change the text text color to be white and then if you look at our design let me show you quickly you can see that once this is checked the the text here is is bolder than uh this other one so we're going to also change uh that property for any of the selected uh radio button so to do this we want to Target the content of the radio button and don't forget that the content of the radio button is this is this label and this label already has a name so what we're going to do is to change the property of this label to reflect in the content so let's say seter and then the target will be let's say Target name and the name of what we're targeting is label label and this label is what we have here that the name of this label if you if you call this uh say content label you have to say content label here so the the name must must actually match then what we now want to do is to set the property the property of that label now the control we target is actually the label and to to to get to the label we have to say label that is the control now not the name label as this if it's a text box you have to say text text box we don't have a text box in in uh uh but if it's like um uh entry you have to say entry dots so you have to say label dot what's the property that I want to Target want to Target the text color text color so you must know the the property and type it uh you know accordingly so this is how you say text color and then we go to the value and the value we want to give to it is white and then I can close this uh currently not reflecting so but I I will I will I will refresh later on the next thing you want to do is to set the uh how bold it is uh when it is selected so let's say seter it's going to follow the same thing Target name equals label and then the property is going to be label dot font family now the value is going to be the font family that we have that is the semi bold so we change the font family to to be bold to be semi bold so I'm going to close this and lastly what you want to set is you want to set the opacity of this to be one because when it is unchecked the opacity will be reduced which is in our Design This you can see this opacity is actually reduced if can let me minimize uh this so that you can see uh you can see from our design the opacity is actually at 60% um that is 0.6 the opacity of this is at 100% that is one so we have to do that also so let's do that next say seta Target name is still the label label and then the property is the label dot opacity and the value is one so because this is the check State the value will be one this is a check state so let's quickly um relaunch this and then see uh what we have in the design and after we we see that the next visual states that we're going to create will be the unchecked so this is the checked one that we had done we're done with now so let's quickly see how it looks like hard and you can see that as it is checked the opacity is one uh it is semi bold not necessarily see see the difference semi bold uh semi bold font family semi board I'm just trying to um reconfirm all these things to be sure that there's no mistake anywhere if I select this you can see is white set Bard White is 7 Bard all right so I can go back can select it again so next let's go to the next visual state that we want to create so what I'm going to do to make it easy is to copy this same Vis State the check State and then right after it you're going to paste this and change it so this is going to be the unchecked state now the unchecked state the background color is going to go back to the default color and this is the off white color so let's change it back so off white and the text color that that no the background color goes back to offwhite the text color is going to go back to black black we will remove the font family it will result it will go back to how it used to be and then the opacity will be 0.6 let's save as you can see as I'm selecting it is now reflecting all right guys so that is how you work with virual State manager inet Maui uh in the next video we be looking at some Advanced binding and some uh Advanced uh converters um so if you want to check the the rest of the series you can use the link in the description below uh to check the rest of the series see you then

Channel: Oludayo Alli

Views: 394

Keywords: Xamarin.forms, Xamarin, .net maui, maui, single project, .net maui beginners, .net maui course, how-to, maui ui design, xamarin ui design, visual state, state manager, visual state manager in .net maui, visual state maui, peoperty setter

Id: iFCvZszQpEU

Length: 11min 28sec (688 seconds)

Published: Mon Mar 04 2024