MR.Gestures handles ALL touch gestures

2456710

Posts

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    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.

  • zurbaszurbas alberto zurbano ESMember

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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>
    
  • SwappyTimSwappyTim Tim Nichols USMember ✭✭

    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.

  • SwappyTimSwappyTim Tim Nichols USMember ✭✭

    Never mind. I quit Xamarin Studio and the simulator, then it worked fine.

  • SquallLeonhart.1032SquallLeonhart.1032 Squall Leonhart USMember ✭✭

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @SquallLeonhart.1032

    Unfortunately this kind of stuff is handled differently on every platform. Which did you try?
    I'll have a look on it.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    I just released MR.Gestures, version 1.2.0-pre1.

    These things changed:

    • Add support for WinPhone 8.1 and Windows Store
    • Drop support for 32 bit iOS apps
    • 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.

  • SteveShawSteveShaw Steve Shaw USMember
    edited April 2015

    @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.

  • SteveShawSteveShaw Steve Shaw USMember
    edited April 2015

    (My company purchased a license to MR.Gestures today, and it is working for us, on both Android and iOS.)

  • GrishaVinevichGrishaVinevich Grisha Vinevich ILMember ✭✭

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    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.

  • GrishaVinevichGrishaVinevich Grisha Vinevich ILMember ✭✭

    @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?

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @G1V2

    No, sorry. I didn't do that yet.

  • SquallLeonhart.1032SquallLeonhart.1032 Squall Leonhart USMember ✭✭

    @MichaelRumpler

    It happened on Android, iOS has no problem.

    I have a 100 records ListView,

    • I Tapdown, the Down event fired => Cell change color.
    • Move my finger to make the ListView Scroll
    • Then i release, the Up event not fired.
  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • CodyRousseauCodyRousseau Cody Rousseau USUniversity ✭✭

    @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!

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • SquallLeonhart.1032SquallLeonhart.1032 Squall Leonhart USMember ✭✭

    @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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • CodyRousseauCodyRousseau Cody Rousseau USUniversity ✭✭

    @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?

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • LokeshaLokesha Lokesh Awasthi USMember

    @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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @Lokesha

    Glad that you like it.

    You need to reset TranslationX and TranslationY too to move the image back to its original location.

    Also be careful about the line

    if (this.scale != 1)
    

    scale is a double, so comparisons like == or != may not work as expected.
    You should rather write

    if (Math.Abs(this.scale - 1) < 0.0001)   // or another very small value
    
  • LuisAplitoLuisAplito Luis Apólito DOMember ✭✭
    edited June 2015

    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"); };

  • LuisAplitoLuisAplito Luis Apólito DOMember ✭✭

    Nevermind, I tried other Gestures like Up, Down and Tapping; and they worked, though I don't know why Tapped is not working.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • PhilippeLEROYPhilippeLEROY Philippe LEROY FRUniversity

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭
    edited June 2015

    @PhilippeLEROY

    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.

  • PhilippeLEROYPhilippeLEROY Philippe LEROY FRUniversity

    @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 ?

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.

  • PhilippeLEROYPhilippeLEROY Philippe LEROY FRUniversity

    @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.

  • MaruMaru Jan Malte Dittmer DEMember ✭✭

    @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. :)

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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.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).

  • Matthew.4307Matthew.4307 Matthew USMember ✭✭✭

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @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?

  • Matthew.4307Matthew.4307 Matthew USMember ✭✭✭

    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

  • Matthew.4307Matthew.4307 Matthew USMember ✭✭✭
    edited June 2015

    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.

  • MichaelRumplerMichaelRumpler Michael Rumpler ATMember ✭✭✭✭

    @Matthew.4307

    Could you please send me a demo project. Then I'll try to find a workaround.

  • KeithRoweKeithRowe Keith Rowe USMember

    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.

Sign In or Register to comment.