CODEWITHSUNDEEP
wpfxamlxamarinxamarin.forms
trungnt2910
trungnt2910

Reputation: 322

How to use TabbedPage in Xamarin WPF

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.

Upvotes: 1

Views: 384

Answers (1)

trungnt2910
trungnt2910

Reputation: 322

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>

Upvotes: 3

Related Questions