xamlxamarinxamarin.formsxamarin.androidxamarin.ios

Xamarin forms toolbar items occurs two times in the tabbed page


I added a toolbar item of name refresh in tabbed page, below is the code of the tabbed page

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:Xapp;assembly=Xapp"
            mc:Ignorable="d"
            x:Class="Xapp.HomePage">
    
    <TabbedPage.ToolbarItems>
        <ToolbarItem x:Name="Refresh" Text="Refresh" />
    </TabbedPage.ToolbarItems>

    <TabbedPage.Children>
        <NavigationPage Title="report">
            <x:Arguments>
                <local:ReportPage>
                    <StackLayout>
                        <Label Text="In:" HorizontalOptions="FillAndExpand" />
                        <Label Text="{Binding CountIn}" FontSize="Medium" FontAttributes="Bold" />
                        <Label Text="Out:" HorizontalOptions="FillAndExpand" />
                        <Label Text="{Binding CountOut}" FontSize="Medium" FontAttributes="Bold" />
                        <Label Text="Date:" HorizontalOptions="FillAndExpand" />
                        <Label Text="{Binding createdon}" FontSize="Medium" FontAttributes="Bold" />
                    </StackLayout>
                </local:ReportPage>
            </x:Arguments>
        </NavigationPage>
 
        <NavigationPage Title="history">
            <x:Arguments>
                <local:HistoryPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
   
</TabbedPage>

the problem is the refresh appears two times in the toolbar as shown in the image below:

Error image


Solution

  • If the MainPage of App is a TabbedPage . You don't need to set it as NavigationPage . in App.

    Modify the code in App.Xaml.CS

    public App()
    {
       InitializeComponent();
    
       MainPage = new HomePage();
    }
    

    Update

    It is not a good design to navigate from a ContentPage to TabbedPage .

    So modify the code to

    App.Current.MainPage = new HomePage();
    

    instead of page.Navigation.PushAsync(new HomePage());