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=""
                                   ScaleOut="0.7"
                                   DurationIn=""
                                   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=""
                          HasUnevenRows="True"
                          ItemsSource="{Binding Source={x:Reference PopupMaster},Path=MenuItems}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal"
                                             HorizontalOptions="FillAndExpand"
                                             Margin=""
                                             Spacing=""
                                             HeightRequest=""
                                             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="" />
                                    <Label x:Name="menuText"
                                           Text="{Binding MenuText}"
                                           FontSize=""
                                           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=""
                         x:Name="CloseImage"
                         WidthRequest=""
                         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 * ;
         }

         protected override void OnAppearingAnimationBegin()
         {
             base.OnAppearingAnimationBegin();
             CloseImage.Rotation = ;
             //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, ));
             list.Add(new ToolbarItem("\uf0c9", "", () =>
             {
                 Device.BeginInvokeOnMainThread(async () =>
                 {
                     await PopupNavigation.Instance.PushAsync(_popupMenu);
                 });
             }, ToolbarItemOrder.Primary, ));

             return list;
         }
     }

效果如图：