How to implement Carousel View in Xamarin.forms - xamarin

Question

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.

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

Answer 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

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

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

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

Answer 6

If you use Xamarin.Forms V2.2.0-pre1 and you need to display different views for each page, you can use a derived class like that:
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 passing 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"},
}
}
};
}

Answer 7

CarouselView has been introduced in Xamarin forms v4.4. You can have a look at this. In additional to CarouselView, IndicatorView is also added to indicate the nth item in the carousel.