CarouselView with ListViews

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

Best Answer

Answers

  • 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/

  • Agg94Agg94 ESMember ✭✭

    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...

  • wend0rlinwend0rlin DEMember ✭✭
    edited April 2017

    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;
           }
    
  • jim_seowjim_seow DEMember ✭✭

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

Sign In or Register to comment.