Forum Xamarin.Forms

Carousel View Custom Renderer Alternative?

ChesterChester USMember

Since there is not a Carousel View just yet (and Xamarin doesn't sound convinced to make one), has anyone made a custom renderer that can share some code on how to make a swipable carousel?

Posts

  • LeeMallonLeeMallon GBInsider, University ✭✭

    did you ever get one?

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    i have some code for that but ios only ; my intent was to create a image galery .. i m gonna see if i can get it working with forms

  • ChesterChester USMember

    Nope, haven't heard back from anyone on having a Carousel View yet. I hope the Xamarin guys are seeing this and either coming up with a way to do it or going to say how to make an alternative on our own. I am at a bit of a standstill on Xamarin.Forms if I can't find out how to do it.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    I think there is just the Carousel Page currently: http://iosapi.xamarin.com/?link=T:Xamarin.Forms.CarouselPage

    However, I would imagine you could do a CarouselView to add to a single page with a custom renderer.

  • ChesterChester USMember

    JamesMontemagno: That's what I'm looking for. Some code or examples on how to make a custom renderer to make a CarouselView.

  • MaruMaru DEMember ✭✭

    @JamesMontemagno‌ A code sample would be great!

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Something like https://components.xamarin.com/view/Alliance.Carousel would give you a "carousel" on iOS and you would just have to create a custom renderer for it following the docs and blogs of custom renderers:

    http://blog.xamarin.com/using-custom-controls-in-xamarin.forms-on-android/

    and

    http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

    You just need to create some bindable properties. I am not sure what the control would be off hand for WP/Android though I would have to look into it more. Unfortunately, I am doing a lot of travel, but these articles should give you a good start.

  • SonNguyen.8158SonNguyen.8158 USMember, University ✭✭

    Did anyone ever create a custom renderer for the Alliance Carousel view? I'm going to give it a go if it hasn't been done.

  • UfukARSLANUfukARSLAN TRUniversity ✭✭

    I created a custom renderer for Alliance Carousel view.

    Here is the implementation:

    In PCL Project:

    using System;
    using Xamarin.Forms;
    using System.Collections.Generic;
    
    namespace YOURNAMESPACE
    {
        public class MyCarousel : View
        {
        }
    }
    

    In iOS Project:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Drawing;
    using Foundation;
    using UIKit;
    
    using Alliance.Carousel;
    using Xamarin.Forms.Platform.iOS;
    using Xamarin.Forms;
    using YOURNAMESPACE;
    using YOURNAMESPACE.iOS;
    using CoreGraphics;
    
    [assembly: ExportRenderer(typeof(MyCarousel), typeof(MyCarouselRenderer))]
    namespace YOURNAMESPACE.iOS
    {
        public class MyCarouselRenderer : ViewRenderer
        {
            public List<int> items;
            CarouselView carousel;
            int width, height;
    
            protected override void OnElementChanged (ElementChangedEventArgs<View> e)
            {
                // Setup the item list we will display
                // your carousel should always be driven by an array/list of
                // data of some kind - don't store data in your item views
                // or the recycling mechanism will destroy your data once
                // your item views move off-screen
                items = Enumerable.Range(1, 3).ToList(); // Prettier than for (nint i = 0; i < 100; i++)
    
    
                // Setup CarouselView view
                carousel = new CarouselView(this.Bounds);
                carousel.DataSource = new LinearDataSource(this);
                carousel.Delegate = new LinearDelegate(this);
                carousel.CarouselType = CarouselType.Linear;
                carousel.ConfigureView();
    
                base.SetNativeControl (carousel);
            }
    
            public override SizeRequest GetDesiredSize (double widthConstraint, double heightConstraint)
            {
                width = (int)widthConstraint;
                height = (int)heightConstraint;
    
                return base.GetDesiredSize (widthConstraint, heightConstraint);
            }
    
            public class LinearDataSource : CarouselViewDataSource
            {
                MyCarouselRenderer vc;
    
                public LinearDataSource(MyCarouselRenderer vc)
                {
                    this.vc = vc;
                }
    
                public override nint NumberOfItems(CarouselView carousel)
                {
                    return (nint)vc.items.Count;
                }
    
                public override UIView ViewForItem(CarouselView carousel, nint index, UIView reusingView)
                {
    
                    UILabel label;
    
                    // create new view if no view is available for recycling
                    if (reusingView == null)
                    {
                        // don't do anything specific to the index within
                        // this `if (view == null) {...}` statement because the view will be
                        // recycled and used with other index values later
    
    
                        label = new UILabel(new CGRect(0,0,vc.width,vc.height))
                        {
                            BackgroundColor = UIColor.Blue,
                            TextAlignment = UITextAlignment.Center,
                            Tag = 1
                        };
                        label.Font = label.Font.WithSize(50);
                        reusingView = label;
                    }
                    else
                    {
                        // get a reference to the label in the recycled view
                        label = (UILabel)reusingView.ViewWithTag(1);
                    }
    
                    // set item label
                    // remember to always set any properties of your carousel item
                    // views outside of the `if (view == null) {...}` check otherwise
                    // you'll get weird issues with carousel item content appearing
                    // in the wrong place in the carousel
                    label.Text = vc.items[(int)index].ToString();
    
                    return reusingView;
                }
            }
    
            public class LinearDelegate : CarouselViewDelegate
            {
                MyCarouselRenderer vc;
    
                public LinearDelegate(MyCarouselRenderer vc)
                {
                    this.vc = vc;
                }
    
                public override nfloat ValueForOption(CarouselView carousel, CarouselOption option, nfloat aValue)
                {
                    if (option == CarouselOption.Spacing)
                    {
                        return aValue * 1.1f;
                    }
                    return aValue;
                }
    
                public override void DidSelectItem(CarouselView carousel, nint index)
                {
                    Console.WriteLine("Selected: " + ++index);
                }
            }
        }
    }
    

    Of course you can change LinearDataSource with other samples.

  • UfukARSLANUfukARSLAN TRUniversity ✭✭

    Ok I have another problem on this one.
    I am trying to fill stacklayouts in PCL project, then pass these to a List in MyCarousel and access this List from Renderer

    But I couldn't find a way to cast these Stacklayouts (Xamarin.Views) to native UIView.
    So I cannot use these stacklayouts in carousel as views.

    Any ideas?

  • voidvoid DKBeta ✭✭✭
    edited March 2015

    I too feel the constraints of the current CarouselPage.

    I have a couple of app ideas simply waiting for XF to deliver some kind of CarouselView that would allow me to do continuous or circular scrolling.

    I have not found a way to create this with a renderer unless I am willing to forgo the entire crossplatform layout/view XF system.

    If only CarouselPage had the ability to do animationless page shifts, then I could emulate it.

  • FreakyAliFreakyAli USMember ✭✭

    Did anyone find a solution for a coverflow type Carousel like alliance for forms
    ?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
Sign In or Register to comment.