Xamarin 自定义 ToolbarItem 溢出菜单实现(Popover/Popup) 弹出下拉效果

使用  Rg.Plugins.Popup 插件

1.  新建 PopupMenu.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
                 x:Class="DCMS.Client.Views.CustomView.PopupMenu" x:Name="PopupMaster">
    <pages:PopupPage.Resources>
        <ResourceDictionary>
            <Style x:Key="EntryStyle"
                   TargetType="Entry">
                <Setter Property="PlaceholderColor"
                        Value="#9cdaf1" />
                <Setter Property="TextColor"
                        Value="#7dbbe6" />
            </Style>
        </ResourceDictionary>
    </pages:PopupPage.Resources>
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation PositionIn="Top"
                                   PositionOut="Center"
                                   ScaleIn="1"
                                   ScaleOut="0.7"
                                   DurationIn="700"
                                   EasingIn="BounceOut" />
    </pages:PopupPage.Animation>
    <ScrollView HorizontalOptions="End"
                VerticalOptions="Start">
        <AbsoluteLayout Margin="0,45,0,0"
                        x:Name="MainLayout">
            <Frame x:Name="FrameContainer"
                   Margin="0,10,10,0"
                   HorizontalOptions="Center"
                   BorderColor="Transparent"
                   BackgroundColor="White">
                <ListView x:Name="SecondaryToolbarListView"
                          VerticalOptions="Start"
                          HorizontalOptions="Start"
                          WidthRequest="100"
                          HasUnevenRows="True"
                          ItemsSource="{Binding Source={x:Reference PopupMaster},Path=MenuItems}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal"
                                             HorizontalOptions="FillAndExpand"
                                             Margin="0"
                                             Spacing="0"
                                             HeightRequest="36"
                                             Padding="15,0,0,0">
                                    <iconize:IconImage x:Name="iconImage"
                                                       Icon="{Binding Icon}"
                                                       HorizontalOptions="Start"
                                                       VerticalOptions="Center"
                                                       Margin="0,0,8,0"
                                                       IconColor="{StaticResource PrimaryDarkColor}"
                                                       IconSize="14" />
                                    <Label x:Name="menuText"
                                           Text="{Binding MenuText}"
                                           FontSize="12"
                                           VerticalOptions="Center"
                                           HorizontalOptions="Start" />
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Frame>
            <ContentView AbsoluteLayout.LayoutFlags="XProportional"
                         AbsoluteLayout.LayoutBounds=".8,5, 15, 15">
                <ContentView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnCloseButtonTapped" />
                </ContentView.GestureRecognizers>
                <BoxView HeightRequest="15"
                         x:Name="CloseImage"
                         WidthRequest="15"
                         BackgroundColor="White"></BoxView>
            </ContentView>
        </AbsoluteLayout>
    </ScrollView>
</pages:PopupPage>

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PopupMenu : PopupPage
    {
        private List<ToolbarItemModel> MenuItems { get; set; }
        public PopupMenu (List<ToolbarItemModel> data)
        {
            InitializeComponent ();
            MenuItems = data;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            SecondaryToolbarListView.ItemsSource = MenuItems;
            SecondaryToolbarListView.HeightRequest = MenuItems.Count * 37;
        }

        protected override void OnAppearingAnimationBegin()
        {
            base.OnAppearingAnimationBegin();
            CloseImage.Rotation = 45;
            //CloseImage.TranslationY = -10;
            MainLayout.RaiseChild(CloseImage);
        }

        private void OnCloseButtonTapped(object sender, EventArgs e)
        {
            CloseAllPopup();
        }

        protected override bool OnBackgroundClicked()
        {
            CloseAllPopup();

            return false;
        }

        private async void CloseAllPopup()
        {
            await PopupNavigation.Instance.PopAllAsync();
        }
    }

2.  在需要添加Toolbar 的页面中  添加 菜单项。

 public partial class SaleBillPage : ContentPage
    {

        private PopupMenu _popupMenu;

        public SaleBillPage()
        {
            InitializeComponent();

            var items = new List<ToolbarItemModel>
            {
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "历史单据"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "支付方式"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "欠款"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "优惠"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "整单备注"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "清空单据"},
                new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "打印"},
            };

            _popupMenu = new PopupMenu(items);
        }

        #region Overrides

        protected override void OnAppearing()
        {
            base.OnAppearing();
            this.ToolbarItems.Clear();
            foreach (var toolBarItem in GetToolBarItems().ToList())
            {
                this.ToolbarItems.Add(toolBarItem);
            }
        }

        #endregion


        private IList<ToolbarItem> GetToolBarItems()
        {
            var list = new List<ToolbarItem>();
            list.Add(new ToolbarItem("uf0c7", "", () =>
            {
                Device.BeginInvokeOnMainThread(() =>
              {
                  DisplayAlert("提示", "抱歉,功能稍后开放...", "取消");
              });
            },ToolbarItemOrder.Primary, 0));
            list.Add(new ToolbarItem("uf0c9", "", () =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {
                    await PopupNavigation.Instance.PushAsync(_popupMenu);
                });
            }, ToolbarItemOrder.Primary, 1));

            return list;
        }
    }

效果如图：