Quick Links
Reproduce carousel view behaviour/animation/transition to a horizontal scroll view.
Member ✭✭
Hey developers,
I have so far tried to use a carousel view due to its ease of use and of course its performance. But I tried to show the tail of each UI elements (let's say we've a bunch of cards) whatever the position is as shown in the picture. I've googled a lot and posted another question in this forum but since then I changed the project UI a little bit so I ignored the given solution and now I am on my own again, I resolved it (show the next card's tail or/and the previous), I'll write down the structure I used in XAML but first let me highlight my requirements.
I want to reproduce the behaviour, animation/transition on swiping of the carousel view to my view, because I am actually using a horizontal scroll view with a Flex layout inside.
Here is the structure :
Now I've tried two options :
1- Use of Scrolled event in the scroll view but that hasn't been a great option because it fire the events (animation or transition) after the scroll is done, in my case it should fire the event since scrolling started.
2- Use of SwipeGestureRecognizer on Scrollview, FlexLayout and BoxView : couldn't get a stable behaviour on the 2 first attempts but when I used a BoxView I couldn't get each StackLayout (the StackLayout is my card) inside the BoxView (It wasn't built for that).
Here is my UI after I used a horizontal scroll view :
here is the behaviour I wanted to reproduce to my view :
https://media.giphy.com/media/l0NwH3XDSYhQ6l4TC/giphy.gif
Best Answers
-
AndreiMisiukevich_
US ✭✭✭✭✭
I work on this feature https://github.com/AndreiMisiukevich/CardView/issues/17
5 -
AndreiMisiukevich_
US ✭✭✭✭✭
Check 2.0.0 version and my github for more info
CoverFlowView is coming ))
5 -
TaylorD
US ✭✭✭
Not to hijack @AndreiMisiukevich_ 's answer, but a
MasterDetailPagehas a IsGestureEnabled property you can set to turn that mechanism on/off.I currently am setting that property to true only when changing to a specific page to handle a similar case such as yourself. Hope it helps!
5
Answers
@JamesMontemagno I appreciate if you can answer this one for me, because I followed the carousel view tutorial on your blog (I saw the image on the top of the page as mine in this question exactly : a carousel with next/previous pages are visible) but isn't implemented.
I work on this feature https://github.com/AndreiMisiukevich/CardView/issues/17
Check 2.0.0 version and my github for more info
CoverFlowView is coming ))
@AndreiMisiukevich_ This is exactly what I am looking for, but still can't get my cards to be displayed (a stack layout in my case is the card I want to display 3 cards in total => in your sample an image in a Frame is a card).
What exactly is wrong?
@AndreiMisiukevich_ I want to add items directly through xaml when using CoverFlow, in GitHub you showed how to do that to a carousel view, so I changed it to this :
cards:CoverFlow.ItemsSource
x:Array Type="{x:Type View}"
I got an error when calling this view because it doesn't recognize the "Array : Type View"
@MedFehmi yes, this is Xamarin Forms bug, i guess
Try to do it in code behind
I think the problem I am facing is my concept is quite different than the one used in your package. I used to do it this way :
I had a CarouselView
cv:CarouselViewControl x:Name="cv" AnimateTransition="false" ShowIndicators="true" Margin="0,11,0,0" Grid.Row="0" ItemsSource="{Binding Source={x:StaticResource CarouselPages}}"/> and its Item source is bound to :
ResourceDictionary
local:CarouselPageTemplateList x:Key="CarouselPages"
DataTemplate
StackLayout x:Name="leftCard"/
StackLayout x:Name="middleCard"/
StackLayout x:Name="rightCard"/
/DataTemplate
/local:CarouselPageTemplateList
/ResourceDictionary
so basically, the ItemSource in my carousel was serving as a data template AND item source locator and it was working just fine.
But when I tried to use CoverFlow, I couldn't get it to display correctly because I need only to bind my "CarouselPages" to the item source of CoverFlow which didn't work (nothing is displayed) so neither the code behind could get it to work because something needs to be separated (item source from data template and this is what I cannot see in my case).
So any suggestion. I can paste my cards code if needed?
Yes show whole xaml and codebehind
Sorry for the copy quality, but as in the code you can see I used a ResourceDictionary to be bound to my coverflow/(carousel view previously), I left the Frame tag empty just for simplification purpose. I have 3 data templates above and still confused between making's as a ItemSource for the CoverFlow(as it was with my carousel view) or to embed'em inside the Frame(which only takes one data template) or dome both.
This happened because of the linker was set to be working, just setting it to "Don't link" would do the job and solve the issue. Thanks anyway.
@AndreiMisiukevich_ Only one question is it possible to limit the CoverFlowView from getting the same list (ex: 3 cards) infinitely (limit from right and left so if u see the last card in your collection from the right you won't see the next one which is the first card in the collection and the same from the left) so basically I want to stop right scrolling when the list hits the limit and same on left scrolling.
@MedFehmi yes, sure, set
IsCycling = falsethat's all
Hey, I tried to set it from both sides (XAML and C#) when I scroll left/right an NullReferenceException is being thrown.
I tried it even on your project sample and the same happened. Only when set to false (IsCycling = true doesn't serve the purpose but it doesn't throw an exception).
I tried this even :
CoverFlowView cvfl = this.FindByName("cv");
cvfl.IsCyclical = false;
StackTrace:
System.NullReferenceException: Object reference not set to an instance of an object
at PanCardView.Processors.BaseCoverFlowBackViewProcessor.ProceedPositionChanged (System.Double value, Xamarin.Forms.View checkView, System.Collections.Generic.IEnumerable
1[T] views) [0x0001f] in <e0dc0d98bde94bb585ceeed2c6308e39>:0 at PanCardView.Processors.BaseCoverFlowBackViewProcessor.HandlePanChanged (System.Collections.Generic.IEnumerable1[T] views, PanCardView.CardsView cardsView, System.Double xPos, PanCardView.Enums.AnimationDirection animationDirection, System.Collections.Generic.IEnumerable`1[T] inactiveViews) [0x00072] in :0at PanCardView.CardsView.OnTouchChanged (System.Double diff) [0x000a3] in :0
at PanCardView.CardsView.OnPanUpdated (Xamarin.Forms.PanUpdatedEventArgs e) [0x0003d] in :0
at PanCardView.CardsView.OnPanUpdated (System.Object sender, Xamarin.Forms.PanUpdatedEventArgs e) [0x00000] in :0
at Xamarin.Forms.PanGestureRecognizer.SendPan (Xamarin.Forms.Element sender, System.Double totalX, System.Double totalY, System.Int32 gestureId) [0x00000] in D : \a\1\s\Xamarin.Forms.Core\PanGestureRecognizer.cs:20
at Xamarin.Forms.Platform.iOS.EventTracker+<>c__DisplayClass15_0.b__2 (UIKit.UIPanGestureRecognizer r) [0x0012b] in <7218c7c87f004ed1b7043c0af66038c6>:0
at UIKit.UIPanGestureRecognizer+Callback.Activated (UIKit.UIPanGestureRecognizer sender) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIGestureRecognizer.cs:229
at at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)
at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIApplication.cs:79
at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0002c] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIApplication.cs:63
at MyApp.iOS.Application.Main (System.String[] args) [0x00001] in /Users/mohamedfehmi/Development/MyApp/MyApp/iOS/Main.cs:17
@MedFehmi have you tried version 2.0.1 yet?
Hey @AndreiMisiukevich_ Thanks a lot you've been so helpful, one more thing, in order to improve the user experience when I integrated the cards in a MasterDetailPage which is the root page of my app, then when I swipe left to right on the card itself the menu drawer page is opened instead of swiping, so I would say the swipe to left or to right in the card itself is not enabled in this case.
Not to hijack @AndreiMisiukevich_ 's answer, but a
MasterDetailPagehas a IsGestureEnabled property you can set to turn that mechanism on/off.I currently am setting that property to true only when changing to a specific page to handle a similar case such as yourself. Hope it helps!
@TaylorD I tried this :
var mainPage = (Application.Current.MainPage as NavigationPage).CurrentPage;
(mainPage as MasterDetailPage).IsGestureEnabled = false;
the on Disappearing set it back to true.
it worked on Android only, iOS is keeping the same unwanted behaviour.
Hmm not sure. I have been using that property in my application on both
iOSandAndroidsince XF version: 2.3.4.270 and it has worked properly. I am currently running version the latest 3.4 version.Make sure the
iOSproject built correctly and that the latest version is deployed to the device.@AndreiMisiukevich_ I have Xamarin.Forms version 3.4.0.1029999 and CardsView version 2.0.2, the iOS version works really fine and as expected but the android cards have no Elevation/Shadow, I tried to change the stack layout of each card to a frame layout then I couldn't control the PositionChiftValue anymore (it is like set to 0 and the cards became more close to each other until the middle card width is reduced from left and right by the other cards) .
sorry
need sample
Hey sorry, this is a screen shot (Tablet mode but the same on a android phone)
These are the different three cards :
@AndreiMisiukevich_ can you please help me in this one and do you know how to adapt your solution to a tablet device. For me it works by default on a smart phone (considering both platforms android/iOS) but not for the tablet it looks like the screen shot.
So basically my issue is the android version doesn't seem ok and the tablet mode doesn't neither. Thanks