CarouselView state of the union?

What is the status of the CarouselView component? Here is what I think I know:

  1. Microsoft created CarouselPage but has deprecated it since it is not flexible since it is a Page and can't be used in a ContentPage
  2. Microsoft created CarouselView within Xamarin.Forms repo but it was too buggy so they moved it to its own repo
  3. Microsoft's CarouselView repo has been stagnant for 2 years
  4. alexrainman made his own which Microsoft like better so the plan was to incorporate his into the official Xamarin.Forms repo as the official CarouselView control
  5. alexrainman's CarouselView repo has been stagnant for 7 months
  6. I do not see alexrainman's CarouselView merged into Xamarin.Forms repo
  7. I see several bugs within alexrainman's CarouselView and I have even submitted a pull request for one of them

What CarouselView component should I use? Should I try Telerik's RadSlideView or SyncFusion's SfCarousel instead??

Answers

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Hi) I think, you should try it https://github.com/AndreiMisiukevich/CardView

  • ShawnCastrianniShawnCastrianni USBeta ✭✭✭

    @AndreiMisiukevich_ I just tried it and it also has some bugs.

    1. How to initialize the CarouselView to the item on the far right without showing the animation?
    2. On Android, if I set the ItemsSource and then immediately set the SelectedIndex to the last item, I get the last item selected, BUT the first item is also visible on top of the entire CarouselView. When I try to swipe, I am swiping the CarouselView items underneath with the first item stuck on top.
    3. If my content is pan/zoomable (like if I am using CarouselView to swipe through images and each image can be panned/zoomed), I get undesirable behavior on both platforms. On iOS, I can pan and zoom just fine, but once zoomed, I cannot swipe to the next carousel item UNTIL i fully zoom out. A proper implementation should have the swipe gesture pan the item. Once the edge is reached on the pan, it should then swipe to the next carousel item. This is how alexrainman's CarouselView works. On Android, things are worse. Once zoomed in, I cannot pan horizontally. side gestures are immediately directed to the CarouselView which causes a swipe.
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited August 2018

    1) Set index BEFORE page is rendered (in constructor)
    2) Could you please provide sample? I saw such issue, but I was sure, that it had beed already fixed.
    3) Good point, could you please provide sample too. I think, we can add swipe gestures too

    Thank you

  • ShawnCastrianniShawnCastrianni USBeta ✭✭✭

    @AndreiMisiukevich_ Attached is a test program. You may find my usage of OnAppearing to set the ItemSource a little weird, but that is because in my real application, web service calls are being made which are async so I do that in OnAppearing and then set the ItemsSource when the web service call is complete. In this test program, everything is hardcoded.

    1. I tried setting the SelectedIndex in various places, but could not skip the animation. This issue is NOT a show stopper for me.
    2. I cannot recreate this issue with my test program, but this IS a show stopper for me in my real application which prevents me from using your CarouselView.
    3. My test program DOES demonstrate this problem. On iOS, not being able to swipe without first zooming out fully, is NOT a show stopper for me. On Android, not being able to pan after a zoom and having it swipe instead IS a show stopper for me.
  • ShawnCastrianniShawnCastrianni USBeta ✭✭✭
    edited August 2018

    @AndreiMisiukevich_ I was playing around with my real application to see if I could find a workaround with Issue #2 where a rogue card is on top of the CarouselView. My original code was:

                _carouselV.ItemsSource = _docImages;
                _carouselV.SelectedIndex = _initialIndex;
    

    which results in the problem. I changed it to this and Issue #2 went away:

                _carouselV.ItemsSource = _docImages;
                Task.Run(delegate {
                    Device.BeginInvokeOnMainThread(delegate {
                        _carouselV.SelectedIndex = _initialIndex;
                    });
                });
    

    I am purposely not awaiting the Task.Run and since Task.Run spawns a new thread, I must protect the setting of SelectedIndex inside BeginInvokeOnMainThread.

    With this workaround, the only show stopper preventing me from using CardsView nuget package is not being able to horizontally pan on Android which you can use my test program to fix, if you wish.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited August 2018
    1. What do you think, if I add Method void SetSelectedIndex(bool animated), which will provide opportunity to set selected index without animation?
    2. Very well, i think, i should add this case to work-arounds section in the Readme
    3. Cool, i will check this issue

    Thank you very much!
    I will create issue on my github project with link to this thread

  • wend0rlinwend0rlin DEMember ✭✭

    Hello Andrei,
    I've already commented here https://github.com/xamarin/Xamarin.Forms/issues/2219 (shoeIT)
    so I want to share some of my foundings:

    1. I use the HybridView of that Nuget package https://www.nuget.org/packages/XLabs.Forms/, to show some HTML(SVG) code in my app. The problem is that I cannot scroll horizontaly in the webview since your control uses the swipe gesture and want to change pages, but I want to scroll within the webview. There is no problem to scroll verticaly.
      The problem only occurs on Anrdoid, iOS works fine. Should I try to change the MoveDistance or MoveShresholdDistance to change the behaviour ?

    2. I use a custom implementation of a list view, I add a View to your CarouselView which contains the custom listView. Unfortunately on iOS I cannot click the items, on Android it works fine. It seems that sometimes it is possible to click the items also on iOS but you cannot say it works.

    3. When I add a new View to the CW the animation often shows the first page first and then the other pages, its very short but it looks a bit strange, is this the expected behaviour?

    Sources:

    ScreenCast which shows the problems, left side Android, right side iOS. First clicking through Android works fine until the WebView comes in, horizontal scrolling not possible (but works fine on iOS) then try to click on iOS sometimes it works I have to click very often.
    https://www.dropbox.com/s/bs5go05jg971w5j/ErrorMovie3_ProblemNewCV.mov?dl=0

    Code:
    Xaml View, which is added to CV (Problem 2):

                        <ContentView.Content>
                                <StackLayout Orientation="Vertical" Padding="{x:Static local:AppConfiguration.ContentPadding}"
                                             VerticalOptions="FillAndExpand"  HorizontalOptions="FillAndExpand"   >
    
                                    <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand"  HorizontalOptions="FillAndExpand">
                                        <StackLayout Orientation="Horizontal">
                                            <Label Text="LOCATIONS" Style="{x:Static local:AppConfiguration.SectionHeaderStyle}" />
                                            <Label Text="{Binding CurrentCount}"  Style="{x:Static local:AppConfiguration.SectionHeaderCountStyle}"  AutomationId="label_countLocation"  x:Name="labelCount"  />
                                        </StackLayout>
    
                                        <listViews:NativeNavigationListView VerticalOptions="FillAndExpand"   HorizontalOptions="StartAndExpand"   AutomationId="locations"  
                                                                 Items="{Binding Path=LocationCollection}" x:Name="nlv"/>
                           </StackLayout>
                                </StackLayout>
                            </ContentView.Content>
                        </ContentView>
    
    
      public class NativeNavigationListView : NativeListView
        {
    
            public static readonly BindableProperty ItemsProperty =
                BindableProperty.Create("Items", typeof(IEnumerable<CellViewModel>), typeof(NativeNavigationListView), new List<CellViewModel>());
    
            public IEnumerable<CellViewModel> Items
            {
                get { return (IEnumerable<CellViewModel>)GetValue(ItemsProperty); }
                set { SetValue(ItemsProperty, value); }
            }
    
            public event EventHandler<SelectedItemChangedEventArgs> ItemSelected;
    
            public void NotifyItemSelected(object item)
            {
    
                if (ItemSelected != null)
                    ItemSelected(this, new SelectedItemChangedEventArgs(item));
            }
    
            public NativeNavigationListView()
            {
            }
        }
    
    
         public class NativeListView : View
            {
    
                public event EventHandler<SelectedItemChangedEventArgs> ActionClicked;
    
                public void NotifyActionClicked(object item)
                {
                    if (ActionClicked != null)
                        ActionClicked(this, new SelectedItemChangedEventArgs(item));
                }
            }
    
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Hi, @wend0rlin , thanks for your feedback
    Some of these bugs are added there https://github.com/AndreiMisiukevich/CardView/issues

    as for 2-nd point, try to user tapGestureRecognizer. If you want to make your UI responsive, you can use it https://github.com/AndreiMisiukevich/TouchEffect

  • wend0rlinwend0rlin DEMember ✭✭

    Hi Andrei, how should I use tabGesture in this case? I mean it is actually a listView, wich has a selectedItem event, but this is not triggered but I don't know why. I my listView to the normal one, no custom implementation and same problem. I don't understand why it works fine on the WorkOrders page, but not on the start page, actually no different code. So its not about the custom listView...but I don't know what is about.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @ShawnCastrianni Hi
    Could you try again with latest pre-release package? (iOS only, please)

    So

    Animations can be disabled by setting IsAutoNavigatingAimationEnabled = false

    So you can
    1) IsAutoNavigatingAimationEnabled = false
    2) Set new index
    3) IsAutoNavigatingAimationEnabled = true // again

    For enabling Page/Pinch gestures for your image, try to set IsPanInteractionEnabled = false

    Thx

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @wend0rlin

    Try to use latest pre-release package too (Test ONLY iOS please, because i have worked only with iOS yet)

    1) IsPanInteractionEnabled = false

    2) Probably, IsPanInteractionEnabled = false will help there too

    3) IsAutoNavigatingAimationEnabled = false (Then set index, then set it to TRUE again)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Hi guys
    try 1.5.8 version for both platforms (set IsPanInteractionEnabled = false)

  • wend0rlinwend0rlin DEMember ✭✭
    edited August 2018

    H> @AndreiMisiukevich_ said:

    @wend0rlin

    Try to use latest pre-release package too (Test ONLY iOS please, because i have worked only with iOS yet)

    1) IsPanInteractionEnabled = false

    2) Probably, IsPanInteractionEnabled = false will help there too

    3) IsAutoNavigatingAimationEnabled = false (Then set index, then set it to TRUE again)

    hello,
    1. works fine with IsPanInteractionEnable=false !
    2. still not working I have to investigate more I don't understand why the click doesn't get through to the listView (or just very rarely)
    3. does not work at all. When I set IsAutoNavigatingAimationEnabled =false the CV does not work correctly at position 2. The first page (from position 0) is in the forground and behind I can see the page I've wanted. But there has to be a bug or I don't use it correctly. Besides I see that the CV sets Position=0 if I add the third page (at Position 2). So I'm on Page 2 (Position 1) click my cell and I expect to see only Page 3 (on Position 2) but first I see Page 1 (on Position 0) and then Page 3 is shown on Position 2...but I don't understand why there is that step in between whichs shows Page 1.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @wend0rlin as for setting indexes
    You should to try set them in Main thread

    cv.IsAutoNavigatingAimationEnabled = false;
    Device.BeginInvokeInMainThread(async () => {
    cv.SelectedIndex = 1;
    await Task.Delay(100);
    cv.IsAutoNavigatingAimationEnabled = true;
    });

  • TheMaeggesTheMaegges DEMember ✭✭

    Aside from the discussion about Andrei's CardView (don't get me wrong, it is definitely a nice plugin and you are doing good work on that), I would really like to hear some statement regarding the whereabouts of the initial CarouselView.

  • ShawnCastrianniShawnCastrianni USBeta ✭✭✭
    I agree on both counts. The original intent of my post was to get an official response from Microsoft.
  • wend0rlinwend0rlin DEMember ✭✭
    edited August 2018

    @AndreiMisiukevich_ said:
    @wend0rlin as for setting indexes
    You should to try set them in Main thread

    cv.IsAutoNavigatingAimationEnabled = false;
    Device.BeginInvokeInMainThread(async () => {
    cv.SelectedIndex = 1;
    await Task.Delay(100);
    cv.IsAutoNavigatingAimationEnabled = true;
    });

    ok, I'm working with MVVM and Bindings so I have to check how it works there, but its not that important. Error 2 is the show stopper for me atm. I will try to find the problem there.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @wend0rlin perhaps, next lines are the reason of error 2
    https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/CardsView.cs#L476-L477

    I add tap gesture to all cards, for providing ability to handle tap event "from box".
    Could you fork my repo, try to remove this gesture and reproduce you issue?

    Or send me sample at least

  • wend0rlinwend0rlin DEMember ✭✭

    @AndreiMisiukevich_ said:
    @wend0rlin perhaps, next lines are the reason of error 2
    https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/CardsView.cs#L476-L477

    I add tap gesture to all cards, for providing ability to handle tap event "from box".
    Could you fork my repo, try to remove this gesture and reproduce you issue?

    Or send me sample at least

    solved the problem :) I'm able to click the custom listView on iOS now. Thanks

    So almost the only thing left (besides the issue I posted on GitHub) is the animation/adding views dynamically.
    I have to investigate more but what I can say now is that if IsAutoNavigatingAimationEnabled=false the control does not work properly anymore. There are overlapping views and GUI problems. Using the main threat does not change anything. I use it with animation=true now an its ok but the animations are not nice, since I see the first page very shortly than it changes to the next view.

    I can see in my output that if I'm on index 1 (Page 2) and click on a cell (which adds Page 3 on index 2 to the ItemSource) that the page at index 0 is loaded shortly then the page on index 2 as I wish. I don't understand why the CV changes to index 0, (is it about the animation?) because I only add a view to the collection and do SelectedIndex++

    Szenario:
    User goes to WorkOrder Page the first time, the inital load adds FirstWoView to the CV, then I click on a cell (item e.g. ID 20000) which adds a new view (SecondWoView)

    Debugging Output:
    
    [0:] GOTO ID: 20000
    [0:] In SetHeader für Pos: 1
    [0:] In SetHeader  - If Pos1, done
    [0:] CurrentIndex:1
    [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView
    [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView
    
    --click on another cell (Item ID 23005)
    

    [0:] GOTO ID: 23005
    [0:] In SetHeader für Pos: 0
    [0:] In SetHeader - If Pos0, done
    [0:] CurrentIndex:0
    [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView
    [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView
    [0:] PathfinderMobile.CustomViews.WoItems.AddPatch

    [0:] In SetHeader für Pos: 2
    [0:] In SetHeader  - If Pos2, done
    [0:] CurrentIndex:2
    [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView
    [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView
    [0:] PathfinderMobile.CustomViews.WoItems.AddPatch
    

    I try to give you more information on monday, but maybe you have an hint, like for problem 2 :)

    thanks in advance and have a nice weekend!

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    > @wend0rlin said:
    > @AndreiMisiukevich_ said:
    > @wend0rlin perhaps, next lines are the reason of error 2
    > https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardView/CardsView.cs#L476-L477
    >
    > I add tap gesture to all cards, for providing ability to handle tap event "from box".
    > Could you fork my repo, try to remove this gesture and reproduce you issue?
    >
    > Or send me sample at least
    >
    >
    >
    >
    >
    > solved the problem :) I'm able to click the custom listView on iOS now. Thanks
    >
    > So almost the only thing left (besides the issue I posted on GitHub) is the animation/adding views dynamically.
    > I have to investigate more but what I can say now is that if IsAutoNavigatingAimationEnabled=false the control does not work properly anymore. There are overlapping views and GUI problems. Using the main threat does not change anything. I use it with animation=true now an its ok but the animations are not nice, since I see the first page very shortly than it changes to the next view.
    >
    > I can see in my output that if I'm on index 1 (Page 2) and click on a cell (which adds Page 3 on index 2 to the ItemSource) that the page at index 0 is loaded shortly then the page on index 2 as I wish. I don't understand why the CV changes to index 0, (is it about the animation?) because I only add a view to the collection and do SelectedIndex++
    >
    > Szenario:
    > User goes to WorkOrder Page the first time, the inital load adds FirstWoView to the CV, then I click on a cell (item e.g. ID 20000) which adds a new view (SecondWoView)
    >
    > Debugging Output: [0:] GOTO ID: 20000 [0:] In SetHeader für Pos: 1 [0:] In SetHeader - If Pos1, done [0:] CurrentIndex:1 [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView --click on another cell (Item ID 23005)
    >
    > [0:] GOTO ID: 23005
    > [0:] In SetHeader für Pos: 0
    > [0:] In SetHeader - If Pos0, done
    > [0:] CurrentIndex:0
    > [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView
    > [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView
    > [0:] PathfinderMobile.CustomViews.WoItems.AddPatch
    >
    > [0:] In SetHeader für Pos: 2 [0:] In SetHeader - If Pos2, done [0:] CurrentIndex:2 [0:] PathfinderMobile.CustomViews.WoItems.FirstWoView [0:] PathfinderMobile.CustomViews.WoItems.SecondWoView [0:] PathfinderMobile.CustomViews.WoItems.AddPatch
    >
    > I try to give you more information on monday, but maybe you have an hint, like for problem 2 :)
    >
    > thanks in advance and have a nice weekend!

    Hey, sure, I will try to reproduce it.
    But it would be better, if you create small sample for me. It will helps me to fix this issue asap.
    You can create issue on my GitHub
  • wend0rlinwend0rlin DEMember ✭✭
    edited August 2018

    ok, thanks I will put everything on you GitHub!

    So maybe this discussion can go to the origin again...which carouselView should we take, which one is going to be included into XF and supported by Microsoft?

  • wend0rlinwend0rlin DEMember ✭✭

    update from Github:
    https://github.com/xamarin/Xamarin.Forms/issues/2219

    "During our initial spike of CollectionView, we realized that many of the same concepts and underlying API apply to CarouselView, too. We're currently exploring the possibility of using CollectionView as a CarouselView (see https://github.com/xamarin/Xamarin.Forms/projects/13#card-12053462). Thanks!"

  • DFoulkDFoulk USMember ✭✭

    It sounds like alexrainman is close to delivering the long-awaited update...

    [Enhancement] Feature CarouselView

    CarouselView will not be developed?

  • igorkr_10igorkr_10 Member ✭✭✭

    I am using XF official CarouselView. But I need a property for disabling scrolling (for example, IsScrollable). Do XF team working on CarouselView or it was abandoned for changing it to CollectionView? Note, CollectionView is a list, where can be showed several items on screen. But CarouselView shows one item on screen - it is useful for many situations.
    So, need I change XF Carousel to alexrainman's Carousel? Or better check news from XF team?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @igorkr_10 also i suggest you to try my solution https://github.com/AndreiMisiukevich/CardView
    carousel.IsUserInteractionEnabled = false;
    (what you need)

    There are several advantages of this control such as:
    slideshow, fading indicators if no interaction, cyclical views, RTL support, customizable animations and much more :)

Sign In or Register to comment.