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.
Related
In GTK3 there was a property on the Gtk.Window class called window-position. By setting this property to Gtk.WindowPosition.CENTER it was possible to tell the window to render in the center of the screen.
In GTK4 this property has been removed. How to achieve the same behavior in GTK4, i.e. how to make the main window of my application to be rendered in the center of the screen?
I checked the migration guide but I couldn't find the solution.
There is no replacement API, since it can't possibly work cross-platform, so it is broken API by definition. As such, it was removed.
For example: this is impossible to implement when running on top of a Wayland session, since the protocol doesn't allow getting/setting global coordinates. If you still want to have something similar working, you'll have to call the specific platform API (for example, X11) for those platforms that you want to support.
Is there any library / framework that could simplify Universal Windows Platform app development of the application that contains multiple Frames.
I mean, using MVVM Light or BezySoftware MVVM-Navigation the application is highly tied to the idea of navigating between different pages that are hosted by single frame.
The UI I try to develop consist of multiple content frames (main, left, right) which content varies. I need something that will let me navigate easily between different views (by placing these views into appropriate frame) and provide the same features I would have with BezySoftware MVVM-Navigation, so:
handling of the view model state persistence
the ability to activate / query deactivate view models
back button feature
Few different options:
Combination of a single navigation service injected into your view model AND user controls for areas that need to be repeated view to view (e.g. a tabs, status bars, etc). With this route, every time you create a new view you would paste in the common user controls that need to appear. You would also be able to expose bindable properties from said user controls.
Combination of ContentControl, DataTemplate, and DataTemplateSelector to load in either an entire view (Page) or fragments of XAML. As one person pointed out you cannot use DataType attribute, instead you use the DataTemplateSelector class to do the mapping for you. With this approach you can also use triggers to dynamically change the template (content) based on changes to properties on your view model and/or user interactions.
A mix between 1 and 2 above.
I might right the whole thing right here, but it too lengthy. I just recommend you see this article to get your answer.
MVVM patter in UWP
https://github.com/brianchance/MvvmCross-UserInteraction is a very nice plugin for showing cross platform Alerts!
But for this question, can we assume it can not use a UIAlertView (or some other top level MessageBox type call on other platforms) but needs to show a Message within a given subsection of the screen (i.e. on IPhone you would need to supply a UIView to the plugin which it will use to show the message within).
So, how would you set this up so the ViewModel knows what View to use as its display container?
As a specific example, if I wanted an Error Service, as so -
public interface IErrorPFService
{
void Show();
void Hide();
void SetErrors(List<Error> errors);
}
and I create a platform specific implementation for it.
If I inject this into my ViewModel so it can control Error Show/Hide/Set how do I tell it the UIView (or equivalent) that I want my Errors to show within?
Can I just expose the IErrorPFService field as a public property and do -
MyViewModel.ErrorPFService = new ErrorPFService(View);
in my ViewDidLoad ...
Or is this coupled incorrectly vs Mvvm Practice?
I would expect the ViewModel to subscribe itself to the ErrorService.
When receiving a message it would expose it in a collection(?) and the View would bind to that collection.
This way the View is unknown to the service and the ViewModel has the chance to influence the View contrary to your solution.
It would help if you could give an example for the scenario you are describing.
Sometimes, the way you visually want to display something might not be the best way, so if it's possible for you, you might find a different and simpler way, which spares you from having to find a solution regarding what you are describing.
Generally, I always do the best I can to avoid the idea of having to actually pass a 'view' or an abstraction of it, from the view-model to view. Also, cross-platform wise, things can work very different in terms of UI interaction. You can find yourself in a situation when things are complicated just because UI works differently than what you expected.
But let's try find another perspective:
At any given point, the view knows what data \ feature it's displaying. So when you are calling from the view-model an user interaction action (by a service, property change, event, etc) the view should 'expect' it.
For example, the platform specific user interaction implementation is able to get the currently displayed top-view and interact it in a platform specific manner or based a relationship. In your example, the message-box can be displayed in a specific sub-view of the top level view.
In advanced scenarios, I guess you could try to create a cross-platform approach for this, but you should try to put in balance all the abstraction you want to create just for that. Think about doing this as a plan ... Z. If possible. Again, giving an example might help.
I am doing a silverlight using the MVVM model, and i am finding it hard to do the events handling via MVVM especially that the events handlers are doing lots of changes in the view like enabling and disabling buttons, update media element functions and position. I am still new to the MVVM and i can't Imagen how can i do this. does anyone already know good article to start with or simple approach to understand :) I'll reply with what i may find interesting while i do my search as well. Thanks
1) Understand that there are different "flavors" of MVVM. Strict/hardcore MVVM patterns, although theoretically desires, isn't necessary.
2) Many view events can be handled via Commands. WPF supports this, and i believe Silverlight 4 does as well. A simple view-event to start with would be Button clicks. This allows you to handle the event in the ViewModel (instead of the View's 'code-behind').
3) For things like enabling/disabling view controls/states via the MVVM model, here is an example/explanation:
Xaml controls (say, a Button) is Data-Bound to the ViewModel for whatever property
(in this case, it will be the button's IsEnabled property).
Your ViewModel has an IsButtonEnabled property.
Whenever you change this property in the VM, raise the PropertyChanged notification, and you will see the binded result in the view (the button's IsEnabled state will be updated).
ps - you can do many things via VM properties in this manner: from text, to various property states, color, you can even play animations in the property setters/getters....etc.
Cheers
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.