Click here to Skip to main content
15,847,653 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have used for years and have developed a number of applications for my own use.
I have even migrated some of them to Android for use on my Samsung phone and my grand-childrens Android tablets.
Three of these apps relate to the management and display of family photos.
I have recently bought a Surface Book and I thought it would be easy to replicate the Android / IOS interface for manipulating photos. Swipe left and right for next and previous. Pinch gestures to zoom in and out.

I am using Visual Studio Cummunity 2015 on Windows 10.

I had assumed that the latest version of the PictureBox control would have Swipe (or Slide or Flick) and Zoom events. But no.
I thought it would be relatively easy to extend the control as I did in Android to add these functions to ImageView.

I found the GestureRecognizer class in the windows.ui.input namespace but this appears to only work under the Universal Windows Platform (UWP) which would require a substantial redesign.

Is there any way to implement swipe and pinch zoom on a picturebox in a conventional VB.NET application developed under Visual Studio?

What I have tried:

I have searched various forums. I have built a small test application under UWP VB with XAML which works, but implies rebuilding all my forms in XAML and probably other major changes I have not yet discovered.

1 solution

No, you have to implement such gesture recognition from scratch. It should not be too hard. A control need to have a state machine with phased of swiping: 1) waiting; 2) mouse button pressed down; 3) mouse moved by a sufficient distance; direction of swipe detected; 4) mouse button goes up, swipe complete (here you invoke your swipe event).

So, basically, your state machine would be the enumeration of the phases and detected swipe direction; you can combine all these states on one enumeration type with members combining phase and detected direction using | (OR) operators, them the whole machine data set would be just one field. Now, you handle "low-level" mouse events which can cause the state machine to change state MouseUp, MouseDown, MouseMove. This algorithm can be implemented with System.Windows.Forms, WPF, ASP.NET, Silverlight, and so on, so please find the links to the API elements by yourself. On top of that, create your own event arguments type for your Swipe event and create a public event instance for your custom control. This event should be invoked on the last phase of swipe detection. The idea is this: you should expect mouse events in the order described above. Any mouse event (and perhaps some other events) invoked not in the expected order break the phase sequence by setting the initial state; after successful swipe recognition and invocation of your event, the state also set to initial state value. Important point is "insufficient distance" in one swipe. The required minimal distance should be an optional value for your application. I suggest that a swipe by insufficient distance also sets the state to its initial value, without trying to wait for "continuation" of the swipe in next MouseMove event. This simple algorithm will filter out swipes which are not long and fast enough or those performed at an angle which cannot interpreted it as a swipe at certain direction. Also, you can consider only horizontal and vertical swipes (having exactly 4 directions); than you should filter only the swipes where the difference on coordinates in one of these directions clearly dominates over the perpendicular direction. The accuracy of recognition of the direction can also be an option. With some experience, you can figure out realistic set of options.

This is preliminary design of the feature which you can easily implement.

For zoom, the approach depends on the UI library you are using. The solutions are pretty obvious but different. If you clarify on that and ask me to elaborate on that, I'll try to help with it, too.

Just in case, look at my past answers, but don't expect a final solution:
Zoom image in C# .net mouse wheel[^],
Read Big Tiff and JPEG files (>(23000 x 23000) pix) in a stream. And display part of it to the screen in realtime.[^].
For WPF, zooming can be used with one or two of these things:
UIElement.RenderTransform Property (System.Windows)[^],
Viewbox Class (System.Windows.Controls)[^].

Share this answer
Maciej Los 8-Feb-16 15:54pm    
Sergey Alexandrovich Kryukov 8-Feb-16 16:00pm    
Thank you, Maciej,
dburden99 10-Feb-16 3:37am    
Many thanks. I will try that.
Swipe should be OK but zoom on pinch, and pan will get pretty complicated.
I don't understand Microsoft's strategy for app development for Windows Phone, Surface Pro (and Surface Book in tablet mode). Given the huge number of Apps available for Android devices, surely making migration from Java to a Visual Studio language such as VB, C# or C++ easy would be essential. Including all the swipe and pinch zoom stuff needed to support a phone / tablet interface and which is included in Java for Android. And Objective C for IOS I believe.
I don't intend to develop for Windows App Store, just things for my own use. However this does seem to be an odd strategy.
Sergey Alexandrovich Kryukov 10-Feb-16 4:00am    
You are very welcome.

Well, zoom/pan/scroll certainly needs considerable work but I would not call it tricky. Probably, you are talking about XAML-based technologies. I tend to criticize certain aspects of them, but I find zooming or, generally, rendering transform approach quite natural; it is highly universal. Anyway, if you need the feature, you have to do that work... :-)


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900