Xamarin Forms Modify NavigationPage created from code

Question

I have a problem. I created a NavigationPage with a TabbedPage in it, by using the following code:

TabbedPage tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new productPage{ Title = "Products" });
tabbedPage.Children.Add(new setPage{ Title = "Sets" });

App.Current.MainPage = new NavigationPage(tabbedPage);

But now I want at the bottom of the navigation page a bar (stacklayout) with a total amount selected, so this bar doesn't need to be set in the TabbedPage, but in the NavigationPage, because it's the total amount of both pages together selected.

How can I add that bar to my NavigationPage at the bottom and still have the TabbedPage above that bar?

Here is my current situation:

And this is what I want:

see the big WARNING box at the bottom of this section - https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page#populate-a-tabbedpage-with-a-page-collection — Jason, Feb 10 '20 at 14:52
What do you mean by `I want at the bottom of the navigation page a bar (stacklayout) with a total amount selected`? Can you please to add a picture or add more detailed description to make it clear? — nevermore, Feb 11 '20 at 04:48
I added 2 images... The first is what I have now, and the second is what I want it to be — A. Vreeswijk, Feb 11 '20 at 21:14

score 0 · Accepted Answer · answered Feb 12 '20 at 07:58

1.It is not recommend to nest a TabbedPage inside a NavigationPage. You should create each page inside a NavigationPage, something like this:

    this.Children.Add(new NavigationPage(new Page1 { Title = "Sets" }));
    this.Children.Add(new NavigationPage(new Page2 { Title = "Products" }));

2.I think the easiest way is to add your bottom view above the content of each page. Something like this in each Page:

<ContentPage.Content>
    <StackLayout>

        <ListView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>mono</x:String>
                    <x:String>mononucleosis</x:String>
                </x:Array>
            </ListView.ItemsSource>
        </ListView>

        <BoxView BackgroundColor="Green" HorizontalOptions="FillAndExpand" HeightRequest="70"/>
    </StackLayout>
</ContentPage.Content>

It's hard to add a view above TabbedPage and I does not find a solution so far. Another way is create your own tabbedPage.

Here are some links may give you some ideas:

can-we-add-content-above-tabbed-page-in-xamarin-forms

how-to-add-content-page-or-view-before-tabbed-page

Xamarin Forms Modify NavigationPage created from code

1 Answers1