Xamarin Forms - Tabbed View?

Question

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 1

You can create a custom control yourself.

(imagine you want to create 3 tabs)

For example you can have a view that it's a grid with 2 rows and 3 columns.

1st row you set the buttons set the RowHeight to auto or a size you want, and add each button to each column.

On row 2 you can have a ContentView with RowHeight of * (to fill the rest of the space) , you should also set GridSpan to 3 columns so it will fill all width available on the grid.

Then when you click a button you just have to set the ContentView view to what you want for that particular tab., you can also have animations before changing the content.

Hope it helps

Answer 2

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;