LongPress, Animations and More with TouchEffects in Xamarin.CommunityToolkit

can touch this well actually you can't touch this because this video is going to be all about the touch effects in the xamarin community toolkit you can do long presses which you cannot do in xamarin forms you can do regular presses you can do all kinds of animations we're going to see it in this video and more let's go [Music] so to show you all about the touch effects in the xamarin community toolkit i've created a file new xamarin forms application you can see it here on the left in visual studio for mac it's running on the right on the ios simulator because i like to work on a mac but you know you can do the exact same thing in visual studio for windows with the same experience but you know it looks a little bit different it feels a little bit different but you can do everything just the same so we're about to see a lot of hot reload and how reload allows you to see the changes you make in your example automatically show up in your ios simulator or your android emulator or your physical device even so that means whenever i start changing this title right here and i say touch effects sample save that and boom it automatically comes up in the io simulator so that is really cool in fact this allows me to do this entire demo um with stop without stopping and starting the whole application well i need to do it just once because i did not install the examine community toolkit just yet so i will show you that right now but after that all the changes will be examined so we don't need to leave the application that is really cool so let's now first install the xamarin community toolkit i'm going to go to my solution explorer and go to the solution level here right click say manage nuget packages and i'm going to search for xamarin.community toolkit there we go it should pop up here we go already 13 000 downloads so that is really cool make sure to get the right one because there is the markup one as well and some others that kind of share a similar name so make sure you have the xamarin.com toolkit one version 1.0.1 is the latest table at the time of recording this ad package and you want to add it to all of your projects because you know we have that shared code but we also have the code on our platforms you know to to access all those platform specific platform native apis make sure to read that license agreement and accept it to actually install those packages should not take too long because the package you know there's a lot in there but it's still super tiny so that is really really cool whenever after it's added the thing that we need to do whenever you're using this example that is really cool i love example but you can do everything in code as well we can add this namespace so the package is added right now we can see that here at the top but you need to import this namespace so we're going to say xmlns which is xmlnamespace and you can set your own name here i like to use xct xamarin community toolkit is and what we did is import this very simple simpleish because no one's going to remember this but until he sends issue friend url and that automatically imports all the namespaces where all the controls all the effects all the behaviors live so the only thing you now need to remember is xct and do xct dot and you know intellisense will pick up from there and suggest all the good things that are in the community toolkit so actually you know remove all these labels actually let's run the application that's what i promised you so we'll run the application i remove some of the labels that are in there and now i can do all the things in examples that is going to be really cool i kept this one label which is a big one that's the title so let me actually you know basic touch effects so i'm going to show you this on labels maybe uh if i get a little bit crazy during this video i will pop in some other elements but you can use these effects on any visual element and visual element is like at the top of the chain where all the ui elements inherit from in xamarin forms so you can use this on any control basically so on a label we can definitely do this and what i can do here is xct like i said and we can find the touch effect so you can see there's multiple other things in here but i'm after the touch effect and you can see touch effect dot and there's a lot of stuff in here so you can see animations we can do something with animations background images okay command command parameter hoovert so whenever that is supported whenever you have like a cursor you can use that hovered state so that is really cool there's a lot of those long press we'll see that in a little bit so long presses in here something that is not in xamarin forms out of the box but we have it in the community toolkit so that is cool native animation so you know if you're using like on android it has that kind of ripple animation you can enable that on maybe elements that don't have it normally or on ios it kind of has that fade native you know whenever you press it it kind of fades away actually let's just show it here you go native animation save that you can see it reload for a little and now when i touch it you can see that little it's it's kind of hard to see maybe on screen but it fades away a little bit so it uses that native animation and whenever we set that to false it doesn't do anything right so now it's just a label as you're used to it so okay that's one of the things it can already do it's not the most exciting one but you know it's in there so let's scroll down again to native native native so normal normal is basically like your unpressed state so you know the label is just sitting there that's not having any interaction so this is kind of the things that you want to configure for like the normal state we'll see that in a little bit as well and press this you know whenever you clicked it whenever you tapped it that is like the the pressed state so there's a couple of other things in here um you know check out the documentation we have the documentation now check out the documentation or the sample page on aka.ms xct that will bring you to the examine community to get repository there is a sample app in there and you can check out all these things in much more detail of course but of course i'm going to show you also in this video um so the first thing we are going to see is like you know let's do a little bit of an animation so let's say animation duration is 250 this is as always basically in milliseconds also let's make it xct dot touch effect dot animation easing so we have a little bit of a easier syntax for this and we can say static easing dot well here we go cubic in out something like that so we can do something with the animation and this is like the animation of the thing that we're actually touching right so and what we can also say is xct touch effect dot pressed so this is again that pressed state so whenever you tap it or click it with your mouse we can have a pressed scale so we can scale it down a little bit so if we say like you know make it three quarters something like that and let's do a little touch effect dot opacity so you can you can kind of fake that native animation at least on ios by setting the opacity here but you can also see you can do rotation rotation on the x only y translation so you can move it around you can give it a different background color in fact let's just do that as well but the opacity is going to be you know 0.6 so 60 percent and lastly let's give it a little background you'll see that if i give it a background for the pressed state here we go background color let's make that actually the same color as this to give it a little bit of a design here we go save that it reloads and you don't see anything yet but whenever i start touching it now you can see you know it goes back there it does something with the opacity so a lot of things going on and simply by adding a lot of well some of the properties in here right so very easy to do now the thing i mentioned is with the pressed background if you do this then you also want to specify because now the background stays like this so if you want to do that you also want to do touch effect normal background color and that is going to be either do we have clear no transparent is maybe the best or white you know you can you can play with the options here so now it's white if i do this and then it goes back you see so you can do all these things you can do the animations you can make your own effects like this by touching it pressing it it's amazing so this is some of the basic touch effects so let's copy this label and add here another one and do basic touch commands so this is not the only thing that you can do commands there we go i'm going to remove all of these for now and what you can also do is say xct touch effect dot command so this is just whenever you tap it so you can also use like you know your tab gesture thing that is already out of the box in xamarin this is just another way of doing it so you can say command is and actually we need to use a little bit of data binding here touch command so if you are not familiar with data binding there should something pop up on your screen right now or go check it out in my channel there is some playlists and videos on data binding and how to do that so if you're not sure go find those i'm going to skip over that real quickly here so the command is basically like if you are doing mvvm and you want to do commands so you want to bind to that so we're going to our main page code behind and i'm going to say uh public command um yes it knows that okay that's good and it was touch command so here we go and i'm going to say just get so make sure this is a property because whenever it's not a property you cannot use it for data binding and in this touch command in the constructor right here i'm going to say new command and it's simply going to you know you can do all kinds of logic here but i'm just going to say what is it display alert here we go um touched message can't touch this okay something like that just to show you that it actually does this binding context we need to set that to binding context is this so in this in this main page in this object it's going to look for the touch command and it's going to bind to that so whenever i save this i actually changed code now so i need to reload this for this to work so let's quickly do that stop and start it again and what you should see happening is you know we just touched that label and we should see that display alert get invoked so here we go touched can't touch this works like a charm there's different ways to do this in xamarin forms so that is nothing special but if we now copy this one again just to see the difference um you know basic and we can say long touch well it's actually long pressed right long pressed commands so we have another property in here which is going to do the touch effect and we also saw the long press command so you can bind a command that is fired whenever you do a long press so that's cool right because long press is one of the gestures that is not available in xamarin forms i don't know why but we have it now in xamarin community toolkit so that is pretty cool so whenever i do this the long press command and i save it let's just keep the same command for now just so you can see that i don't have to restart the app again and then when i long press now see it's triggered whenever i do a long press so this one does it immediately but this one if i just click this one nothing happens but if i long press it and you can see it comes up but you can also if you paid attention here there was a little spoiler so touch effect long press you can also set the long press duration for yourself so it has a default value i'm not sure what it is but it's just enough to feel like a long press but you can also set it yourself so if you wanted to have like three seconds again this is in milliseconds so times a thousand and then i really have to press it like a long time for a couple of seconds before it comes up see um and you can also make it much shorter so if i make this 250 milliseconds then you know it's almost like you you normally press it although this quick press still doesn't do anything and long press does actually this so you can really fine tune it the way that you want it for your application and you can use this long press inside of your application on any element so that is really cool now what else you can also of course combine all these things so if i again copy this label and you saw in the intellisense there's much much more i'll leave you to discover that yourself if you can't find it out let me know in the comments and i'll make another video for you of course but or you know let me know what you did in your project and how it turned out so that is really cool too so if we make another label all the things here and i combined a long press and you know just the touch effect command so basically all the things let's set this to one second um we maybe should change this to be a different command then because now you can see the difference and all the animations here so you know just paste them all in here and then you know to to make the circus complete let's make this a i'll just keep this for the same long touch command copy this one too should be long long and long pressed there we go so okay so now we have a little bit of a difference and i should rerun this because i now also change some code so let's just do that stop and run it because you know it's going pretty quickly anyway with these tools on mac os so that's pretty cool and here it comes up again so here we have all the things so if i quickly do this you know you can see the animations it's the normal touch and can't touch this but i can also do the long press and you can see it first comes with the normal one oh so this is interesting this is something that you might not be able to do is combine these two things so that is something we find out right here in this video it's good to know the limitations as well um so if we want to remove this one and now we do a long press then this one should work right oh it is oh it's still bind to the touch command ah okay here we go um long touch command did i do it like this long touch command see there we go now let's see what happens so we do the normal press and we do the long press okay so you can use them both that's cool so you can do the normal click and we can see the regular touch can touch this and when we do the long press you can see it comes up with the long pressed and still can touch this okay so you can use them together i just forgot to set up the right binding so that is basically how you use the touch effects in the xamarin community toolkit again let me know in the comments what you're doing with it or what you still want to see what did i miss in this video and i'll be sure to make that for you how do you like that this is a cool effect right so you can just pop in a couple of properties on your element and you can do all these crazy things with animations now i just used labels but you can do this on stack layouts grids all kinds of things so that is really cool and there is a lot of more options to explore i'll leave that for you to do let me know if you have any project where you're using it because i am very glad to have a look so this specific feature i think is contributed by our core team member andrei andrei i don't know i still don't know how to pronounce his name i'm very very sorry but this was a separate library which is probably called touch effects but he was so kind to donate this to the xamarin community toolkit and now a lot of more people can probably enjoy this and we can you know iterate it on it together so that is really cool if you have any feedback please open an issue on the xamarin community toolkit repository you can find it on aka dot ms slash xct that is a much better url than github.com so there you go there you have it let me know how you're using this how you're liking this thank you for sticking with me for another video please like this one if you've liked it and subscribe to my channel if you want to be notified of more of this amazing content now this video was created by a request of someone in the comments so if you want to see a video about a specific topic let me know in the comments or reach out to me on twitter or somewhere else i'll see you for the next video and as always keep coding

Channel: Gerald Versluis

Views: 5,670

Keywords: Xamarin.Forms, touch effect xamarin, xamarin forms touch effect, xamarin forms long press, xamarin forms long press gesture recognizer, xamarin forms long press effect, long press xamarin forms, Xamarin Forms 101, xamarin forms tutorial, xamarin community toolkit, Xamarin.CommunityToolkit, xamarin touch gesture, Xamarin 101, xamarin tutorial, xamarin forms tutorial for beginners, ios long press, android long press, xamarin.forms 101, xamarin, visual studio

Id: BcFlZMhPmVk

Length: 17min 30sec (1050 seconds)

Published: Thu Jan 21 2021