I have my map declared in xaml like this:
<my:Map Height="497" CredentialsProvider="key" HorizontalAlignment="Left" Margin="6,104,0,0" Name="map1" VerticalAlignment="Top" Width="450" ZoomBarVisibility="Visible" />
And I can't figure out why on double tap map is zoomed in? How can I disable this behavior?
Thanks in advance, best regards
This is the default behavior of the map control. I can only think of two ways to disable this functionality:
Create a custom MapControl and override the map's OnDoubleTap or OnZoomLevelChanged methods
Listen to the map's MapZoom or DoubleTap event handlers and utilize e.Handled = true in cases that you don't want other handlers to do anything.
Hopefully this helps a little.
Related
how can I show/hide an included (fx-include) control?
<fx:include fx:id="testCaseComboboxUI" source="TestCaseComboboxUI.fxml" visible="false" managed="false"/>
I would like to show or hide the above conditionally. Something like testCaseComboboxUI.setVisible(true)?
Many thanks
Never mind, I was able to find the answer
#FXML private Parent testCaseComboboxUI;
Reference
I have buttons in my UI that must pan the X axis left and right, and zoom in or out. The problem is it's MVVM, so I can't just do something like XAxis.Zoom() because the view model can't directly access the view. And all the zoom modifiers I can define in xaml seem to deal with reacting to mouse/touch events directly on the control.
How do I go about manipulating the axis from code without violating MVVM constraints?
EDIT: I should also add that I'm using SciChart version 3.3.1, and there's no space in current iteration to update to a new major version with potentially breaking API changes.
The simplest way to control viewport zoom from a ViewModel is to bind to VisibleRange, e.g.
View
<s:SciChartSurface>
<!-- RenderableSeries omitted -->
<s:SciChartSurface.XAxis>
<s:NumericAxis VisibleRange="{Binding XVisibleRange}"/>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis VisibleRange="{Binding YVisibleRange}"/>
</s:SciChartSurface.YAxis>
</s:SciChartSurface>
ViewModel
// Viewmodel, I assume you will implement INotifyPropertyChanged
public DoubleRange XVisibleRange { get;set; }
public DoubleRange YVisibleRange { get;set; }
This technique is used in a number of SciChart Examples to provide scrolling.
ChartModifier API
If you wish to call the methods Zoom(), Scroll() directly on the Axis, the best way to do this is in the ChartModifier API.
Using this API you can create a number of behaviours that react to mouse buttons, key input and can have direct access to the XAxis, YAxis, RenderableSeries so that you can zoom and pan.
There are examples of creating custom modifiers which can zoom and pan here. Zooming Panning programmatically is possible from within these classes so I would suggest routing your events or messages to a ChartModifierBase derived class to manipulate the chart.
The Zoom functions seem to modify the VisibleRange property, so the solution was to simply bind the VisibleRange of the axis to a viewmodel property, and then modify the property accordingly. You may also want to set AutoRange to Never.
I am working on a mobile application that has a list of items, each of which contain toggle buttons. When the Accessibility (Voice over) mode is turned on, the focus on these list items is enabled but double-tapping the item does not turn ON/OFF the toggle button.
Here's the code sample that I am using. It reads the content but the on-tap or ng-click methods are not triggered.
The below code focuses on the item but when it is double tapped, the toggle does not turn ON/OFF. Same behavior is observed on iOS and Android. Any ideas?
HTML
<ion-list>
<ion-toggle role="option" toggle-class="toggle-balanced" ng-repeat=“item in items" tabindex="-1" ng-model="item.isToggleOn" ng-change=“item.isToggleOn" on-tap=“updateSettings(item)" aria-label=“Item description,, Double Tap to toggle setting." >
<div class="pref-item-text-wrap” >Item description</div>
</ion-toggle>
</ion-list>
In the Controller:
$scope.updateSettings = function (item) {
console.log("In update settings");
}
Heres a little hack to get it working.
In you SASS, after importing Ionic, you need to overwrite the pointer-events property of the toggle component:
// accessible toggles
.item-toggle {
pointer-events: all;
.toggle {
pointer-events: none;
}
}
Please note that this makes the toggle not react to click events unless you handle that event manually on item level, eg:
<ion-toggle role="checkbox" aria-checked="{{isChecked}}" ng-model="isChecked" ng-click="isChecked=!isChecked">Toggle item</ion-toggle>
Events like gestures and keyboard events are intercepted by screen readers. You can use the correct roles to allow the screen reader to pass the appropriate event through to your JavaScript event handlers.
Also, note that when the screen reader is turned on, the gestures change. A single-tap becomes a double-tap on iOS and a double-tap becomes a triple-tap. See http://axslab.com/articles/ios-voiceover-gestures-and-keyboard-commands.php
Similar changes happen on Android.
That being said, you have many things wrong with that little bit of code:
If the tabindex is -1, it will not be focusable for a keyboard-only user and is therefore not accessible by all users. You need to make sure that the tabindex is set to 0
The behavior you are describing is more akin to a checkbox or radio role than it is to an option. You should probably be using the checkbox role.
The parent of an option must be a listbox role as can be clearly seen in the spec http://www.w3.org/TR/wai-aria/roles#option, if you do use listbox in combination with option, you need to set aria-multiselectable to true
In any case, when you implement one of these roles, you must maintain the appropriate aria-* state properties and then you must use a device-independent event handler. You may have to use the ng-click in combination with ngAria to get the required behavior. Make sure that you test with a keyboard only and no screen reader (on Android) and with a keyboard and a screen reader (on iOS and Android) as well as touch and a screen reader (on iOS and Android).
I am totally new to Windows 8 development and I am now facing an issue mixing touch and keyboard navigation using MVVM Light.
So I have a list of view models in a grid view and whenever one of those is selected, navigation to the selected view model is activated. This works totally fine with touch or a mouse, but with a keyboard it can get really confusing. Indeed, the natural behavior would be to navigate the list with the arrows and hit enter when I want to display the item, but here instead, navigation will be activated when simply changing item with the arrow keys which is really confusing for the user.
So how could I do so the navigation could be activated on selection with touch and mouse and with a combination of selection and enter key with the keyboard?
Here is the code I use.
ViewModel:
public ReleaseViewModel SelectedRelease
{
get
{
return selectedRelease;
}
set
{
if(selectRelease != value)
{
selectedRelease = value;
}
// Navigation code here
}
}
View:
<GridView
ItemsSource="{Binding Releases}"
ItemTemplate="{StaticResource ReleaseTemplate}"
ItemContainerStyle="{StaticResource GridViewItemStyle}"
Grid.ColumnSpan="2"
Grid.Row="2"
Padding="116,0,40,46"
SelectedItem="{Binding SelectedRelease, Mode=TwoWay}"/>
In my opinion, coding with the MVVM pattern does not mean that everything code-related should be done in the model. Operations which is related UI beaviors (like navigation) should still be done in the view (the codebehind), by using the available events from the control. Like the GridView's events mouse and keyboard events.
Many may not agree with me on that, but after working by the MVVM pattern for several years in both WPF and Silverlight, I must say that a good combination between the UI-behavior (view) and the control's logic/functionability (model), you will also be forced to put several stuff which concerns the UI only to the codebehind. At least, this is my opinion.
What you could do is to create a class which inherits GridView (let's call it MyDataGrid).
Then you can use the OnKeyDown override and have the navigation go vertica when pressing enter.
You can actually make the MyDataGrid look and behave "out-of-the-box" just like you want so there are no extra code if you want to use the same grid behavior another place in your app (or another app).
The best way I finally found is to use some code behind. But instead of directy navigating from the UI I kept navigation logic in the view models.
So I simply hooked up the ItemClick event from the GridView and in the event handler I casted the Page data context to my view model and then I simply executed the command from the view model. This is not easy to maintain but it surely preserve the separation of concerns of MVVM.
private void GridView_ItemClick(object sender, ItemClickEventArgs e)
{
MyViewModel vm = (MyViewModel)this.DataContext;
if(vm.NavigateToSelectionCommand.CanExecute(null))
{
vm.NavigateToSelectionCommand.Execute(e.ClickedItem);
}
}
Still I hope a cleaner and more maintainable solution will come up with time.
Clicking on an element which has a Javascript handler makes the element go have a 'grey overlay'. This is normally fine but I'm using event delegation to handle the touchdown events of many child elements. Because of the delegation the 'grey overlay' is appearing over the parent element and looks bad and confusing.
I could attach event handlers to the individual elements to avoid the problem but this would be computationally very wasteful. I'd rather have some webkit css property that I can override to turn it off. I already have visual feedback in my app so the 'grey overlay' is not needed.
Any ideas?
-webkit-tap-highlight-color
To disable tap highlighting, set the
alpha value to 0 (invisible)
$('body').bind('touchstart', function(e){
e.preventDefault()
})
For those reading this question, another CSS property which will not only remove the overlay but also prevent the touch device from interacting with the user to assess a tap intention (which delays the timing of the event trigger significantly), is to use the cursor property.
a.notTappable {
cursor:default
}
Also, in the case the asker described where you have descendants of a parent and you only want the descendants to be tappable and you wish to IGNORE ALL MOUSE EVENTS OF THE PARENT, the following solution will you give you the best performance (by completely disabling the bubbling up to the parent). Read the webkit spec here.
.parent {
pointer-events:none;
}
.parent .descendant {
pointer-events:default;
}
I only mention this because the performance difference here is significant.