How to watch a carousel in Xamarin.forms

Question

Is there any way to create a Carousel instead of a Carousel page so that only part of the page moves left or right. I also want to create this control in Xamarin formats, not for the platform.

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

Answer 1

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

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

Answer 2

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

Answer 3

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

In my specific example, I needed to create a gallery of images. I used the camera control from the Xamarin.Labs project to get the image either from the camera roll or from the camera itself. Then I added this as a kid on Stacklayout.

Hope this helps.

Answer 4

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

Carouselview

CarouselView is designed to completely replace CarouselPage. CarouselPage will be deprecated in a future release. CarouselView excels in many ways, including its ability to be virtualized and nested in layouts.

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

Unfortunately, there is no documentation on this issue yet.

EDIT:

CarouselView was removed for Xamarin.Forms V2.2.0.31 because it was not ready for the stable version. But in appearance it will soon be united.

Now you can find the separate CarouselView nuget package: https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

and you can use it like this:

Namespace:

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

Then we can simply add 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> 

Additional information: https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

Answer 5

If you are using Xamarin.Forms V2.2.0-pre1, and you need to display different views for each page, you can use the derived class as follows:

 public class CarouselViewMultiPage : CarouselView { List<View> _children = new List<View> { }; public List<View> Children { get { return _children; } set { _children = value; OnPropertyChanged(); } } public CarouselViewMultiPage () { this.ItemTemplate = new CarouselTemplateSelector(); this.ItemsSource = Children; this.SetBinding(CarouselView.ItemsSourceProperty, "Children"); BindingContext = this; } } public class CarouselTemplateSelector : DataTemplateSelector { protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { DataTemplate dt = new DataTemplate(); View civ = (View)item; return new DataTemplate(() => { return civ; }); } } 

so you can call it scrolling Views:

 public App() { // The root page of your application MainPage = new ContentPage { Content = new CarouselViewMultiPage { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.FillAndExpand, Children = { new Label() { Text="Page 1"}, new Label() { Text="Page 2"}, new Label() { Text="Page 3"}, } } }; }