CarouselPage with progress bar

mshwfmshwf EGMember ✭✭✭
edited November 2017 in Xamarin.Forms

I have a registration page that has too many fields, that requires me to divide it into 4 pages,
I thought that the best experience is to have a CarouselPage with four ContentPages, that can be easily navigate through, and yet having one view with a corresponding view model.
Before asking the main question, I want to make sure that I'm taking the right decision, and I didn't miss any other option that is dedicated for such case that I'm not aware of (I'm still in my first steps in Xamarin).
if the CarouselPage is the way to go, then I want to have some indicator on the bottom of the screen, that shows the registration progress like a progress bar that increases by 25% on every next page, something that ties all the ContentPages together

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited November 2017

    There's no right or wrong answer on your approach. However it would be a CarouselView not a CarouselPage to pull off showing progression or indicators between the pages.

    This is how I show CarouselView indicators to show the page I'm on, You will be able to tweak this to your needs.

         List<Tip> tipList = new List<Tip>();
                    tipList.Add(new Tip { tipText = "Test" });
                tipList.Add(new Tip { tipText = "" });
                    tipList.Add(new Tip { tipText = "" });
                    tipList.Add(new Tip { tipText = "" });
    
                    short Counter = 0;
                    StackLayout indicators = new StackLayout { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Center, TranslationY = -15  };
                    foreach (Tip item in tipList)
                    {
                        indicators.Children.Add(new Button { WidthRequest = 8, HeightRequest = 8, BorderRadius = 4, BackgroundColor = Color.FromHex("E5E5E8"), ClassId = Counter.ToString() });
                        Counter++;
                    }
    
                    CarouselView cv = new CarouselView { ItemsSource = tipList, ItemTemplate = GetTextTemplate(), Margin = new Thickness(55, 0, 55, 0), HeightRequest = 50 };
                    topGrid.Children.Add(new StackLayout
                    {
                        Children = {
                            cv,
                            new Grid {
                                Children = {
                                    new BoxView { BackgroundColor = Color.White, HeightRequest = 6, TranslationY = -15 },
                                    indicators
                                }
                            }
                        }
                    }, 0, 2);
    
                    Device.StartTimer(TimeSpan.FromSeconds(5), () =>
                    {
                        cv.Position = CarouselPosition++;
                        if (CarouselPosition == tipList.Count) CarouselPosition = 0;
                        return true; 
                    });
    
                    cv.PropertyChanged += (sender, e) =>
                    {
                        CarouselView selectedView = (CarouselView)sender;
                        CarouselPosition = selectedView.Position;
                        foreach (Button button in indicators.Children)
                        {
                            button.BackgroundColor = Color.FromHex("E5E5E8");
                            indicators.Children.FirstOrDefault(f => f.ClassId == cv.Position.ToString()).BackgroundColor = Color.FromHex("8686BF");
                        }
                    };
    

    Also CarouselPosition is just an Int, Declare it above your constructor.
    int CarouselPosition = 0;

  • mshwfmshwf EGMember ✭✭✭

    Where do you get the CarouselView class, my Xamarin.Forms doesn't have it?

Sign In or Register to comment.