Xamarin.Forms中Android应用Toolbar底部放置实现方案咨询

Hey there! You absolutely can move the Toolbar to the bottom in your Xamarin.Forms Android app, mimicking the old Windows Phone style. Below are the most robust, maintainable approaches, ordered by how well they fit most real-world use cases:

1. Custom NavigationPage Renderer (Top Recommendation) #

This method gives you native-level control over the Toolbar while preserving all built-in NavigationPage functionality (like title, back buttons, and menu items). It’s the cleanest way for apps that rely on Xamarin.Forms’ standard navigation system.

Implementation Steps: #

1. In your Android project, create a new class that inherits from NavigationPageRenderer.
2. Override the OnElementChanged method to reposition the native Toolbar to the bottom.

Here’s the code:

[assembly: ExportRenderer(typeof(NavigationPage), typeof(BottomNavigationPageRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class BottomNavigationPageRenderer : NavigationPageRenderer
    {
        public BottomNavigationPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                // Locate the native Android Toolbar
                var toolbar = FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Resource.Id.toolbar);
                if (toolbar == null) return;

                // Get the parent layout of the Toolbar (usually a LinearLayout or DrawerLayout)
                var parentLayout = (ViewGroup)toolbar.Parent;
                if (parentLayout == null) return;

                // Remove the Toolbar from its original position
                parentLayout.RemoveView(toolbar);

                // Create new layout parameters to anchor it to the bottom
                var layoutParams = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MatchParent,
                    ViewGroup.LayoutParams.WrapContent);

                // Re-add the Toolbar to the parent layout, now at the bottom
                parentLayout.AddView(toolbar, layoutParams);

                // If the parent is a LinearLayout, set gravity to bottom for extra safety
                if (parentLayout is LinearLayout linearLayout)
                {
                    linearLayout.SetGravity(GravityFlags.Bottom);
                }
            }
        }
    }
}

Why this works: #

• It directly manipulates the native Android Toolbar, so it’s stable across different Android versions (5.0+).
• All existing NavigationPage logic (like Navigation.PushAsync) keeps working as expected.
• Minimal code changes—you don’t have to rewrite your navigation flow.

2. Custom Toolbar Control (For Simplified Scenarios) #

If your app doesn’t need a full NavigationPage (e.g., single-page apps or simple flows), you can build a custom bottom toolbar directly in Xamarin.Forms XAML. This gives you full control over styling but requires manual handling of navigation actions.

Example XAML: #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.Views.YourPage">
    <Grid>
        <!-- Main content area -->
        <ScrollView Grid.Row="0">
            <!-- Your page content goes here -->
            <Label Text="Main content" VerticalOptions="Center" HorizontalOptions="Center"/>
        </ScrollView>

        <!-- Custom bottom toolbar -->
        <ContentView Grid.Row="1" 
                     BackgroundColor="#1976D2" 
                     Padding="15,10">
            <StackLayout Orientation="Horizontal" 
                         HorizontalOptions="SpaceBetween" 
                         VerticalOptions="Center">
                <Button Text="Back" 
                        Command="{Binding BackCommand}" 
                        TextColor="White" 
                        BackgroundColor="Transparent"/>
                <Label Text="Page Title" 
                       TextColor="White" 
                       FontSize="Headline"/>
                <Button Text="Settings" 
                        Command="{Binding SettingsCommand}" 
                        TextColor="White" 
                        BackgroundColor="Transparent"/>
            </StackLayout>
        </ContentView>
    </Grid>
</ContentPage>

Pros & Cons: #

• ✅ Fully customizable appearance (colors, icons, layout)
• ❌ Requires manual implementation of navigation logic (e.g., BackCommand that calls Navigation.PopAsync)
• ❌ Not ideal for apps with complex navigation flows

3. Shell TabBar Integration (If Using Xamarin.Forms Shell) #

If your app uses Xamarin.Forms Shell, you can leverage the built-in bottom TabBar and customize it to act like a toolbar. Note that Shell’s default navigation bar is still top-placed, but you can hide it and use the TabBar as your bottom navigation/toolbar hybrid.

Quick Example: #

In your AppShell.xaml, define a bottom TabBar and hide the top navigation bar:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:YourAppNamespace.Views"
       Shell.NavBarIsVisible="False">

    <TabBar>
        <Tab Title="Home" Icon="home.png">
            <ShellContent ContentTemplate="{DataTemplate views:HomePage}"/>
        </Tab>
        <Tab Title="Settings" Icon="settings.png">
            <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}"/>
        </Tab>
    </TabBar>

</Shell>

Note: #

This works best if you want bottom navigation + toolbar combined. If you need a traditional toolbar (with title and back button) at the bottom, you’ll still need to combine this with a custom renderer or a local toolbar control.

Key Considerations #

• Test across Android versions: The custom renderer works on Android 5.0+, but older versions may need minor adjustments to layout parameters.
• Handle screen rotation: The renderer will automatically reposition the Toolbar when the screen rotates, so no extra code is needed.
• Avoid overlap: If you have other bottom elements (like a TabBar), adjust margins/padding to prevent overlap between the Toolbar and other controls.

The custom NavigationPage renderer is the best all-around solution for most projects. It maintains the full functionality of Xamarin.Forms’ navigation system while achieving the bottom-placed Toolbar you want, with minimal code and long-term maintainability.

内容的提问来源于stack exchange，提问作者mrisek