Style Control States with Visual State Manager in Xamarin.Forms

since xamarin forms i think 3.0 we have a visual state manager so basically what that does is each control now has a couple of states like disabled normal focused and one other that i can think of right now and whenever it reaches that state you can apply styling to it so you just define your style and whenever that control gets focused it will apply that style automatically you can also have like custom states with you know other library creators can who can custom state so that's pretty awesome and i got a question from my great friend hendrick who is a member of my channel and you know he is in the lead developer tier so he gets to request topics for videos and i prioritize them so here's a topic from him and he had a little bit of trouble with working with the visual state manager so this video is for you let's go check out what it's all about to show you how to work with the visual state manager we are just going to open up a file new xamarin forms project like you see on screen right now on the left you can see the example and on the right you can see my android emulator showing that same thing so this is what you'll get out of the box whenever you're using visual studio for mac or visual studio 2019 on windows so let's just get cracking straight away and here we're going to change this title right here to be visual state manager sample save that and with hot reload it will reload our page immediately and it will show up without having to stop and restart our application and in fact this is going to be how i'm going to create this demo because everything i will show you in this video can be done in pure example so that's pretty awesome you can all do it in code as well in fact if you want to like trigger states yourself then that is definitely something that you would need to do in code but i will just show you how to use how to get started with the visual state manager so this is going to be all example and hot reload is going to help us stay focused and give us that sweet dev inner loop okay enough with the marketing talk i'm going to implement first a sample entry so i'm going to remove all of this and just do an entry here and let's give that a text because we're not going to enter something ourselves so let's make it something random like please subscribe to my channel you know maybe you're watching this channel and you think hey gerald i like you let's subscribe to this channel and support you a little bit that would be awesome so do that and in here i can say visual state manager dot visual state groups so in here i can specify multiple groups so within xamarin forms a couple of groups are defined by default and those are the normal disabled focused and selected so you can do states for you know whenever a control is normal so whenever you just look at it and nothing weird is going on it's not selected it's not focused not anything you probably always want to have that normal state in there because you know whenever then if you focus something and then you unfocus it it will go back to that normal state so basically that is like the placeholder where it will keep all the default values for the control that you want to apply these state to now if you're using maybe custom controls or there are a couple of controls built into xamarin forms that specify additional states or you know as a library maintainer you also have the possibility to define even more states or so maybe if you're using a third party control then they have defined their own states please check out the documentation on the visual state manager or the third party control that you're using for more guidance on that but i will show you now with the you know just in the box xamarin forms solutions inside of these groups we can specify a visual state group that is no surprise inside that visual state group we can have a visual state and here is where those names come into play so you have to use these kind of magic strings um for the group names for the for the actual states that is not ideal but you know that's the way it is so we're just going to add the normal one here now you can apply um your own customization to this so you know we're looking at an entry here and we can say visual state dot setters and there we go and we can say okay i want to have a setter for the property background color and let's make it a value of you know let's make it something pretty yellow and there we go and if i save now you will see the entry come up and it because it's the normal state you can see the background color is yellow but if you do not want to if you want to just have the default values in here you can just remove all of this basically and just have this normal one in here but you want to have this normal one in here because if you're going to define a visual state as we will see in a second where we do something with the focused and you unfocus it it will not go back to the normal state if you don't have one defined so that's a pro tip right here so let's just have a look at the thing that i'm mentioning here so we are having another visual state with the unknown yeah is it the focused focused there we go and close this one and here we actually want to have that you know visual state setters you can see this very much looks like how you would define styles in fact you can declare this also in like your resource dictionary if that is something you're interested in check out the video that is appearing on your screen right now and you know if you want to have a video more precisely on how to work with these visual state manager and styles and everything together please let me know in the comments and i will be making a video for you next so here we have the setters and we do a setter for the property background color again and we're going to set the value to red this time and close that one so if we save this and i go over to my app here on the right and i'm going to focus this entry you can see that it turns red and now if i unfocus it it will go to normal so let me just quickly show you if we remove the normal one here save it it will reload and now we can do the focus again so it will turn red but when i unfocus it stays red because you know that normal visual state is not there so it doesn't know how to go back to its normal state so let's just put this back and this is basically how you would implement a very basic form of like the visual state groups here so as you can see again this can be very verbose like doing it in line so you probably want to look at moving this to your resources please refer to the video description where you can find a video on how to work with resources and in fact we're going to see that with the next example i have in mind so let's just keep this entry right here as it is and i'm going to add a collection view because this is going back to the question that my dear friend hendrick has asked me so let's go back to this collection view and in fact i want to set the selection mode because you know that's something we want to do to single you can also select multiples so if you've not worked with collection view before this is the new version of the list view basically you want to check this out because it's more performant you can do more layout things it's pretty awesome look into the collection view you want to see a video dedicated to the collection view let me know in the comments and i will make a video for you so here we go and what we want to do so this is just about you know doing the visual state manager so i'm going to add some items here in my example and the way to do that is collection view item source there we go item source and i'm going to do an x array here uh we should give that a type which is of x type this is kind of funny looking syntax if you're not used to it i totally agree and typically this is not something that you want to do but you know this is a nice way of providing some sample data without confusing you with you know data binding and that kind of stuff so here we go add a couple of those three two actually let's just keep it at three that will get the sample across so if i save this you can see the collection view is down here coming up so i have some data and the other thing i want to do to show you this example properly is um inside the collection view we're going to create a item template so basically that is a template that will be applied to each item in our collection view so you know whenever it's going to render out this new item of 111 it's going to look at this item template and it's going to wrap all this stuff into this template and for you know the second item in here as well so you know that's the way how you can style basically each item in your collection view also works for list view other things again if this is something you're interested in i can repeat this all day just let me know in the comments and i will make a video for that and we should supply it with a data template and here i can say do a stack layout to just stack those things and put a label in here so basically what i'm going to do is show these items inside a label i'm going to give this a name you'll see why later and i'm just going to give this the you know value label here we go and here i'm actually going to have to do a little bit of binding data binding so here we go data binding dot and dot just means you know it's going to use like the actual object that is in here so if this were a complex object then you would have to specify like the property name of the the property that you want to show there but in this case our object is like a a regular string right so i just want to use the entire object which can be done with dots so that's what's going on here and then close this tag and if i save that it will look absolutely the same but now it's wrapped inside of a stack layout and a label in fact let's make this look a little bit nicer and align this at the center so there we go and now if i click one of those you can see that it selects this whole thing in orange because you know that is like the default android theme but what we want to do here is change that background that is selected and for this to work because you know the collection view implements actually those visual states and it has the selected state but for this to work properly you will have to declare a style and with that the visual groups and everything inside of your resources so um here we go i'm going to assume that you have a little bit of knowledge about the resources here because else this will go pretty fast but again the video will pop up again there is a video about resources and resource dictionaries that i have recorded already so go check that out if you want a little bit of background information i'm going to declare this on this page level you can also declare the resources on your application level or even inside of this stack layout if that's what you want we're going to do the resources here and then i'm going to declare a style and i'm going to have this have a target type of stack layout so what this is going to do this style is going to be applied to the stack layout in my data template here all right so let's scroll back up and define that style and inside of your style you can actually have a setter for property of visual state manager dot visual state manager groups so here we go there we have that and inside of that now we can basically just you know define the whole thing as we did before so we can just say visual state group and we can say visual state and we should of course have the normal one to have it go back to normal so let's go back to this one have this half normal there we go and we want one for the selected in this case so not the focus but a selected and close that one here we go format that nicely and we're going to say back whoops visual state setter there's a lot of example going on here and the actual setter is going to be property background color so this is the background color of our stack layout and that's going to have a value of i don't know let's make it yellow again let's make it something pretty so here we go setter property background color i think this should be good intellisense doesn't seem to agree with me but let's see if we click an actual item here okay so this is not working and i already noticed here in our little intellisense things why because apparently we have to wrap this into a visual state group list so outside of our visual state group we need to determine a visual state group list so whenever we you use this in a style you need to wrap this into a group list of course there is usages for group lists and certain groups because you can also give this group a name so you know then you can easily switch between groups and that kind of stuff that's a little bit more advanced so i'm not going to go over this in this video but if that's something that you're interested in please let me know and i will make a video for you um so now save this again see if that works better so until he sends agrees with me a little bit more now and whenever we click this you can see it now does yellow so that is pretty cool now for the question of hendrick is kind of specific and you don't see the actual error in air quotes if you will in in this case because i think he has a little bit of more complex layout where you maybe have an image and multiple labels and what he was saying is like okay i have updated now the background color of my stack layout but i do not update all the other things one feature of the visual states is that you can now also provide it with a target so if you remember from a little bit earlier i gave my name no i gave my label a name here it's the value label and what we can do now so earlier if you also wanted to style this label then you had to basically copy this this whole block and you know have it have another target type because it should be a label and then you should do the property here and it could be something different but what we're doing now that as long as something is scoped within this stack layout so for our case our label we can do it like with the same visual state right here this is a really really cool feature built by a fantastic guy um he's talking to you right now so you know i might be a little biased and we can now copy this setter and what we can do is actually set the target name on it so this can be the name of a control that falls within the stack layout scope so in this case if we go back scroll down a little bit here we can see we have our stack layout so this is the scope of the stack layout and inside of our stack layout we have a label called a value label so if we scroll back up and we do this setter and we have the target name i can input here the value label and the only thing you need to know about the property now is it works with only bindable properties so you have to specify like the label dot text color here so let's set the text color and we can set the value to red so here we go save that and it should update and whenever i focus something now you can see that the item turns yellow but not only that the label will also do a red text so if you have any more controls in here then you know you can just access them with that target name as long as you think of that you have to specify the property with like the control that you are accessing so this has to be the control name so this could also be entry or i don't know image something like that but in our case it's label and then the label dot text color so you know if you want to find out what this is just go into your code behind basically and you can just see okay label dot text color and just do not do the property here so text color you can also do i don't know text type as long as you don't do the property here so that's all stuff that you can specify here and that is all you need to know on using the visual state manager and using the visual state manager target name to make your example less verbose okay so i think that was a lot to take in right there was a lot of example going on luckily we have hot reload which makes it very much easier because you know imagine that we had to stop and restart our application each time wow this video would be three times as long so now you have some sense of how to work with the visual state manager i can imagine you have some questions still watching this please let me know in the comments if you do and i will be doing my best to answer them i also repeat it over and over again but i'll do it once more if there is something that you want a little bit more of an extensive explanation about please let me know i will do a video on that other than that if you've liked this video please hit the like button hit that subscribe button if you like other things on my channel or you want to be notified of content as soon as it comes out then ding that little bell important to know and i'll be seeing you for my next video you

Channel: Gerald Versluis

Views: 2,044

Keywords: xamarin, xamarin.forms, xamarin forms, xamarin tutorial, visual state manager in xamarin forms, visual state manager collectionview, xamarin visual state manager, CollectionView change selected color, xamarin forms collectionview, xamarin forms collectionview selected item style, xamarin forms collectionview selecteditem, Xamarin.Forms 101, Xamarin Forms 101, Visual State Manager, xamarin forms ui design, xamarin.forms ui, xamarin forms ui tutorial, xamarin forms xaml

Id: GjHV7McgPq4

Length: 19min 19sec (1159 seconds)

Published: Thu Dec 03 2020