Xamarin Forms Add Custom Toolbar at bottom

Question

I have a page created using Xamarin Forms. I want to add a toolbar at the bottom of the screen like an overlay but doesnt change the actual layout of the screen. It should just overlay above everything and always be at the bottom.

It should showup only when there is a particular event. SO it will be added dynamically.

Any ideas - or if you can send point me in the right direction. I do not want to use any nuget packages.

Answer 1

Have you tried to use AbsoluteLayout/Grid?

<Grid>
    <StackLayout><Label Text="Your content"/></StackLayout>
    <Button x:Name="toolbar" VerticalOptions="End" Text="Your toolbar" />
</Grid>

Show/hide the control based on your event.

Answer 2

If you could show the code of displayToolbar it would be easier to write a code that suits your needs, but it should be pretty easy even without the code :)

You could do this with a RelativeLayout, AbsoluteLayout or a Grid but I recommend doing it with a Grid because is much lighter than RelativeLayout and has a lot more functions than AbsoluteLayout.

So, make the root of every page that you want to use displayToolbar a Grid with one row and one column. Add the actual content of the page to that Grid as a child view.

Now comes the part that would be easier with your code. When you want to display the toolbar, add the toolbar view as a child of the root Grid with VerticalOptions set to LayoutOptions.End.

That's it. The toolbar will be added in front of every view of the page and if you want to dynamically remove the toolbar, remove the root Grid's last child.

The layout would be something like this:

Grid root;

internal SomePageConstructor()
{
    root = new Grid
    {
        ColumnDefinitions =
        {
            new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
        },
        RowDefinitions =
        {
            new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
        }
    };
    root.Children.Add(actualPageContent, 0, 0);

    Content = root;
}

void DisplayToolbar()
{
    var toolbar = new StackLayout { VerticalOptions = LayoutOptions.End };
    root.Children.Add(toolbar, 0, 0);
}

void RemoveToolbar()
{
    root.Children.Remove(root.Children[1]);
}

Note: I did this directly on StackOverflow, code could need some corrections.

From this sample, you could do an animation of the toolbar coming from below the page or something like it. Just change the DisplayToolbar and the RemoveToolvar methods.

Obs. Method names on C# are PascalCased (every word is capitalized) so your displayToolbar is DisplayToolbar.

Hope it helps! :)