How to use TabbedPage in Xamarin WPF

by

Issue

I am trying to rebuild my old WinForms application using Xamarin Forms for more portability.

The application uses a TabControl, and the docs say that the closest Xamarin Forms element is the TabbedPage.

Here is the code:

<?xml version"1.0" encoding"utf-8" ?>
<TabbedPage xmlns"http://xamarin.com/schemas/2014/forms"
             xmlns:x"http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local"clr-namespace:MyApp"
            x:Class"MyApp.MainPage">
    <TabbedPage.ToolbarItems>
        <ToolbarItem Text"Settings"
                     Order"Primary"
                     Priority"0" />
        <ToolbarItem Text"Tools"
                     Order"Primary"
                     Priority"1" />
        <ToolbarItem Text"Help"
                     Order"Primary"
                     Priority"2" />
    </TabbedPage.ToolbarItems>

    <TabbedPage.Children>
        <ContentPage Title"Main">
            <Label Text"Coming soon!"/>
        </ContentPage>

        <ContentPage Title"Today">
            <Label Text"Coming soon!"/>
        </ContentPage>

        <ContentPage Title"This week">
            <Label Text"Coming soon!"/>
        </ContentPage>

    </TabbedPage.Children>

</TabbedPage>

It works well on my UWP build:

enter image description here

However, on my WPF build, it does not show the toolbar, making it impossible to switch tabs: enter image description here

So what am I doing wrong here?

Thanks.

Update #1: I’ve tried to build the GTK target, it works correctly:

enter image description here This screenshot is taken on Ubuntu. GTK# on Windows works the same way, but the drawing of the controls are too buggy.

Solution

After messing up with the element picker in the toolbar, I’ve finally found an answer:

There ARE buttons to switch between tabs in WPF. However, they are just invisible:enter image description here

Setting the BarTextColor property in TabbedPage fixes the problem: enter image description here

So the resulting code is:

<?xml version"1.0" encoding"utf-8" ?>
<TabbedPage xmlns"http://xamarin.com/schemas/2014/forms"
             xmlns:x"http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local"clr-namespace:TimetableApp"
            x:Class"TimetableApp.MainPage" 
            BarTextColor"Black">
    <TabbedPage.ToolbarItems>
        <ToolbarItem Text"Settings"
                     Order"Primary"
                     Priority"0" />
        <ToolbarItem Text"Tools"
                     Order"Primary"
                     Priority"1" />
        <ToolbarItem Text"Help"
                     Order"Primary"
                     Priority"2" />
    </TabbedPage.ToolbarItems>

    <TabbedPage.Children>
        <ContentPage Title"Main">
            <Label Text"Coming soon!"/>
        </ContentPage>

        <ContentPage Title"Today">
            <Label Text"Coming soon!"/>
        </ContentPage>

        <ContentPage Title"This week">
            <Label Text"Coming soon!"/>
        </ContentPage>

    </TabbedPage.Children>

</TabbedPage>

Answered By – trungnt2910

Leave a Comment