XamarinForms Pagetypes

Question

I am starting with XamarinForms. I would like to create application which look line Facebook Messanger. The points is I am looking for tip how to achive bottom bar with buttons to navigate throught views.

I was trying to do it with CarouselPage but I dont see option to make static bottom bar. As I see CarouselPage can only contain collection of ContentPages

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:xxx"
             x:Name="ThisPage"
             x:Class="xxx">
    <ContentPage>
        <ContentPage.Content>
            <Grid>

            </Grid>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage>
        <ContentPage.Content>
            <Grid>
                <Label Text="Page1"></Label>
            </Grid>
        </ContentPage.Content>
    </ContentPage>
    <ContentPage>
        <ContentPage.Content>
            <Grid>
                <Label Text="Page2"></Label>
            </Grid>
        </ContentPage.Content>
    </ContentPage>

</CarouselPage>

I did also try to make it as it was possible in XAML - create stacklayout at the bottom with navigation buttons and create content presenter to the rest page and dymanically change his content but it did not work as expected.

Can someone give me any tip ?:)

KFactory KFactory · Accepted Answer · 2017-06-25T15:49:53

I think you have many ways to do it. I don't use Fb Messenger (sorry) but I have an idea of what you need.

First I will remind you that a "TabbedPage" will give give you this bottom bar on iOS but will be on the top for Android...
Next, you can use a third party component. I've already seen several in the past I think (If you 'DuckDuckGo' 'xamarin forms bottom bar' for instance you should find good things. You can try this one for example that renders the bottom bar on Android pretty well (and the native bar for iOS): Github BottomNavigationBarXF.
Finally, has you mentionned it, you can try to make your own navigation bar. It should not be difficult if you have some design skills. Make your bottom bar control that accepts "navigation buttons", then change the 'ContentPresenter.Content' property (in the page that owns your bottom bar) in response of the button clicks...

Exemple of the Github project (BottomBarNavigationXF): (Android) (iOS)

Tell me if it's what you was looking for, or mark as answered if it's ok for you !

XamarinForms Pagetypes

1 Answers