LongPress, Animations and More with TouchEffects in Xamarin.CommunityToolkit
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- With the TouchEffects in Xamarin Community Toolkit it has never been easier to add a LongPress to any visual element. Or how about some animations? Just add a couple of properties and BOOM! There it is.
In this video we'll see what the TouchEffects are and more importantly: how to add them to your Xamarin.Forms application yourself.
💝 Join this channel to get access to perks:
/ @jfversluis
🛑 Don't forget to subscribe to my channel for more amazing content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🔗 Links
Sample App Repo: github.com/jfversluis/XCTTouc...
XCT Sample App TouchEffects: github.com/xamarin/XamarinCom...
Xamarin.CommunityToolkit Repo: aka.ms/xct
Xamarin.CommunityToolkit Docs: docs.microsoft.com/xamarin/co...
Blog post: blog.verslu.is/xamarin/xamari...
⏱ Timestamps
0:00 Intro
0:25 Sample App Outline
1:30 Install Xamarin.CommunityToolkit
2:40 Add Toolkit XAML Namespace
4:15 Explore TouchEffect APIs
6:23 Animations with TouchEffects
9:05 Invoke Commands with TouchEffects
11:34 Implement LongPress
13:12 Combine all of the Above!
15:56 Outro, shout out to my newest member!
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Twitter: / jfversluis
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev - วิทยาศาสตร์และเทคโนโลยี
![[Live] : ONE FIGHT NIGHT 23 วันนี้!! “เร ยุน vs อาลิเบก”](http://i.ytimg.com/vi/ClLQVYWSrUk/mqdefault.jpg)
You're just tearing me apart between the need to dedicate all my time to backend logic and the burning wish to restyle the ui... Thanks, Gerald.
Haha errr… you’re welcome? 😅
Very useful and framework getting really strong.. Good work
Thanks Argon!
Thanks Sir, The way of explaining of the topic is cool. I always eagerly waiting for your new coming videos.
Thank you so much Shailesh! Really appreciate it!
I like this and waiting for this... Now I'm happy and I'm going to use this for my Image Gallery for Image selection. Right now I'm using the double tap.
That is an awesome application! Be sure to let us know if you run into anything
Thank you so much for this, I wish I knew about this in XCT earlier.
At least you know about it now!
Cool thank you. Unfortunately the longtouch doesn't work on a StackLayout inside a collectionview. Can you help me? How I can implement a context menu after the longtouch?
Thank you I really appreciate this. I needed it so badly!!! :D
That’s wonderful to hear! Thanks Bojan! Glad it was useful!
@@jfversluisI try using these effects. I have created a ContenView that needs to behave as a control. I have applied touch effects directly into the control but they did not work the way I want it sometimes did not even recognize the click event that I had bound to a view where I call the control. But worked only if I click on the very edge of the control or something like that sometimes, somewhere in the middle may be between the labels or so but I'm not sure I'm not quite sure if I did everything correctly but when I remove the touch effect from the ContentView and I place it in the content page where I actually call the control to render, everything worked just fine. I was just trying to avoid duplicating the code but look like we did this effect I cannot I will have two duplicate it on each place I called the control
Great properties to play with :)
Many options!
Great video! How to combine animations? For example flipping a coin or a card : Flip an image horizontally, bring in another card/icon with animation
This is very very useful for me ! I am thinking about switching from SwipeView "Menus" to "classic" Context Menus when I need to interact with a Listview-Item for example. Question: I have always trouble to prevent Tap-Commands not firing two times if the user makes a DoubleTap. Can this be solved, too with this functionality ? Can it divide between single and double taps ?
I think this one only registers a single tap. Of course you would be able to implement code on the command that is executed to increment some count and see if its double (or triple or...) tapped
Hello Gerald.. How can I burn how many times the screen has been touched? do you have an idea.. for example when I clicked 3 times in a row it was clicked 3 times, when I clicked 5 times I want to catch 5 clicks.
Hello, different topic, but could you make a video (or several!) about performances tips and best practices (maybe also how to test that in visual studio) for xamarin form?? Thanks a lot for all the videos you made!!
I'll put it on the list, thanks!
Useful videos.
The doc for xamarin toolkit is not complete. Is it possible to link the videos in the doc for reference. I had hard time using some features and might have been useful to find these videos earlier.
Thanks
Since the docs are more an official thing and this is not I’m afraid that’s not possible :( were aware the docs aren’t complete (yet) being worked on and of course open to contributions!
Excellent tutorial, thanks! How does animation works in android devices that disable animations?
I’d have to check! But I remember seeing something in the Forms codebase about that. If that happens then the animations from this are also disabled
Nice! A good thing would be a optional property for longpressed when using mouse rright mouse button trigger this
Interesting! I don’t know how that is handled at the moment to be honest :)
You get to judge me that little bit, but I seem to be stuck chewing on crayons when it comes to using the TouchEffects from a code only composite component. Any ideas on how to accomplish this, other than creating a XAML based component that wraps the functionality, so that I can use that in the code only composite component, which seems a touch hackish.
I try to judge as less as possible! My default and preference is just XAML :) but I am still friends with people who use code only
What is it you're stuck on? Everything that is possible in XAML is possible in code, you should be able to hookup the effect in code just as well. Have you seen this? docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/effects/creating#consuming-the-effect-in-c
@@jfversluis Thanks for the quick reply and for making these videos. I was overthinking it and never thought to simply try setting element.SetBinding(TouchEffect.LongPressCommandProperty, nameof(LongPressedCommand)). The derp is strong. Thanks for your help though!
Just glad you figured it out!
Is there a TouchEffect for Maui for iOS/Android and Windows platforms? Is there library for Maui doing what the TouchEffect is doing for Xamarin?
You’ve just commented on the issue for the .NET MAUI Community Toolkit 😅 it’s being worked on
@@jfversluis when is it going to be released? We've converted our xamarin forms project to Maui, but the non-touch event in Maui is a show stopper right now.
@@kevinqy you can follow the progress here: github.com/CommunityToolkit/Maui/pull/1063
It should never be a showstopper though. A plugin is work that someone else have done which you could have done yourself. Everything in there you can implement in your own app without having to wait for this plugin.
Great and useful video gelard, thank you.
Can you make a video, the way to lazy loading a list of items by 10 items , just please explain that using code behind not MVVM 🙏
Thanks for the idea!
@@jfversluis I am waiting that, please let it next video, 🙏😅
Hi Gerald, great video, very useful stuff.
I'd like the ability to use these animations in styles to set let's say, all my buttons to have a pressed scaling without needing to set on every one
If I do this
It complains with "writable property expected" - would the properties be able to have setters as well as getters easily enough, or would that break the whole paradigm?
Cheers!
That's a good question, I should look into that. I see that I'm a bit late with my answer. Did you figure it out yet? I guess another way to go about this is to create a base Button (or VisualElement if you want it for everything), apply the animation to that and inherit all your things from that object. But that is a lot of work... I'm not sure if this way that you propose is supported.
Looks like you should be able to: docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/effects/passing-parameters/attached-properties#Consuming_the_Effect_with_a_Style
If you can't get it to work open an issue at aka.ms/xct so more people can chime in
how that can work on an item of collectionview
It doesn’t work now?
The Long Press unfortunately doesn't Work on an Image :(
If you think something is wrong make sure to check if there is an issue for it or create one!
Dear Gerald:
Could you please demo how to detect the touch status (touch down/touch up) in command object ?
Thanks million
Isn't that the pressed and unpressed states in the TouchEffect? What do you have issues with?
@@jfversluis just to avoid scrolling listview while rebind data if reach specified interval of seconds
Never mind
I found alternative solution
Thank you
How can long press android application icon to add actions? Like long press clock icon
Has
Start screen saver
Start stopwatch
Create new timer
Create new alarm
You need Xamarin.Essentials App Actions for that