CODEWITHSUNDEEP
c#androidxamarin.formscarouseltabbedpage
Bartek Chyży
Bartek Chyży

Reputation: 541

Xamarin Forms carousel with menu/tabs

I want do create something like TabbedPage but as a View with scrollable "menu" ( I will have about 8 tabs). How can I achive this? I was thinking about doing CarouselView and somehow to make a tabbed header, but I dont know how to make it good. Or maybe there is a plugin for TabbedView ( I spent few hours and I didn't find anything). Thanks in advance.

Upvotes: 2

Views: 2169

Answers (3)

stepheaw
stepheaw

Reputation: 1713

Check out this link on the old Xamarin forums here

I think this is exactly what you're looking for here. I had do a few things to get the sample to run like upgrade the version of Xamarin.Forms, then delete the nuget package for carousel view prerelease since its since rolled in with Xamarin.Forms.

enter image description here

Upvotes: 1

James Mallon
James Mallon

Reputation: 1127

James Montemagno made a a brilliant blog on how to implement this a couple of years ago.

That sorts out the Carousel View. Now to write the tabbed header I wrote 1 of these a couple of years back. What you need to do is make a stacklayout with orientation horizontal, make the width bigger than the screen width and then every new page you visit you can translate the top bars x coordinates to the left or right. and change the image in the bar so that it looks highlighted.

Have a real play with this, see if you can make the transitions between pages smooth and the translation look sleek. I managed to do it so Im sure you will be fine.

I would provide code but unfortunately it was for a client and I cannot share his intellectual property.

Upvotes: 2

Mouse On Mars
Mouse On Mars

Reputation: 1132

Xamarin.Forms does not provide a TabView control but only a TabbedPage which seems to be no good in your case. There are commercial third party libraries that offer such a control out of the box (e.g. from SyncFusion). I looked quite a long time into this issue. Finally, I went for creating my own implementation which is based on a data bindable StackLayout with a horizontal line of buttons. Only the ContentView that is associated with the selected button is shown all other ones are hidden.

Upvotes: 1

Related Questions