I can imagine that there could be problems with a ScrollView because the pan up/down gestures could be interpreted as scrolling and therefore the DeltaDistance values may be corrupt. That would depend on how it is implemented on each platform.
But it works for me in a StackLayout and I have no idea why it shouldn't work in an AbsoluteLayout. I didn't test the latter though.
I have a ListView into a ContentPage with a ViewModel as the Context of the Page .
I set the ItemSource of that list Which is an ObservableCollection of other objects .
When i try to call it LongPressCommand of 1 item seems like the binding context of that item has changed to the class of the object type of the ItemSource and obviously the command cant be found.
Just add the ElementSource extension somewhere in your project and add the namspace in the header of your xaml file. Then your list would look like this:
I tried the sample app found in GitHub, but it fails to launch on the iPhone simulator.
ERR: There was an error launching the application: Failed to lookup the process ID of GestureSample after successful launch. Perhaps it crashed after launch.
Two finger pan simultaneously with pinch and rotate on all platforms
Introduce gesture throttling on all platforms with MR.Gestures.Settings.MinimumDelta* properties
Add Center to all EventArgs
This version requires Xamarin.Forms and Xamarin.Forms.Windows 1.4.3.6358-pre2.
Please keep in mind that Xamarin.Forms for Windows is still only a preview release.
I also had a hard time getting it to work on that platform. Unfortunately Windows Phone 8.1 swallows some events to gain better performance. I could not find a way to handle all events on all controls. See http://www.mrgestures.com/#Compatibility for details.
I also neither have a touchscreen for my desktop computer nor a Windows tablet. So I could test all the Windows Store stuff only with the mouse. This leaves LongPress, Pinch and Rotate untested on that platform. But the code for WinPhone 8.1 and Windows Store is the same, so I do hope that it will work. Please let me know if anybody could test it on a Windows tablet or desktop.
@binbin: For learning purposes, you can download his sample app: https://github.com/MichaelRumpler/GestureSample You could change that app however you want. So you can essentially turn it into your app, for learning purposes. You just won't be able to change the name of the app ("GestureSample"), until you buy a license.
Hi @MichaelRumpler
I'm trying to implement swipe functionality in ListView cell on Android and ios to reveal some buttons when user swipes a cell. Can I do this with MRGestures? I see that it has Swiped event, but I probably will need to have some animation during the swipe and there is no "Swiping" event.
A swipe is a pan where the last finger which leaves the screen was still moving fast enough when it was lifted. So you cannot know if it was a swipe or pan until the last finger left the screen. As long as a finger is down and moving you get Panning events and when it leaves the screen, you either get Swiped (if the finger still moves fast enough and Swiped is handled) or Panned.
For your use case though, check out if the ContextActions are enough. On iOS they do exactly what you want. Unfortunately Xamarin thinks that the standard gesture to show the ContextActions on Android is a long tap. If your client thinks the same way, you could go with that and you wouldn't have to do any custom animation.
@MichaelRumpler
Thanks for the quick answer. I think panning event is what I looked for.
Unfortunately I need swipe on both platforms, so ContextActions are not good enough. On iOS it's almost there, but I need buttons with icons, while ContextActions support icons for MenuItem only on Android.
Do you have any example implementing such animation?
I added it to my todo list. But unfortunately I have to continue work on my app now. I worked on the Windows platform of MR.Gestures for the last two weeks and got behind schedule with the app. So don't expect anything in the next two weeks.
@MichaelRumpler Hello! I am using the siwpe feature of MR.Gestures, but it picks up every swipe Direction as "Not Clear". Is it just really sensitive? Do you think it is the phone's issue? Thanks!
@MichaelRumpler
The event Tapping and LongPressed aren't work too.
Can't find any temporary fix.
Have to disable the Up/Down event on ViewCell and wait for fix.
Are you still talking about scrolling a ListView? Tapping and LongPressed are not raised during a pan.
For other elements see http://www.mrgestures.com/#Compatibility. Everything should work on Android.
@MichaelRumpler I have another question: How come the swipe doesn't detect listview.ItemSelected?
Is it something that you are working on for the next update?
@CodyRousseau you mean the mr:ListView does not raise ItemSelected? Yes, that is an open issue. It seems like some gestures on some platforms cannot be handled by me and Xamarin at the same time. But you can bind to SelectedItem instead. This works on all platforms.
@MichaelRumpler I have bought licence to your gesture control and it works great,
Now what I am tring to do is show up an image , add events like double tap to it for it to zoom , and move the image around the container, now double tapping it should get it back to the same size and the same location as it was earlier in the container, though it dosent seem to do that, I had a look at your sample on github and coudent find much help there either.
I can't seem to make it work, I'm trying to make a simple tapped gesture, but my event is not called, do I need to buy the license in order for this to work?
MR.Gestures.StackLayout favStack = new MR.Gestures.StackLayout () { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Fill, VerticalOptions = LayoutOptions.Fill, Padding = new Thickness(5,5), Children = {favIcon, favLabel} }; favStack.Tapped += (s, e) => { Debug.WriteLine("Code: Red Tapped"); };
Tapped is only raised in my internal Tapping handler, when TapEventArgs.NumberOfTaps equals 1. Similarly DoubleTapped is only raised, when it is 2.
When you have no license, then all properties of the EventArgs will remain at their defaults (i.e. 0), so Tapped and DoubleTapped will only be raised when you use a valid LicenseKey.
You can always add your code to the GestureSample, or you could even temporarily rename your own app to "GestureSample" and use its LicenseKey.
I would like to access the color information of the pixel tapped on an image.
I don't think it's possible in your plugin as for now, do you think it could be in future version ?
You get the coordinates of all touching points in the property Touches of the event args. See mrgestures.com/#EventArgs. With these coordinates you can look up in your image, which color the pixel at that position has.
However, a finger always touches more than one pixel, so this cannot be very accurate.
@MichaelRumpler
Thanks for your quick reply.
I don't think that your solution could work in my case, the image could be resize using pinch. So when tapping on it, the coordinates on the screen may be not the same as the coordinates on the image.
Do you think of another solution ?
But you know, how your image has been scaled, translated and rotated. You have all the data you need to calculate the coordinates within the image.
What you need is a side case which nobody else but you will ever want. I don't know, how to do it. It is not related to gesture recognition. So I will not add it to my library. Sorry.
@MichaelRumpler
Yes i understand that it's not really a usual usecase of your plugin.
I'm gonna try an other way to do what i want but i will use your plugin to get the coordinates of the tap anymay.
@MichaelRumpler Is there or will there be a way to see if a "NotClear" swipe is more left or more right? It would be great when the touch coordinates of the "first touch" would be accessible so we could check that on our own.
You only get the Direction in the SwipeEventArgs. However, there will be Panning events as long as the finger moves on the screen. So you could remember the last PanEventArgs in the Panning event and then check its Velocity in the Swiped event. In PanEventArgs.Velocity you get X and Y values.
The coordinates of the first touch are sent to you in the Down event (won't be much different than in the first Panning).
I'm having issues with this library. Using the Image with a TappedCommand. The tappable area seems to be only on the left side of the image. In portrait mode this is largely fine, but when running in Landscape taps do not register 99.9999% of the time. If you very delicately tap the extreme left edge of the Image it might decide to register
This happens on both the emulator (standard 10 inch tablet profile) and a Nexus 10 device running 4.4.3.
I also have a Nexus 10, but I don't see this behavior. Could you please try the GestureSample and see if this happens there too?
Or do you maybe have any other elements overlapping the Image?
I'll have a look at the sample tomorrow, but I've included a screenshot that shows my ViewCell which exhibits the issue.
The blue boxes represent cells in a single row Grid. The Image is in the final Grid Column which is set as "Auto" width and height. The red line indicates the area of the image that seems to respond to the tap event in landscape mode.
The image is square, though anything that isn't grey is transparent, but that shouldn't be an issue.
This ViewCell is used inside a standard Xamarin ListView
It looks like your library is fine and there is some bug with the Master Detail Page. I turned on layout outlines and created a Master Detail Page with a blue Master and green Detail. You'll notice a layout line by the edge of the Detail. Unfortunately this is stealing the tap events and just happens to be where my image is.
UPDATE>
It's possible that there is a scollbar responsible for this dead spot. So presumably a MasterDetailPage includes a scrollview for the Detail and allocates ~60 pixels on the right side for it.
Is there any successful code sample available for implementing zoom on Image Pinching? The sample seemed to have this commented out, and I didn't see any implementation.
Posts
I can imagine that there could be problems with a ScrollView because the pan up/down gestures could be interpreted as scrolling and therefore the DeltaDistance values may be corrupt. That would depend on how it is implemented on each platform.
But it works for me in a StackLayout and I have no idea why it shouldn't work in an AbsoluteLayout. I didn't test the latter though.
Hello @MichaelRumpler,
I have a ListView into a ContentPage with a ViewModel as the Context of the Page .
I set the ItemSource of that list Which is an ObservableCollection of other objects .
When i try to call it LongPressCommand of 1 item seems like the binding context of that item has changed to the class of the object type of the ItemSource and obviously the command cant be found.
My code:
ContentPage
<mr:ListView ItemsSource = "{Binding List}" SelectedItem ="{Binding Item}"> <ListView.ItemTemplate> <DataTemplate> <mr:ViewCell LongPressingCommand="{Binding CellLongPressing} > <mr:ViewCell.View> ... </mr:ViewCell.View> </mr:ViewCell> </DataTemplate> </ListView.ItemTemplate> </mr:ListView>ViewModel
public ICommand CellLongPressing { get; private set; } CellLongPressing = new Command<MR.Gestures.LongPressEventArgs>(...); .. Etc.@zurbas
The BindingContext in the ViewCell is indeed one item of your List. Your CellLongPressing command therefore cannot be found.
I use Keith Romes solution from https://forums.xamarin.com/discussion/comment/105285/#Comment_105285. This is very easy and works like a charm.
Just add the ElementSource extension somewhere in your project and add the namspace in the header of your xaml file. Then your list would look like this:
<mr:ListView ItemsSource="{Binding List}" SelectedItem="{Binding Item}" x:Name="theList"> <ListView.ItemTemplate> <DataTemplate> <mr:ViewCell LongPressingCommand="{Binding Path=BindingContext.CellLongPressing, Source={util:ElementSource theList}}"> <mr:ViewCell.View> ... </mr:ViewCell.View> </mr:ViewCell> </DataTemplate> </ListView.ItemTemplate> </mr:ListView>I tried the sample app found in GitHub, but it fails to launch on the iPhone simulator.
ERR: There was an error launching the application: Failed to lookup the process ID of GestureSample after successful launch. Perhaps it crashed after launch.
Never mind. I quit Xamarin Studio and the simulator, then it worked fine.
Hi, I created a ListViewCell with Down/Up event.
private void OnDown(object sender, DownUpEventArgs e) { BackgroundColor = Color.Red; } private void OnUp (object sender, DownUpEventArgs e) { BackgroundColor = Color.Transparent; }When i tap a Cell then move up/down then release (that make the listview scroll),
the Up event wasn't fired.
@SquallLeonhart.1032
Unfortunately this kind of stuff is handled differently on every platform. Which did you try?
I'll have a look on it.
I just released MR.Gestures, version 1.2.0-pre1.
These things changed:
This version requires Xamarin.Forms and Xamarin.Forms.Windows 1.4.3.6358-pre2.
Please keep in mind that Xamarin.Forms for Windows is still only a preview release.
I also had a hard time getting it to work on that platform. Unfortunately Windows Phone 8.1 swallows some events to gain better performance. I could not find a way to handle all events on all controls. See http://www.mrgestures.com/#Compatibility for details.
I also neither have a touchscreen for my desktop computer nor a Windows tablet. So I could test all the Windows Store stuff only with the mouse. This leaves LongPress, Pinch and Rotate untested on that platform. But the code for WinPhone 8.1 and Windows Store is the same, so I do hope that it will work. Please let me know if anybody could test it on a Windows tablet or desktop.
@binbin: For learning purposes, you can download his sample app: https://github.com/MichaelRumpler/GestureSample You could change that app however you want. So you can essentially turn it into your app, for learning purposes. You just won't be able to change the name of the app ("GestureSample"), until you buy a license.
(My company purchased a license to MR.Gestures today, and it is working for us, on both Android and iOS.)
Hi @MichaelRumpler
I'm trying to implement swipe functionality in ListView cell on Android and ios to reveal some buttons when user swipes a cell. Can I do this with MRGestures? I see that it has Swiped event, but I probably will need to have some animation during the swipe and there is no "Swiping" event.
Hi @G1V2
A swipe is a pan where the last finger which leaves the screen was still moving fast enough when it was lifted. So you cannot know if it was a swipe or pan until the last finger left the screen. As long as a finger is down and moving you get Panning events and when it leaves the screen, you either get Swiped (if the finger still moves fast enough and Swiped is handled) or Panned.
For your use case though, check out if the ContextActions are enough. On iOS they do exactly what you want. Unfortunately Xamarin thinks that the standard gesture to show the ContextActions on Android is a long tap. If your client thinks the same way, you could go with that and you wouldn't have to do any custom animation.
@MichaelRumpler
Thanks for the quick answer. I think panning event is what I looked for.
Unfortunately I need swipe on both platforms, so ContextActions are not good enough. On iOS it's almost there, but I need buttons with icons, while ContextActions support icons for MenuItem only on Android.
Do you have any example implementing such animation?
@G1V2
No, sorry. I didn't do that yet.
@MichaelRumpler
It happened on Android, iOS has no problem.
I have a 100 records ListView,
@SquallLeonhart.1032
I added it to my todo list. But unfortunately I have to continue work on my app now. I worked on the Windows platform of MR.Gestures for the last two weeks and got behind schedule with the app. So don't expect anything in the next two weeks.
@MichaelRumpler Hello! I am using the siwpe feature of MR.Gestures, but it picks up every swipe Direction as "Not Clear". Is it just really sensitive? Do you think it is the phone's issue? Thanks!
@CodyRousseau Then the LicenseKey does not match the app name. See the FAQs.
I will throw an exception if these do not match in the next version.
@MichaelRumpler
The event Tapping and LongPressed aren't work too.
Can't find any temporary fix.
Have to disable the Up/Down event on ViewCell and wait for fix.
@SquallLeonhart.1032
Are you still talking about scrolling a ListView? Tapping and LongPressed are not raised during a pan.
For other elements see http://www.mrgestures.com/#Compatibility. Everything should work on Android.
@MichaelRumpler I have another question: How come the swipe doesn't detect listview.ItemSelected?
Is it something that you are working on for the next update?
@CodyRousseau you mean the mr:ListView does not raise ItemSelected? Yes, that is an open issue. It seems like some gestures on some platforms cannot be handled by me and Xamarin at the same time. But you can bind to SelectedItem instead. This works on all platforms.
@MichaelRumpler I have bought licence to your gesture control and it works great,
Now what I am tring to do is show up an image , add events like double tap to it for it to zoom , and move the image around the container, now double tapping it should get it back to the same size and the same location as it was earlier in the container, though it dosent seem to do that, I had a look at your sample on github and coudent find much help there either.
Sample code
<?xml version="1.0" encoding="utf-8" ?> <mr:ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures" x:Class="ECS.Intranet.Mobile.View.ContentPageXaml" Title="ContentPage Sample" TappingCommand="{Binding TappingCommand}" TappedCommand="{Binding TappedCommand}" DoubleTappedCommand="{Binding DoubleTappedCommand}" PanningCommand="{Binding PanningCommand}" PannedCommand="{Binding PannedCommand}" SwipedCommand="{Binding SwipedCommand}" PinchingCommand="{Binding PinchingCommand}" PinchedCommand="{Binding PinchedCommand}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="45" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0"> <Button Command="{Binding AddCharCommand}" BackgroundColor="Transparent" Image="back.png" CommandParameter="5"/> <Picker x:Name="pagePicker" VerticalOptions="Center" WidthRequest="60"></Picker> <Label Text="{Binding TotalPage}" FontSize="18" VerticalOptions="Center"/> </StackLayout> <RelativeLayout Grid.Row="1" Grid.Column="0"> <ContentView Padding="2" BackgroundColor="Black" RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,,Factor=0.90}"> <Image Source="{Binding ImageSource}" Scale="{Binding Scale}" TranslationX="{Binding TranslationX}" TranslationY="{Binding TranslationY}" AnchorX="{Binding AnchorX}" AnchorY="{Binding AnchorY}" /> </ContentView> <ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.33}" /> </RelativeLayout> </Grid> </mr:ContentPage>All i do Now is on the event is
protected override void OnDoubleTapped(MR.Gestures.TapEventArgs e) { base.OnDoubleTapped(e); if (this.scale != 1) { Scale = 1; } else { Scale = this.scale + 0.5; } }So the double tap will resize my image but tapping it back resets it back to the same scale but not at the same location it was initially.
@Lokesha
Glad that you like it.
You need to reset
TranslationXandTranslationYtoo to move the image back to its original location.Also be careful about the line
scaleis adouble, so comparisons like==or!=may not work as expected.You should rather write
I can't seem to make it work, I'm trying to make a simple tapped gesture, but my event is not called, do I need to buy the license in order for this to work?
MR.Gestures.StackLayout favStack = new MR.Gestures.StackLayout () { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Fill, VerticalOptions = LayoutOptions.Fill, Padding = new Thickness(5,5), Children = {favIcon, favLabel} }; favStack.Tapped += (s, e) => { Debug.WriteLine("Code: Red Tapped"); };Nevermind, I tried other Gestures like Up, Down and Tapping; and they worked, though I don't know why Tapped is not working.
@LuisN
Tapped is only raised in my internal Tapping handler, when TapEventArgs.NumberOfTaps equals 1. Similarly DoubleTapped is only raised, when it is 2.
When you have no license, then all properties of the EventArgs will remain at their defaults (i.e. 0), so Tapped and DoubleTapped will only be raised when you use a valid LicenseKey.
You can always add your code to the GestureSample, or you could even temporarily rename your own app to "GestureSample" and use its LicenseKey.
Hi @MichaelRumpler,
I would like to access the color information of the pixel tapped on an image.
I don't think it's possible in your plugin as for now, do you think it could be in future version ?
Regards.
@PhilippeLEROY
You get the coordinates of all touching points in the property
Touchesof the event args. See mrgestures.com/#EventArgs. With these coordinates you can look up in your image, which color the pixel at that position has.However, a finger always touches more than one pixel, so this cannot be very accurate.
@MichaelRumpler
Thanks for your quick reply.
I don't think that your solution could work in my case, the image could be resize using pinch. So when tapping on it, the coordinates on the screen may be not the same as the coordinates on the image.
Do you think of another solution ?
@PhilippeLEROY
But you know, how your image has been scaled, translated and rotated. You have all the data you need to calculate the coordinates within the image.
What you need is a side case which nobody else but you will ever want. I don't know, how to do it. It is not related to gesture recognition. So I will not add it to my library. Sorry.
@MichaelRumpler
Yes i understand that it's not really a usual usecase of your plugin.
I'm gonna try an other way to do what i want but i will use your plugin to get the coordinates of the tap anymay.
@MichaelRumpler Is there or will there be a way to see if a "NotClear" swipe is more left or more right? It would be great when the touch coordinates of the "first touch" would be accessible so we could check that on our own.
@Maru
You only get the Direction in the SwipeEventArgs. However, there will be Panning events as long as the finger moves on the screen. So you could remember the last PanEventArgs in the Panning event and then check its Velocity in the Swiped event. In
PanEventArgs.Velocityyou get X and Y values.The coordinates of the first touch are sent to you in the Down event (won't be much different than in the first Panning).
I'm having issues with this library. Using the Image with a TappedCommand. The tappable area seems to be only on the left side of the image. In portrait mode this is largely fine, but when running in Landscape taps do not register 99.9999% of the time. If you very delicately tap the extreme left edge of the Image it might decide to register
This happens on both the emulator (standard 10 inch tablet profile) and a Nexus 10 device running 4.4.3.
Any help appreciated.
@Matthew.4307
I also have a Nexus 10, but I don't see this behavior. Could you please try the GestureSample and see if this happens there too?
Or do you maybe have any other elements overlapping the Image?
I'll have a look at the sample tomorrow, but I've included a screenshot that shows my ViewCell which exhibits the issue.
The blue boxes represent cells in a single row Grid. The Image is in the final Grid Column which is set as "Auto" width and height. The red line indicates the area of the image that seems to respond to the tap event in landscape mode.
The image is square, though anything that isn't grey is transparent, but that shouldn't be an issue.
This ViewCell is used inside a standard Xamarin ListView
It looks like your library is fine and there is some bug with the Master Detail Page. I turned on layout outlines and created a Master Detail Page with a blue Master and green Detail. You'll notice a layout line by the edge of the Detail. Unfortunately this is stealing the tap events and just happens to be where my image is.
UPDATE>
It's possible that there is a scollbar responsible for this dead spot. So presumably a MasterDetailPage includes a scrollview for the Detail and allocates ~60 pixels on the right side for it.
@Matthew.4307
Could you please send me a demo project. Then I'll try to find a workaround.
Is there any successful code sample available for implementing zoom on Image Pinching? The sample seemed to have this commented out, and I didn't see any implementation.