How to implement Carousel View in Xamarin.forms

22,440

Solution 1

There's a well documented CarouselView project hosted on github:

https://github.com/chrisriesgo/xamarin-forms-carouselview and http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/

Solution 2

The nuget package for the CarouselView is now available (v2.3.0-pre1): https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

Solution 3

We can use the CarouselView which was introduced in Xamarin forms 4.3. Now in Xamarin 4.6, we don't have to use the Forms.SetFlags("CollectionView_Experimental"); in appdelegate of iOS and mainactivity of android.

However, to use the indicatorview for the Carousel page we have to set this Forms.SetFlags("IndicatorView_Experimental"); in appdelegate of iOS and mainactivity of android.

Solution 4

I have just implemented a similar thing. To create the a carousel view, I just created a horizontal Stacklayout, wrapped in a horizontal scroll view.

In my particular example, I needed to create an image gallery. I used the Camera control from the Xamarin.Labs project to get the image from either the camera roll or the camera itself. I then added this as a child to the Stacklayout.

Hope this helps.

Solution 5

As of Xamarin.Forms V2.2.0-pre1 CarouselView has now been added to Xamarin.Forms.

CarouselView

CarouselView is intended to fully replace CarouselPage. CarouselPage will be deprecated in a future release. CarouselView is superior in many ways, including its ability to be virtualized and nested within layouts.

See https://forums.xamarin.com/discussion/63983/xamarin-forms-2-2-0-pre1-released#latest

Unfortunately there is no documentation on this as of yet.

EDIT:

CarouselView was Removed for Xamarin.Forms V2.2.0.31 because it wasn't ready for stable release. But from the look of it it will be merged back soon.

For now you can find the seperate CarouselView nuget package here: https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

and you can use it like so:

Namespace:

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

Then we can simply add the CarouselView at the top of our page:

<Grid RowSpacing="0">
  <Grid.RowDefinitions>
    <RowDefinition Height=".3*"/>
    <RowDefinition Height=".7*"/>
  </Grid.RowDefinitions>
  <cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
    <cv:CarouselView.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
          <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
            <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
          </StackLayout>
        </Grid>
      </DataTemplate>
    </cv:CarouselView.ItemTemplate>
  </cv:CarouselView>
  <!--List of Monkeys below-->
</Grid>

more info: https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

Share:
22,440
Vimal Patel
Author by

Vimal Patel

Updated on July 09, 2022

Comments

  • Vimal Patel
    Vimal Patel over 1 year

    Is there any way we can create Carousel View instead of Carousel page so that only portion of the page swipes left or right. Also I want to create this control in the Xamarin Forms and not specific to platform.

    If we need to create this custom control in the xamarin.android or xamarin.iOS then what is the real benefits of using the Xamarin.forms where this simple requirements are not getting satisfied.

  • Mark13426
    Mark13426 over 7 years
    looks like CarouselView no longer exists. What happened?
  • User1
    User1 over 7 years
    CarouselView was Removed for V2.2.0.31 because it wasn't ready for release. But from the look of it it will be merged back into the next stable release
  • user20358
    user20358 over 7 years
    Would that work for Windows phone, UWP and Windows project types in the version of Xamarin that comes with VS 2015?
  • Emil
    Emil over 7 years
    does it mean that it is not safe to use this package?
  • User1
    User1 over 7 years
    @batmaci Pre-Release means use the package but be aware it will probably contain bugs and isnt ideal for applications that need to be released
  • Emil
    Emil over 7 years
    @user1 Do you know how to implement PostionSelected event using mvvm?
  • User1
    User1 over 7 years
    @batmaci not sure off the top of my head, I would ask a stackoverflow question