Xamarin Forms - Tabbed View?

Ilia Stoilov picture Ilia Stoilov · Aug 11, 2015 · Viewed 7.5k times · Source

I need to create a popup, in which there will be some tabs, each of them containing a listview. I know that there is a TabbedPage, but I need a "TabbedView" so I can build my popup using the Xlabs PopupLayout. How do I do this in Xamarin Forms?

Answer

chaosifier picture chaosifier · Feb 12, 2018

Please have a look at TabView plugin.

I was facing a similar problem in my past project and decided to create a plugin from my implementation.

I've also included a sample project for using TabView here, please have a look.

The plugin is also available in NuGet. Enter the following command in package management console to install the latest version of the plugin in your project:

PM> Install-Package Xam.Plugin.TabView

Since TabView inherits from ContentView, you can use it like any other Views in Xamarin. Here's an example:

var tabView = new TabViewControl(new List<TabItem>()
{
    new TabItem(
        "Tab 1",
        new Image{
            Source = ImageSource.FromUri(new Uri("https://assets-cdn.github.com/images/modules/logos_page/Octocat.png")),
            Aspect = Aspect.AspectFit,
            BackgroundColor = Color.LightBlue
        }),
    new TabItem(
        "Tab 2",
        new StackLayout()
        {
            Children =
            {
                new Label(){
                    FontSize = 18,
                    Text = "This is a label control.",
                    TextColor = Color.Green,
                }
            },
            BackgroundColor = Color.LightGray,
            Padding = 10
        }),
    new TabItem(
        "Tab 3",
        new StackLayout()
        {
            Children =
            {
                new ListView(){
                    ItemsSource = new string[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6" }
                }
            },
            BackgroundColor = Color.LightSalmon,
            Padding = 10
        })
});
tabView.VerticalOptions = LayoutOptions.StartAndExpand;
this.Content = tabView;