CODEWITHSUNDEEP
xamarincarouselxamarin.forms
Vimal Patel
Vimal Patel

Reputation: 119

How to implement Carousel View in Xamarin.forms

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.

Upvotes: 6

Views: 23315

Answers (7)

George Isaac
George Isaac

Reputation: 589

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.

Upvotes: 2

Akhileshwar Reddy
Akhileshwar Reddy

Reputation: 115

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.

Upvotes: 1

Renzo Ciot
Renzo Ciot

Reputation: 3846

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"},
                        }
        }
    };
}

Upvotes: 1

JKennedy
JKennedy

Reputation: 18799

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/

Upvotes: 1

Alexander
Alexander

Reputation: 614

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

Upvotes: 3

Daniel Luberda
Daniel Luberda

Reputation: 7454

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/

Upvotes: 5

Mike
Mike

Reputation: 329

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.

Upvotes: 1

Related Questions