{"id":26122,"date":"2016-06-15T11:15:53","date_gmt":"2016-06-15T18:15:53","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=26122"},"modified":"2016-06-15T11:15:53","modified_gmt":"2016-06-15T18:15:53","slug":"flip-through-items-with-xamarin-forms-carouselview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/flip-through-items-with-xamarin-forms-carouselview\/","title":{"rendered":"Flip through items with Xamarin.Forms CarouselView"},"content":{"rendered":"

\t\t\t\tThe\"Carousel\" latest preview release of Xamarin.Forms (2.3.0) includes some great new features, including Themes, Data Pages<\/a>, URL Navigation<\/a>, and a brand new control, the CarouselView<\/strong>. You can think of the CarouselView as the successor to the CarouselPage, which had the restriction of a page that couldn’t be embedded easily. In contrast, the new CarouselView is highly optimized on each platform, allowing you to flip through many items with a simple, familiar API with an ItemsSource<\/strong> and a DataTemplate<\/strong>.<\/p>\n

Get the CarouselView<\/h2>\n

Ensure that your projects are on the latest version of Xamarin.Forms and then install the CarouselView NuGet<\/a> in your iOS, Android, Windows, and Portable Class Library (if applicable).<\/p>\n

\"Carousel_NuGets\"<\/p>\n

There are many use cases for the CarouselView; the top one that I hear is having a Carousel on the top of a page to show off specific items, as seen in the app stores. For this example, we’re going to take an existing application that includes a list of monkeys and add a CarouselView to the top that highlights zoos where you can see them.<\/p>\n

A zoo is represented by an image and name:<\/p>\n

\npublic class Zoo\n{\n    public string ImageUrl { get; set; }\n    public string Name { get; set; }\n}\n<\/pre>\n
In our View Model that will be set to the BindingContext<\/em> of the page, we have an ObservableCollection<\/em> of Zoo items:<\/p>\n
\npublic class MonkeysViewModel\n{\n    public ObservableCollection Monkeys { get; set; }\n    public ObservableCollection<Grouping> MonkeysGrouped { get; set; }\n\n    public ObservableCollection Zoos { get; set; }\n\n    public MonkeysViewModel()\n    {\n\n        Monkeys = MonkeyHelper.Monkeys;\n        MonkeysGrouped = MonkeyHelper.MonkeysGrouped;\n        Zoos = new ObservableCollection\n        {\n            new Zoo\n            {\n                ImageUrl = \"http:\/\/content.screencast.com\/users\/JamesMontemagno\/folders\/Jing\/media\/23c1dd13-333a-459e-9e23-c3784e7cb434\/2016-06-02_1049.png\",\n                Name = \"Woodland Park Zoo\"\n            },\n                new Zoo\n            {\n                ImageUrl =    \"http:\/\/content.screencast.com\/users\/JamesMontemagno\/folders\/Jing\/media\/6b60d27e-c1ec-4fe6-bebe-7386d545bb62\/2016-06-02_1051.png\",\n                Name = \"Cleveland Zoo\"\n                },\n            new Zoo\n            {\n                ImageUrl = \"http:\/\/content.screencast.com\/users\/JamesMontemagno\/folders\/Jing\/media\/e8179889-8189-4acb-bac5-812611199a03\/2016-06-02_1053.png\",\n                Name = \"Phoenix Zoo\"\n            }\n        };\n    }\n}\n<\/pre>\n
Adding the CarouselView<\/h2>\n
Since the CarouselView is in a separate assembly, we must bring in the CarouselView’s namespace in root of our page:<\/p>\n
\nxmlns:cv=\"clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView\"\n<\/pre>\n
Then we can simply add the CarouselView at the top of our page:<\/p>\n
\n\n  \n    \n    \n  \n  \n    \n      \n        \n          \n            \n            \n          \n          \n          \n            
Windows Setup<\/h3>\n
If you are building applications for Windows, a DataTemplate needs to be added to the Application Resources in the App.xaml of the application. <\/p>\n
First add a new namespace in the root node:<\/p>\n
\nxmlns:uwp=\"using:Xamarin.Forms.Platform\"\n<\/pre>\n
Then add the following to the Application.Resources node:<\/p>\n
\n\n    \n\n<\/pre>\n
It should look something like this:<\/p>\n
\n\n    \n        \n            \n        \n    \n\n<\/pre>\n
CarouselView Events<\/h2>\n
Since the CarouselView is a control, you have access to a wide variety of animation and life cycle events that you would expect, but you can also subscribe to the ItemSelected<\/em> event to see when users flip through the view:<\/p>\n
\nCarouselZoos.ItemSelected += (sender, args) =>\n{\n  var zoo = args.SelectedItem as Zoo;\n  if (zoo == null)\n    return;\n\n  Title = zoo.Name;\n};\n<\/pre>\n
Embed Anywhere<\/h2>\n
Since the CarouselView is a view, you can put it anywhere on the page or even inside of the ListView’s header so it scrolls with the ListView:<\/p>\n
\n\n  \n    \n      \n        \n          \n            \n              \n              \n            \n            \n            \n