MAUI CarouselView: how to imitate swipe effect in code? Swipe animation does not happen - xamarin

.NET Maui CarouselView. In certain situations I want my app to take the user to the next card automatically. If I update CarouselView.Position or CarouselView.CurrentItem in code behind, it "jumps" to the next card immediately, no animation. Is it possible to imitate user's swipe? Or as a workaround, maybe somehow apply non-native-CarouselView animation manually to the CarouselView. Please advise.

The CarouselView contains a ScrollTo method that will animate the scroll for you. You either scroll to an index or a specific item.
Give your CarouselView a name in the XAML, and then in the code behind call the ScrollTo.
To scroll to an index:
carouselView.ScrollTo(6);
To scroll to a specific item:
var viewModel = BindingContext as MyViewModel;
var item = viewModel.Items.FirstOrDefault(m => m.Name == "TheBest");
carouselView.ScrollTo(item);
These methods have to be called from the code behind, so if you're using a MVVM approach, you'll need to fire an event or command from your VM for your code behind to act on.
For additional info, take a look at the ScrollTo method docs from Microsoft.

Related

NativeScript animated Modal Page

I need Modal Page appears with "slide from bottom and cover (NOT push) current page" transition.
I set parameter animated of showModal method, but nothing changed.
How implement such transition for Modal Page? Android platform.
it's bug github.com/NativeScript/NativeScript/issues/5989
I have kinda hacky stuff, wrapping my elements with AbsoluteLayout and give it a high top value like '800',
and in navigatedTo function make transition animation with the negative value of the top attribute. In your case you would use left attribute and make transition over x.
Another solution that looks better in the UI, adding a custom component that would act as your modal, wrap your page elements with AbsoluteLayout, add your custom component when you need to show your modal, and apply the previous animation hack to it.
Tip: You can set the actionBarHiddin = true if you want to your custom component to overlay the full screen.
Tip: async/await and then would be very useful for the smoothing matters.

React Native ScrollView event on visible element

I'm working with ScrollView component on my app. This ScrollView has some View containers in it.
What I'd like to achieve is to fire an event (for that specific View), or something when the View is visible on the screen, so I can know what View is visible to the user at that moment.
I hope this schema helps to understand it better:
In this case, the visible View is the one with ref="2" so I'd like to fire something like event(2). And when you keep scrolling and View ref="3" is visible, fire event(3).
I don't know if this is possible to achieve, so I'd like your help :)
It's not currently possible. But peeking through https://github.com/facebook/react-native/search?utf8=%E2%9C%93&q=scrolly&type=Code we can see that at least in android the emitted scroll event has a scrollY value. So it may be possible someday.
https://github.com/facebook/react-native/blob/03d7c7a6a1257d15c26e61cd660fb57222b5b969/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ScrollEvent.java#L43

OnScroll Event in ListView using Xamarin Forms

I have a listView and when the receive a message, the listview should scroll to the end only, if it already in the end.
To make it clear, if the user is seeing old message, the listview shouldn't scroll to the end automatically, but if the is already on the on the listview when receiving a message the listview should automatically scroll to the end.
So I have to get the actual position of the ListView, I didn't see any property or method similar to get this position on the API.
So I was thinking if is possible to override an event like OnScroll, so I can save the current position of the ListView without using custom render.
This can be done using XamarinForms?
ListView doesn't fire Scrolled events like ScrollView does, but it does fire ItemAppearing and ItemDisappearingevents that you may be able to use to keep track of which items are currently visible.

Toggling PanoramaItem Visibility via Delegate

