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;
}
}

效果如图:

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

上一篇:Filter的过滤链理解


下一篇:delphi OnMouseLeave 事件不灵敏及解决之道(使用TrackMouseEvent函数进行加强)