In my nativescript app I noticed that sometimes the tap does not trigger right a way. I have to tap several times to trigger the event. This happens on both, android and ios.
How can I increase the tap hot zone? What else could be causing this to happen?
Thank you.
P.S. I tried increasing the padding of the element whose tap event I am capturing, but that did not seem to help.
I often increase the height and width of the view that have the tap event. You can give it a try.
There are a few factors at play here.
First, when you intercept a page-level event in NativeScript it seems to stop events from other widgets from firing. For example, if you tap on a text field but have a page-level listener for tap events, the tap on the TextField will be intercepted by the page-level listener.
Second, Double-tapping seems to exploit a timing issue in events, allowing the tap event to bubble up to the next listening widget.
Finally, when you have padding on the element you're trying to tap, the tap does not register on the padded areas. It will appear that you can only tap in the middle of the widget (inside of the padded area). In my case, the TextField on which I had padding had to be tapped directly in the vertical center (and that was with a padding of 5px).
To test it, try removing the padding from the element and see if the tapping works normally again.
I was able to create a very smooth / natural experience with the software keyboard by doing the following:
Wrap the TextField in a StackLayout and putting padding on the StackLayout instead of the widget
Add the page-level listener that dismisses the software keyboard ONLY when the textfield is tapped, and remove it once that listener is fired.
ex: XML file
<StackLayout id="loginFieldWrapper" padding="5 5 5 5">
<TextView hint="Enter Login ID" id="loginField" keyboardType="number" returnKeyType="done" returnPress="{{hideKeyboard}}" />
</StackLayout>
Backing javascript file
loginField.on(gestures.GestureTypes.tap, function(args) {
page.on(gestures.GestureTypes.tap, function (args) {
loginField.dismissSoftInput();
page.off(gestures.GestureTypes.tap);
});
});
Wrap the item inside some layout to increase the clickable area
<StackLayout (tap)="select(param)">
<Label text="{{description}}" textWrap="true" marginTop="40px" marginBottom="40px">
</Label>
</StackLayout>
Related
Using Xamarin Forms, I'm trying to understand at which offset during swiping will my SwipeView trigger the Invoked event when using mode Execute and if it's possible to programmatically get this value. So far what I've seen is it seems to be around 60% of Threshold (at least for Android) but I'm curious to know if this value is available somewhere in the component. I originally thought it wouldn't be triggered until it hit Threshold but I found that it fires before it meets that value. Below is my XAML:
<SwipeView
SwipeChanging="SwipeView_SwipeChanging"
SwipeEnded="SwipeView_SwipeEnded"
SwipeStarted="SwipeView_SwipeStarted"
Threshold="80">
<SwipeView.TopItems>
<SwipeItems Mode="Execute" SwipeBehaviorOnInvoked="Close">
<SwipeItemView BackgroundColor="Transparent" Invoked="SwipeItemView_Invoked">
<Label Text="Create New Task" />
</SwipeItemView>
</SwipeItems>
</SwipeView.TopItems>
<SwipeView.Content>
...
</SwipeView.Content>
</SwipeView>
With the above example with Threshold at 80 it seems to trigger around 49/50.
I'm trying to test touchscreen of a tablet (Surface) and therefore I'm developing an app that is able to detect tap event and tell its coordinates.
I made a tap event handler to main Grid in MainPage and wrote this to MainPage.xaml.cs:
outputText.Text = e.GetPosition(this).X.ToString() + "\t";
outputText.Text += e.GetPosition(this).Y.ToString();
outputText is just a TextBlock to output coordinates.
This code should give its coordinates based on Grid, but it only gives coordinates if I touch it within TextBlock area.
How does this Tapped event handler work in a way that it only detects tap events inside TextBlock and not from entire screen (app runs in fullscreen mode)?
My MainPage.xaml looks like this:
<Grid Tapped="Grid_Tapped" PointerPressed="Grid_PointerPressed">
<TextBlock x:Name="outputText" HorizontalAlignment="Left" Height="62" Margin="806,374,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top" Width="182"/>
</Grid>
The problem is that the Grid.Background is null, so the tap events pass through it. The only place where the Grid has any actual "surface" is the TextBlock, which is exactly what you are seeing.
You will have to set the background to any other value like Transparent. This way it will handle the events properly.
I have an inkpresenter inside a scrollviewer for a Windows Phone 7 application. Often when the user starts to draw, the scrollviewer takes over mid stroke, making it hard to actually draw stuff. I tried disabling the ScrollBarVisibility when the inkpresenter needs to be used, but then the scroll viewer automatically pans back up to the top. So how can I prevent the scrollviewer from scrolling when the inkpresenter is in use, while still maintaining the scroll position?
<ScrollViewer Name="ScrollBars" VerticalScrollBarVisibility="{Binding ScrollEnabled}" >
<Canvas Height="2000">
...
<InkPresenter Name="InkCanvas" Strokes="{Binding Strokes}" Canvas.Top="500" />
</ Canvas >
</ScrollViewer >
Edit:
So I tried using the scrolling function in the codebehind to update the vertical offset, where I have a button linked to the following code:
var offset = scrollViewer.VerticalOffset;
ScrollEnabled = ScrollBarVisibility.Disabled;
scrollViewer.ScrollToVerticalOffset(offset);
Again, it just goes back up to the top. Any idea whats wrong?
After disabling the VerticalScrollBarVisibility call Scrollviewer.ScrollToVerticalOffset to manually bring the InkPresenter into view.
I've got a page with the following XAML in my application.
<ScrollViewer VerticalScrollBarVisibility="Auto">
<toolkit:WrapPanel x:Name="WrapPanelImages" />
</ScrollViewer>
In the page constructor I load a set of images into the WrapPanel. These images are being displayed correctly but scrolling isn't working very well. I'm testing this on the emulator. The problem is that if I drag and scroll downwards as soon as I let the mouse go the ScrollViewer is scrolling back to the top. So it is impossible to get to the bottom of the WrapPanel. If I add the HorizontalScrollBarVisibility property to the ScrollViewer and set it to Auto I get a long line of images that flows off the screen horizontally, but the scrolling works in that case i.e. if I scroll to the right and let go of the mouse it doesn't scroll back to the left automatically.
How can I fix this scroll-to-the-top behavior? Or is this a bug in the emulator? My AppHub registration has not been approved yet so I can't sideload the app on my phone to test it.
At a glance this sounds like the same problem you get when wrapping a TextBlock in a ScrollViewer and you haven't constrained the ScrollViewer's size to the device height.
Check your ScrollViewer isn't some very large height such that the content is fitting entirely in it without needing to scroll.
If that is the case the action of it bouncing back is normal for trying to scroll past the beginning or end of the content.
If you tap on the left hand side of the screen in Outlook then an event is triggered (in this case a checkbox appears).
I would like to know the xaml on how this is achieved. It cannot be a simple "MouseLeftButtonUp" event because if you drag your finger more than a few pixels then the event does not trigger.
In my own app I am trying to get an icon appear within a listbox that has a SelectionChanged event. The issue is that if you do not touch the small icon precisely then you are triggering the listbox event rather than the event I want to occur when pressing the image.
I think I need to wrap my image in a Canvas but then am still stuck as to what the event should be.
How do you increase the target size of the area where a user can click on your element?
What event should an image have when within a listbox (which is within a pivot) that has a SelectionChanged event? (MouseLeftButtonUp causes issues if you half drag to the next pivot and lift your finger - it triggers the MouseLeftButtonUp event)
I implemented something very similar to that behavior by making an itemtemplate where the checkbox was pushed offscreen to the left by using a negative margin.
I then created 2 visual states, one for Open and Closed. The open state set the margin to 0, bringing the checkbox back onscreen. Closed state had the negative margin.
With the fluidmove behavior, switching between states on button press was EASY. The only thing you'd have to add would be an invisible button/touch area on the left that would also trigger "opening" the checkbox column (changing state to reset the margins).
Hope that helps...
The outlook app is a native app, so it probably isn't using xaml at all.
If you're worried about the mouse events, then you should look at the gesture stuff in the silverlight toolkit, it contains tap, etc events that make a little more sense on the phone.
Increasing the target size and generally making stuff touchable: wrap it in a Button, then alter the ControlTemplate for the Button to remove the border.
If you look at the ControlTemplate for a Button, (Expression Blend, Edit Template, Edit a copy) you'll see the mechanics of the touch area. It's nothing more than padding/margin.
Thus, you can't bleed your touch region out without altering the layout and affecting other items around the control. I'd do two things:
First, I'd think about whether my whole control should be larger in the first place with good spacing around it. Is my design right?
Second, I'd cheat. I'd float a fixed sized button with no border over the area using the Translate transformation to move it around freely.
Good luck,
Luke