I'm encountering a problem while attempting to add functionality like pinch-zoom to an application that features an Image control inside of a ScrollView, which is inside a FlipView. The Image control and ScrollView control are in the ItemTemplate of the FlipView.
The idea is that if the user pinch-zooms on the Image it will activate code which will create and display an enlarged version of the image in the Image control. (The Image control in this case contains a PDF page, so we want a bigger version of the PDF page, instead of just an enlarged and fuzzier view of the PDF page).
If I attach a ManipulationDelta event handler to the Image, it will catch ManipulationDelta events produced by the pinch-zoom gesture, which I can then use to create the PDF zoom effect. However...now it will not catch scroll (drag?) gestures. Or rather, these too get caught by the ManipulationDelta event handler. I'd rather avoid having to implement code at this point to handle scrolling programmatically. Do I have any options for somehow bubbling up (or "over"?) the ManipulationDelta events to whatever would handle the scrolling? I would think this would happen already, the event would bubble up to the ScrollView which would then handle scrolling. But it appears to not be happening that way.
I have e.Handled set to false in the ManipulationDelta event handler. And the ManipulationMode on the IMage control is set to "All". I've tried "Scale" but this didn't help.
Thank you!
The ScrollViewer in WinRT is optimized for performance and uses DirectManpulation under the hood. That's why it's tricky to have both scrolling from the ScrollViewer and gestures inside it.
This blog post from Rob Caplan (MS employee) gives more information:
http://blogs.msdn.com/b/wsdevsol/archive/2013/02/16/where-did-all-my-gestures-go.aspx
Unfortunately there is no good solution if the app needs both scrolling and gestures (for example, to detect CrossSlides against the scrolling). In this case the only option to get the Pointer messages everywhere is to disable Direct Manipulation everywhere, but that disables scrolling as well. To get that back the app will need to detect the scrolling gestures itself and then navigate the ScrollViewer to the new location with ScrollToHorizontalOffset or ScrollToVerticalOffset or by updating the SelectedIndex. This is tricky and will be noticeably slower than letting the ScrollViewer do its thing. It should be avoided if at all possible.
Hope this helps
Related
Im using VIEWER_RESIZE_EVENT to catch when viewer resize but it raise all the time even it doesnt has any change (take a look attached pic). And when i use that method, objects do not highlight when mouse move over anymore. I solved the problem by different way is catch resize div event, it works perfectly. SoVIEWER_RESIZE_EVENT really has a problem or i misunderstand how to use it?
Appreciated any comments.
The VIEWER_RESIZE_EVENT definitely shouldn't be called all the time. Such a behavior is usually a sign of some problematic JavaScript code where, for example, some piece of code reacts to this event and (accidentally or intentionally) causes some change in the viewer size, causing an infinite loop of resize events.
When you try any of the official sample apps, you'll see that the event is really only triggered when the viewer canvas size actually changes.
Now I'm developing windows phone 8.1 app with WinRT
I'm trying to support swipe-right-to-go-back gesture in my app.
I try to capture the manipulation events on my page. My page's root is a grid and have a ListView inside. I used the UIElement.AddHandler method with "handledEventsToo=true" to add the event handlers. But when I touch the screen, only the ManipulationStarting event is fired, other events seems to be eat by listview.
Could anyone tell me about the manipulation event behavior or other methods to implement this feature? Thanks!!
You won't normally capture events on LisView, beacause it has a ScrollViewer which intercepts them.
There is a way to do it - you will have to disable ScrollViewer and then perfrom some actions when the events are fired and perform scrolling manually. This answer will guide you.
In case someone encounters this page, I spent the better part of a week figuring out why manipulation events were only firing half the time on my UWP charts using the winRT xaml toolkit.
You may need to check that the background is not null on whatever element has the event handler attached. Templated controls are not necessarily hit test visible unless they have one. Otherwise, the input can go right through to the element behind it.
https://msdn.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-routed-events-overview
I simply cannot find a way to get a ScrollViewer to share manipulation events. As soon as I put something inside a ScrollViewer and then set that items ManipulationMode, the ScrollViewer stops working
I have read that the ScrollViewer handles all of these events and stops them bubbling up, but there MUST be a way to get around this without disabling the ScrollViewer's scrolling behaviour.
I am very simply trying to implement a horizontal swipe feature on items in an ItemsControl, which is inside a ScrollViewer. (I have disabled the ScrollViewer's Horizontal scrolling mechanisms to no avail)
Without the ScrollViewer wrapped around it, everything works fine.
Any ideas anyone ? I cannot believe that this simple UI gesture cannot be implemented.
Many thanks
Dean
You can use a ListView to get the built-in cross-slide/swipe behavior if that's what you need. Otherwise - the last time I had to implement dragging out of a list - I put a rectangle in front of the ScrollViewer and captured all input events and then manually handled ScrollViewer scrolling. It's a bad idea, but there is no better choice yet.
On our page we have some iframes in a long horizontally-scrolling <div>. If the user is using a mouse they can scroll with the scrollbars and we would like them to be able to select text within the iframes. If they are using touch only however, the scrollbars are a hassle and I would like to overlay a transparent element over the whole thing to give them the ability to scroll easily by dragging, this of course sacrifices the select-text feature but makes sense in that scenario.
Which gets me to my question, is there a way to reliably detect if a user is interacting with a webpage via a mouse?
Everything I've seen on detecting touch or mouse is that touch will broadcast mouse events so it is very difficult to detect touch OR mouse (not to mention that you can have both). My problem is simpler - it is whether the user has interacted with the page via a mouse.
Can anyone think of a way to check this reliably?
A mouse can do one single thing a touch device can never do - move without having any buttons pressed. So I'd just install an onMouseMove event on page load, and if it triggers without buttons pressed mark the user as a mouse user. You could then persist this through a cookie or LocalStorage since the flag will not change within the same environment, and remove the event right away. The precise way of implementing the single-fire event depends on which library you use (if any at all), but it should be easy with Mootools/JQuery docs in hand.
In general I'd recommend the easier route of just checking for a touch interface in most cases :
if('ontouchstart'in window)
{
/* it's a touch device */
}
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.