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>

 1     [XamlCompilation(XamlCompilationOptions.Compile)]
 2     public partial class PopupMenu : PopupPage
 3     {
 4         private List<ToolbarItemModel> MenuItems { get; set; }
 5         public PopupMenu (List<ToolbarItemModel> data)
 6         {
 7             InitializeComponent ();
 8             MenuItems = data;
 9         }
10 
11         protected override void OnAppearing()
12         {
13             base.OnAppearing();
14             SecondaryToolbarListView.ItemsSource = MenuItems;
15             SecondaryToolbarListView.HeightRequest = MenuItems.Count * 37;
16         }
17 
18         protected override void OnAppearingAnimationBegin()
19         {
20             base.OnAppearingAnimationBegin();
21             CloseImage.Rotation = 45;
22             //CloseImage.TranslationY = -10;
23             MainLayout.RaiseChild(CloseImage);
24         }
25 
26         private void OnCloseButtonTapped(object sender, EventArgs e)
27         {
28             CloseAllPopup();
29         }
30 
31         protected override bool OnBackgroundClicked()
32         {
33             CloseAllPopup();
34 
35             return false;
36         }
37 
38         private async void CloseAllPopup()
39         {
40             await PopupNavigation.Instance.PopAllAsync();
41         }
42     }

2.  在須要添加Toolbar 的頁面中  添加 菜單項。

 1  public partial class SaleBillPage : ContentPage
 2     {
 3 
 4         private PopupMenu _popupMenu;
 5 
 6         public SaleBillPage()
 7         {
 8             InitializeComponent();
 9 
10             var items = new List<ToolbarItemModel>
11             {
12                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "歷史單據"},
13                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "支付方式"},
14                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "欠款"},
15                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "優惠"},
16                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "整單備註"},
17                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "清空單據"},
18                 new ToolbarItemModel {Icon = "fas-list-alt", MenuText = "打印"},
19             };
20 
21             _popupMenu = new PopupMenu(items);
22         }
23 
24         #region Overrides
25 
26         protected override void OnAppearing()
27         {
28             base.OnAppearing();
29             this.ToolbarItems.Clear();
30             foreach (var toolBarItem in GetToolBarItems().ToList())
31             {
32                 this.ToolbarItems.Add(toolBarItem);
33             }
34         }
35 
36         #endregion
37 
38 
39         private IList<ToolbarItem> GetToolBarItems()
40         {
41             var list = new List<ToolbarItem>();
42             list.Add(new ToolbarItem("\uf0c7", "", () =>
43             {
44                 Device.BeginInvokeOnMainThread(() =>
45               {
46                   DisplayAlert("提示", "抱歉,功能稍後開放...", "取消");
47               });
48             },ToolbarItemOrder.Primary, 0));
49             list.Add(new ToolbarItem("\uf0c9", "", () =>
50             {
51                 Device.BeginInvokeOnMainThread(async () =>
52                 {
53                     await PopupNavigation.Instance.PushAsync(_popupMenu);
54                 });
55             }, ToolbarItemOrder.Primary, 1));
56 
57             return list;
58         }
59     }

 

效果如圖：