locked
Swiping between pages - Carousel Page? RRS feed

  • Question

  • User58005 posted

    Hello all!

    At the moment I am looking into doing something like the Gmail app in Android where you can swipe between your emails in the after you click on one (swipe right to your next email, left to your previous one). Would the carousal page be something good for accomplishing this? Related to that, is there a way to allow for loading the content/pages only after scrolling? (i.e. I have thousands of "emails", and don't want all of those to be made into pages immediately and added as children. Would the CreateDefault method be something I can use?)

    Thanks in advance!

    Thursday, July 24, 2014 3:51 PM

All replies

  • User58005 posted

    So after messing with it a little more, carousel page does seem promising. I have the ItemsSource set as the data of each "email" and then overrided the CreateDefault method to create the page showing the details of the "email". The one issue at the moment seems to be that all of the pages are created at the beginning, which seems like a waste and takes a while with a lot of items. Any suggestions? (sorry I meant to make this an Edit but unfortunately it throws an error and doesn't let me :/ )

    Thursday, July 24, 2014 4:53 PM
  • User14 posted

    @Matt.Cook this is a known issue with Carousel (ie. yes, it does load all the views at once); unfortunately I can't give you a timeframe for when it might be addressed.

    I'm not sure if it'd be possible to do something like load the first 10, and then somehow add another 10 when you get to the end, or some hack like that...

    Thursday, July 24, 2014 5:04 PM
  • User58005 posted

    Ok thank you @CraigDunn? for your reply! Just curious, if I were to want to custom render the CarouselPage, are the native versions of it in Android and iOS ViewPager and UIPageViewController, respectively? I figure I may give that a try while the bug exists to get something working.

    Thursday, July 24, 2014 6:41 PM
  • User14 posted

    We haven't got all those things documented yet; some of them might change as we open up more and more controls for easier customization.

    There is a custom renderer reference here that has been compiled externally. Not sure whether attempting to subclass CarouselPage or doing a new custom view using the controls you mentioned would work better...

    Thursday, July 24, 2014 6:53 PM
  • User58005 posted

    Hey @CraigDunn? thanks again for the reply!

    I decided I will give the carousel page a go with loading the item source more and more as you swipe. I was wondering what is the proper way to manually set the current page of the carousel? i.e. I have three items in the carousel page, I want to start up the carousel with the middle item as the present page. I have tried setting the CurrentPage and the SelectedItem and as far as I've tried to no luck. Any help on this?

    Monday, July 28, 2014 8:53 PM
  • User14 posted

    SelectedItem seems to work for me. How are you setting it when it doesn't work?

    This works in the FormsGallery demo:

    public CarouselPageDemoPage()
    {
        this.Title = "CarouselPage";
    
        this.ItemsSource = new NamedColor[] 
        {
            new NamedColor("Red", Color.Red),
            new NamedColor("Yellow", Color.Yellow),
            new NamedColor("Green", Color.Green),
            new NamedColor("Aqua", Color.Aqua),
            new NamedColor("Blue", Color.Blue),
            new NamedColor("Purple", Color.Purple)
        };
    
        this.ItemTemplate = new DataTemplate(() =>
        {
            return new NamedColorPage(true);
        });
    
        this.SelectedItem = ((NamedColor[])ItemsSource) [4];  // navigates to Blue when displayed
    }
    
    Monday, July 28, 2014 9:30 PM
  • User58005 posted

    @CraigDunn? That works for me, thank you!

    (Just FYI, what I was trying to do was have the ItemsSource be an IEnumerable, and then iterate to the one I want and set the iterator.Current to be the SelectedItem. Not quite sure why it didn't work but I am probably misunderstanding something about how the iterators and IEnumerable work).

    Thanks again!

    Monday, July 28, 2014 9:40 PM
  • User58005 posted

    Unfortunately I still seem to be running into some issues with when the UI updates based on the SelectedItem, although this time it is in handler I have for CurrentPageChanged.

    In my constructor, I set the selected item to be the middle item, which works fine and also: CurrentPageChanged += HandleCurrentPageChanged;

    and then I have the method async void HandleCurrentPageChanged(object sender, EventArgs e) { var source = ItemsSource as ObservableCollection<Item>; if (this.CurrentPage.Equals(this.Children[0]) && this.currentIndex > 0) { this.currentIndex--; source.RemoveAt(source.Count()-1); var previousItem = await CustomMethodToGetPreviousItemFromDatabase(); source.Insert(0, previousItem); } // else if (this.currentIndex < NumberOfItemsInDatabase) { this.currentIndex++; source.Add(await CustomMethodToGetNextItemFromDatabase()); source.RemoveAt(0); } this.SelectedItem = ((ObservableCollection<Item>)ItemsSource)[1]; }

    but the page showing up is not the middle item, and instead is the leftmost item when swiping left or the rightmost item when swiping right. This would seem to make sense if this.SelectedItem = ((ObservableCollection<Item>)ItemsSource)[1]; is not set as the index would be the same with the source changing, but it seems that line isn't doing anything to make the current page the item at index 1. Note that I have the same line of code in the constructor and it does set the current page just fine to the 1st index item.

    Wednesday, July 30, 2014 5:40 PM
  • User58005 posted

    So I can't quite figure out the issue... I isolated the issue by making a project where each of the pages just reflects an integer. The files I used are attached (unfortunately a project zip is too big so couldn't include full thing, but just included stuff I changed which is App.cs and SwipeablePage.cs). So the swiping actually works correctly in Android, which is awesome, but unfortunately I can't get it to work in iOS. Swiping right works fine and the pages just keep getting added on and removed properly, but when I swipe left, it jumps two pages. As far as I can tell, it is because it is trying to update to the index 0 page to show, but even if I set the SelectedItem to be the one at index 1 it still does not work.

    @CraigDunn? would you be able to confirm this is a bug, or am I doing something wrong? If it is, I would be happy to report it on bugzilla.

    Thanks!

    Wednesday, July 30, 2014 11:13 PM
  • User58005 posted

    Anybody else having issues with Carousel Page for iOS? For Android it is working just as expected, which is great, but iOS is having still having the bug I stated above.

    Also, sometimes when I swipe to the right page, it doesn't seem to always fire off the "CurrentPageChanged" trigger, which I am curious if others are running into. It is hard for me to get a repro of it atm as I can't narrow down when/why it happens.

    Thursday, July 31, 2014 7:52 PM
  • User60762 posted

    @MattCook? Did you get it working ..... I have similar problem ... details here

    @CraigDunn? Any update on the issue > "this is a known issue with Carousel (ie. yes, it does load all the views at once); unfortunately I can't give you a timeframe for when it might be addressed"

    Thursday, August 21, 2014 5:45 AM
  • User58521 posted

    @CraigDunn just wanted to check if the problem with the Carousel page loading all views has been addressed yet? Wonder if there's anything over at Xamarin.Labs. I'll check out it, cheers.

    Wednesday, November 5, 2014 5:24 PM
  • User58521 posted

    Further to this discussion, has anyone had any luck in making a completely circular or infinite CarouselPage?

    Such that if you had 3 pages swiping from from right to left on page 3 would take you back to page 1.

    1 > 2 > 3 > 1 > 2 > 3 and so on.

    Just now you can't go any further than 3 unless you go in the opposite direction.

    Thanks

    Sunday, November 9, 2014 5:06 PM
  • User97276 posted

    xceed >> Are you seeing this on Android or? On WP it wraps around.

    Sunday, January 18, 2015 1:04 PM
  • User282316 posted

    @Matt.Cook said: So after messing with it a little more, carousel page does seem promising. I have the ItemsSource set as the data of each "email" and then overrided the CreateDefault method to create the page showing the details of the "email". The one issue at the moment seems to be that all of the pages are created at the beginning, which seems like a waste and takes a while with a lot of items. Any suggestions? (sorry I meant to make this an Edit but unfortunately it throws an error and doesn't let me :/ )

    How did you do this? I'm searching something like this for weeks and yet couldn't do... Can you send a example file of how you made?

    Wednesday, February 1, 2017 6:59 PM