locked
CarouselView with ListViews RRS feed

  • Question

  • User271054 posted

    Hi everyone,

    I need to get a behaviour like this for my application.

    I don't think I could somehow get this behaviour using a CarouselPage so I've tried to use a CarouselView despite of its instability...

    Here is an example of how i'm using it:

    XAML

    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="0">
    
        <cv:CarouselView ItemsSource="{Binding Menu}">
          <cv:CarouselView.ItemTemplate>
            <DataTemplate>
              <ListView HorizontalOptions="FillAndExpand" Header="{Binding Header}" VerticalOptions="FillAndExpand" ItemsSource="{Binding Source}">
                <ListView.ItemTemplate>
                  <DataTemplate>
                    <TextCell Text="{Binding OptionName}"/>
                  </DataTemplate>
                </ListView.ItemTemplate>
              </ListView>
            </DataTemplate>
          </cv:CarouselView.ItemTemplate>
        </cv:CarouselView>
    
        <StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="FillAndExpand">
          <Button HorizontalOptions="FillAndExpand" VerticalOptions="Fill" Text="1"/>
          <Button HorizontalOptions="FillAndExpand" VerticalOptions="Fill" Text="2"/>
          <Button HorizontalOptions="FillAndExpand" VerticalOptions="Fill" Text="3"/>
        </StackLayout>
    
      </StackLayout>
    

    Code behind

        private ObservableCollection<CarouselSource> Menu { get; set; }
    
        public MainPage()
        {
          InitializeComponent();
          CreateCarousel();
        }
    
        private void CreateCarousel()
        {
          this.Menu = new ObservableCollection<CarouselSource>
          {
            new CarouselSource
            {
              Header = "1",
              Source = new ObservableCollection<MenuOption> { new MenuOption { OptionName = "1.0" }, new MenuOption { OptionName = "1.1" }, new MenuOption { OptionName = "1.2" } }
            },
            new CarouselSource
            {
              Header = "2",
              Source = new ObservableCollection<MenuOption> { new MenuOption { OptionName = "2.0" }, new MenuOption { OptionName = "2.1" }, new MenuOption { OptionName = "2.2" } }
            },
            new CarouselSource
            {
              Header = "3",
              Source = new ObservableCollection<MenuOption> { new MenuOption { OptionName = "3.0" }, new MenuOption { OptionName = "3.1" }, new MenuOption { OptionName = "3.2" } }
            }
          };
    
          this.BindingContext = this;
        }
    

    But I get a screen without any ListView and when I try to change Carousel's view i get System.InvalidOperationException: Sequence contains no elements

    Am I missing something?

    Thanks

    Friday, March 31, 2017 10:47 AM

Answers

  • User248173 posted

    i done a small sample on carousel view with list view in c#. i think this will help you.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 26, 2017 6:42 AM

All replies

  • User310615 posted

    Hey @Agg94 Did you look into @JamesMontemagno's blog post on Carousel Views. You will get ideas when you're done with this one. https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

    Friday, March 31, 2017 11:24 AM
  • User271054 posted

    Yep, I was actually trying to do it just like @JamesMontemagno did it in his example but at this time I don't really know if I'm just missing something or it's a problem with the CarouselView...

    Friday, March 31, 2017 3:21 PM
  • User306807 posted

    hey, JamesMontemagno uses an MVVM approach you use code behind. Even so, you use a data binding to connect the CarouselView ItemSource to the observable collection. I would try to connect the ItemSource in code behind, I didn't try but I guess that should work:

    In XMAL, add x:name=XXX to reference the CarouselView in code behind:

       <cv:CarouselView ItemsSource="{Binding Menu}" x:Name="CV">
        .... 
       </cv:CarouselView>
    
    
      public MainPage()
           {
                 InitializeComponent();
                 CreateCarousel();
                 CV.ItemsSource  = Menu;
           }
    
    Tuesday, April 4, 2017 1:45 PM
  • User248173 posted

    i done a small sample on carousel view with list view in c#. i think this will help you.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 26, 2017 6:42 AM
  • User230529 posted

    @"Vaka.GopiNadhReddy" Is it possible to do CarouselView WITHIN a ListView?

    Friday, August 11, 2017 6:04 PM