如何在Xamarin.Forms中为页面底部添加自定义导航按钮栏

你需要先把独立的NavigationButtons页面改成可复用组件，再嵌入到目标页面中，具体步骤如下：

1. 将NavigationButtons改为ContentView（复用组件） #

原来的NavigationButtons是ContentPage，不适合嵌入其他页面，改成ContentView才能作为组件复用，同时调整布局让按钮横向排列（更接近TabBar样式）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="IndDict.NavigationButtons">
    <!-- 横向布局，按钮平分宽度 -->
    <StackLayout VerticalOptions="End" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
        <Button Text="Dictionary" Pressed="DictOpen" HorizontalOptions="FillAndExpand"/>
        <Button Text="Tools" Pressed="ToolsOpen" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</ContentView>

对应的后台代码（NavigationButtons.xaml.cs）实现跳转逻辑：

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace IndDict
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class NavigationButtons : ContentView
    {
        public NavigationButtons()
        {
            InitializeComponent();
        }

        private void DictOpen(object sender, EventArgs e)
        {
            // 替换为你的Dictionary页面实例
            Application.Current.MainPage.Navigation.PushAsync(new DictionaryPage());
        }

        private void ToolsOpen(object sender, EventArgs e)
        {
            // 替换为你的Tools页面实例
            Application.Current.MainPage.Navigation.PushAsync(new ToolsPage());
        }
    }
}

2. 在Page3中嵌入自定义按钮栏 #

使用Grid布局可以轻松实现页面内容和底部按钮栏的层级划分，添加命名空间引用后直接引用组件：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             <!-- 添加自定义组件的命名空间 -->
             xmlns:local="clr-namespace:IndDict"
             x:Class="IndDict.Page3">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <!-- 第一行占满剩余空间，放页面原有内容 -->
                <RowDefinition Height="*"/>
                <!-- 第二行自动高度，放底部按钮栏 -->
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- 页面原有内容 -->
            <StackLayout Grid.Row="0">
                <Label Text="Welcome to Xamarin.Forms!"
                       VerticalOptions="CenterAndExpand" 
                       HorizontalOptions="CenterAndExpand" />
            </StackLayout>

            <!-- 嵌入底部按钮栏 -->
            <local:NavigationButtons Grid.Row="1"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

替代方案：直接复制按钮栏代码到页面 #

如果不需要复用，也可以直接把按钮栏的布局代码复制到Page3的布局中，比如用Grid包裹原有内容和按钮栏：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="IndDict.Page3">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <StackLayout Grid.Row="0">
                <Label Text="Welcome to Xamarin.Forms!"
                       VerticalOptions="CenterAndExpand" 
                       HorizontalOptions="CenterAndExpand" />
            </StackLayout>

            <!-- 直接添加按钮栏 -->
            <StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                <Button Text="Dictionary" Pressed="DictOpen" HorizontalOptions="FillAndExpand"/>
                <Button Text="Tools" Pressed="ToolsOpen" HorizontalOptions="FillAndExpand"/>
            </StackLayout>
        </Grid>
    </ContentPage.Content>
</ContentPage>

此时需要在Page3的后台代码中实现DictOpen和ToolsOpen方法。

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