I have a peculiar problem in Windows Phone Development. I have 4 panorama items each of them containing a webBrowser control. On the start of the application, I have only the first panorama item visible while the remaninig are in collapsed state.
Based on the interaction in the first webBrowser, we Notify the WP7 app (webBrowser.ScriptNotify event) and decide which panoramaitems to display. The visiblity is set in the delegate that handles the ScriptNotify event.
the issue I am facing is that though i set the visibility in the delegate to Visible, it doesn't show up in the Panorama. I have tried using Dispatcher in the delegate to change visibility but it hasn't helped:
Deployment.Current.Dispatcher.BeginInvoke(() => {
discussions.Visibility = System.Windows.Visibility.Visible;
});
Can someone suggest what i could be doing incorrectly?
First of all, you shouldn't use a WebBrowser control inside a Panorama. It's very bad performance.
Secondly, Panorama and PivotItems don't have a collapsed state.
And thirdly, the dispatcher have nothing to do with this (unless you're not running the code on the UI thread).
So what you need to do, is to add the PanoramaItems dynamically to the Panorama control. This can be done by databinding (recommended), or directly from C#.
I don't know about performace but i'm sure that a PanoramaItem has a collapsed *visibility* state i tried to toggle it from code and it works like a charm if the initial state is visible.
But if the initial state is collapsed when the panorama loads then it doesn't work anymore. I guess it is because if it is collapsed then it is not included in the panorama and so it won't be visible when you set it to visible.
Maybe that's a bug or i don't know but it is a bit awkward.
To add the PanoramaItem to the Panorama could work.
I'm sorry for not answering the question but the other way around, enforcing the problem :) .
I do have the same problem, one PanoramaItem with an ItemsControl databounded to a collection of the ViewModel. The PanoramaItem visibility property is databounded to {Binding} and a CollectionToVisibility converter is used. During debug with a breakpoint set inside the converter code I managed to see that the return value is ok but the PanoramaItem is not visible when the collections has items.
My investigation took me to realize that in fact when the first get to the Collection occours the return value is null because the Collection data comes from a async call to a service and the converter return value is Visibility.Collapsed, and only when the Collection is populated and the PropertyChanged event is raised, the second get to the Collection property triggers the databind refresh and the return value of the converter is now Visibility.Visible, this leeds me to think that the PanoramaItem isn't included in the Panorama control tree during the applytemplate because the visibility is set to collapsed, and after that the UI never loads the PanoramaItem again.
I made a test to verify this scenario returning in the get of the Collection property an hardcoded list of items so that the first get have items in it and the converter returns Visible in the first get request.Everything works like a charm.I can even string the collection out of items and it gets collapsed and the other way around.
All this is pure Xaml, no code behind.
The intent of this is to hide PanoramaItems that for some reason does not have content to show.
Basically, the panorama keeps an internal list of visible item. This list isn't updated when you set an item to visible. The easiest way to force the control to update this list is setting the MainItem property. So after setting the visibility of your panorama item, just add the following line:
yourPanorama.DefaultItem = yourPanorama.DefaultItem;
(given that the panorama is called yourPanorama)

How to stop the WP7 pivot control handling the Flick Gesture event in Silverlight Toolkit

I have a Pivot Control in my WP7 app that by nature responds to left and right swipes to move between the pivot items.
I then want to use the Flick Gesture on a UserControl (a small UI segment on my page) for something else.
My user control does handle the event but so does the Pivot control, so it navigates to the next item. I have not figured out how to stop the event when the usercontrol handles it.
Is it possible to use a sub control with the flick gesture within a WP7 Pivot Control?
eg:
private void glBlinds_Flick(object sender, FlickGestureEventArgs e)
{
//do stuff
e.Handled = true;
}
This solution posted recently seems to be working out for people for dealing with gesture conflicts on pano / pivot. You might like to check it out.
Preventing the Pivot or Panorama controls from scrolling
The short answer is don't put a control which supports a gesture on top of another control which also supports the same gesture.
Please see this answer to a very similar question for a slightly longer response: WP7 Toggle switch in a Pivot control?
I found this works well for incorporating a slider on a pivot item:
LayoutRoot
Pivot
PivotItem
Grid
Scrollviewer
[Content goes here, I use another grid]
Slider
If I skip the grid and place the slider inside the scrollviewer it doesn't work. I stumbled upon this solution as I wanted to support landscape and still have the slider visible / usable.
You might be able to place your small UI segment for the gesture similar to where I placed my slider.

Resources