Posted on 4 Comments

Bottom Navigation Bar with Control – Xamarin.Forms

Ever wondered how to create a Bottom Navigation Bar for Xamarin.Forms as it is in the latest Android sdk version? As there is no native control for Xamarin.Forms you could create a custom one with a Control.

First create a Folder and name it Controls and create the control in there.

In your portable class library -> Add New Item -> Content View and name it NavigationBar or something else.

 

For my purposes I used the following code:

 <Grid   BackgroundColor="Blue" >

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackLayout Orientation="Vertical" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Home.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Home" TextColor="White"  />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Column="1"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image Source="Pages.png" WidthRequest="30" HeightRequest="30"  />
                <Label Text="Pages" TextColor="White"  />
            </StackLayout>

            <StackLayout Orientation="Vertical"  Grid.Column="2"  HorizontalOptions="CenterAndExpand" VerticalOptions="End">
                <Image  Source="Settings.png"  WidthRequest="30" HeightRequest="30" />
                <Label Text="Settings" TextColor="White" />
            </StackLayout>
        </Grid>

In order to use it in your code reference it in your xaml

xmlns:controls="clr-namespace:project.Controls"

And then just use

<controls:NavigationBar />

Finally you can use your control and it will look the same in all platforms.