如何在Xamarin Forms中自定义Flyout Page顶部栏：添加菜单、搜索栏与下拉头像

核心实现思路 #

FlyoutPage可以通过自定义顶部栏组件，结合侧栏菜单的交互逻辑，实现你需要的「菜单按钮+搜索栏+头像下拉菜单」布局。下面是分步实现方案：

1. 创建复用的自定义顶部栏组件 #

先做一个独立的CustomTopBar.xaml组件，封装所有顶部元素：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.CustomTopBar">
    <Grid HeightRequest="50" BackgroundColor="#2c3e50">
        <!-- 菜单按钮 -->
        <Button x:Name="MenuBtn" 
                ImageSource="menu_icon.png" 
                BackgroundColor="Transparent"
                HorizontalOptions="Start"
                WidthRequest="40"/>
        
        <!-- 搜索栏 -->
        <SearchBar x:Name="SearchBar"
                   Placeholder="搜索..."
                   BackgroundColor="White"
                   CornerRadius="15"
                   HorizontalOptions="CenterAndExpand"
                   Margin="10,0"/>
        
        <!-- 头像下拉菜单容器 -->
        <Grid HorizontalOptions="End" Margin="0,0,10,0">
            <ImageButton x:Name="AvatarBtn"
                         Source="avatar_icon.png"
                         BackgroundColor="Transparent"
                         WidthRequest="40"
                         HeightRequest="40"
                         CornerRadius="20"/>
            <!-- 下拉菜单（默认隐藏） -->
            <StackLayout x:Name="DropdownMenu"
                         IsVisible="False"
                         BackgroundColor="White"
                         WidthRequest="120"
                         Margin="0,50,0,0"
                         HorizontalOptions="End">
                <Label Text="个人中心" Padding="10,5" Tapped="OnProfileTapped"/>
                <Label Text="设置" Padding="10,5" Tapped="OnSettingsTapped"/>
                <Label Text="退出登录" Padding="10,5" TextColor="Red" Tapped="OnLogoutTapped"/>
            </StackLayout>
        </Grid>
    </Grid>
</ContentView>

对应的后台代码CustomTopBar.xaml.cs处理交互逻辑：

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

namespace YourApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class CustomTopBar : ContentView
    {
        // 定义外部可绑定的事件
        public event System.EventHandler MenuClicked;
        public event System.EventHandler<string> SearchTextChanged;
        
        public CustomTopBar()
        {
            InitializeComponent();
            MenuBtn.Clicked += (s,e) => MenuClicked?.Invoke(this, e);
            SearchBar.TextChanged += (s,e) => SearchTextChanged?.Invoke(this, e.NewTextValue);
            AvatarBtn.Clicked += (s,e) => DropdownMenu.IsVisible = !DropdownMenu.IsVisible;
        }

        private void OnProfileTapped(object sender, EventArgs e)
        {
            // 跳转个人中心逻辑
            DropdownMenu.IsVisible = false;
        }

        private void OnSettingsTapped(object sender, EventArgs e)
        {
            // 跳转设置页面逻辑
            DropdownMenu.IsVisible = false;
        }

        private void OnLogoutTapped(object sender, EventArgs e)
        {
            // 退出登录逻辑
            DropdownMenu.IsVisible = false;
        }
    }
}

2. 整合到FlyoutPage主页面 #

在MainFlyoutPage.xaml中，将自定义顶部栏嵌入主内容页，同时配置侧栏菜单：

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:views="clr-namespace:YourApp.Views"
            x:Class="YourApp.Views.MainFlyoutPage">
    <!-- 侧栏菜单 -->
    <FlyoutPage.Flyout>
        <ContentPage Title="菜单">
            <StackLayout>
                <Label Text="首页" Padding="20,10" Tapped="OnHomeTapped"/>
                <Label Text="消息" Padding="20,10" Tapped="OnMessagesTapped"/>
                <Label Text="收藏" Padding="20,10" Tapped="OnFavoritesTapped"/>
            </StackLayout>
        </ContentPage>
    </FlyoutPage.Flyout>

    <!-- 主内容区域 -->
    <FlyoutPage.Detail>
        <NavigationPage NavigationPage.HasNavigationBar="False">
            <x:Arguments>
                <ContentPage>
                    <ContentPage.Content>
                        <StackLayout>
                            <views:CustomTopBar x:Name="TopBar"/>
                            <!-- 页面主体内容 -->
                            <Label Text="主页面内容" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
                        </StackLayout>
                    </ContentPage.Content>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

后台代码MainFlyoutPage.xaml.cs处理侧栏切换：

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

namespace YourApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainFlyoutPage : FlyoutPage
    {
        public MainFlyoutPage()
        {
            InitializeComponent();
            TopBar.MenuClicked += (s,e) => IsPresented = true; // 点击菜单按钮展开侧栏
        }

        private void OnHomeTapped(object sender, EventArgs e)
        {
            // 切换首页内容
            IsPresented = false;
        }

        private void OnMessagesTapped(object sender, EventArgs e)
        {
            // 切换消息页面
            IsPresented = false;
        }

        private void OnFavoritesTapped(object sender, EventArgs e)
        {
            // 切换收藏页面
            IsPresented = false;
        }
    }
}

3. 适配与优化 #

• 替换代码中的图标资源（menu_icon.png、avatar_icon.png）为你自己的图标，确保在各平台项目中正确放置。
• 可通过修改CustomTopBar的BackgroundColor、控件CornerRadius等属性匹配你的UI设计。
• iOS平台可根据设备类型动态调整顶部栏高度，适配刘海屏；Android平台可调整状态栏颜色与顶部栏统一。

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