ReactiveUI Maui: ReactiveTabbedPage Tab name appears twice

Question

Using ReactiveTabbedPage in a MAUI project and on UWP Platform, the name of selected tab appears twice, one on tab section and the second one on top right side of the screen as shown in picture into red circle. example . Is possible to remove or hide the second one? Thanks

I expect to be able to hide or remove the tab name on top right of page.

UPDATE: Example code MainPage.xaml:

<rxui:ReactiveTabbedPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:rxui="clr-namespace:ReactiveUI.Maui;assembly=ReactiveUI.Maui"
    xmlns:vm="clr-namespace:MySpace.Maui.ViewModels" 
    x:DataType="vm:MainViewModel"
    x:TypeArguments="vm:MainViewModel"
    x:Class="MySpace.MainPage"
    xmlns:local="clr-namespace:MySpace.Maui.Views"
    Title="MainPage">

        <local:Tab1Page x:Name="Page1" />
        <local:CoGComputationPage x:Name="Page2" />
        <local:OrderTab x:Name="Page3" />
</rxui:ReactiveTabbedPage>

Tab1Page.xaml:

<rxui:ReactiveContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:rxui="clr-namespace:ReactiveUI.Maui;assembly=ReactiveUI.Maui" 
    xmlns:vm="clr-namespace:MySpace.Maui.ViewModels" 
    x:DataType="vm:FirstViewModel"
    x:TypeArguments="vm:FirstViewModel"
    x:Class="MySpace.Maui.Views.Tab1Page"
    Title="">

<rxui:ReactiveContentPage.Content>
    <ScrollView>
        <VerticalStackLayout
        Spacing="25"
        Padding="30,0"
        VerticalOptions="Center">

            <Image
            Source="dotnet_bot.png"   
            
            HeightRequest="200"
            HorizontalOptions="Center" />

            <Label
            Text="Hello, World!"
            
            FontSize="32"
            HorizontalOptions="Center" />

            <Label
            Text="Welcome to .NET Multi-platform App UI"
            
            FontSize="18"
            HorizontalOptions="Center" />

            <Button
            x:Name="CounterBtn"
            Text="Click me"
            
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</rxui:ReactiveContentPage.Content>
</rxui:ReactiveContentPage>

Tab1Page.xaml.cs:

public partial class Tab1Page : ReactiveContentPage<FirstViewModel>
{
    int count = 0;

    public Tab1Page()
    {
        InitializeComponent();
        Title = "Tab 1";
    }


    private void OnCounterClicked(object sender, EventArgs e)
    {
        count+= 10;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        SemanticScreenReader.Announce(CounterBtn.Text);
    }
}

FirstViewModel is actually an empty view model

Hi, which method did you use to populate the tabbedpage? Datatemplate or a page collection. — Guangyu Bai - MSFT, Sep 12 '22 at 08:40
Hi, thank you for answer... I populate directly on xaml file as shown below: I noticed that if I insert title after x:Name, application use it and doesn't take care about Title redifined into xaml code behind. I don't know if this can help. — user3132789, Sep 12 '22 at 14:49
I understand what you mean. If you populate directly on xaml file the form might be changed by the code. So this might be caused by the code `` but I have no idea about what you do on the code. Can you post your code on your question so I can test it on my side. — Guangyu Bai - MSFT, Sep 13 '22 at 09:19

score 0 · Answer 1 · answered Oct 03 '22 at 12:48

After some investigation, a solution could be to set to false the HasNavigationBar property into ReactiveContentPage xaml file. So, for example:

<rxui:ReactiveContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:rxui="clr-namespace:ReactiveUI.Maui;assembly=ReactiveUI.Maui" 
    xmlns:vm="clr-namespace:MySpace.Maui.ViewModels" 
    x:DataType="vm:FirstViewModel"
    x:TypeArguments="vm:FirstViewModel"
    x:Class="MySpace.Maui.Views.Tab1Page"
    NavigationPage.HasNavigationBar="False"
    Title="">

    <rxui:ReactiveContentPage.Content>
        "Here your stuff"
    </rxui:ReactiveContentPage.Content>
</rxui:ReactiveContentPage>

ReactiveUI Maui: ReactiveTabbedPage Tab name appears twice

1 Answers1