如何在Xamarin.Forms中实现自定义选项菜单布局,并具有类似于我们在Android中看到的动画效果。我需要在堆栈布局等内部使用它,
我还看到了Xamarin.Forms中的 ToolBarItems 菜单。但这是针对内容页面的。我只需要选项菜单,就可以在页面上的任何地方自定义和使用它。
我可以显示一个(3点图像)并将下拉列表布局放置在图像下方并显示/隐藏它。但是无法实现所需的动画(就像同时从一个点增加布局的宽度和高度一样)。
我需要一个类似Android的动画。下面是我尝试的代码。
//layout is the drop-down-list-view
if (layout.IsVisible)
{
//view is open. code below is close the view
//Y here is the absolute position of the image.
layout.TranslationY = y + 20;
if (kebabMenuIcon.Children[0] is Image kebabMenuIconImage)
{
kebabMenuIconImage.Source = "groupDefault.png";
}
var animation = new Animation(v => layout.HeightRequest = v, layout.Height, 0);
var animation1 = new Animation(v => { layout.TranslationX = layout.TranslationX + layout.Width + App.ScreenWidth - v - 20; layout.WidthRequest = v; }, 200, 0);
animation1.Commit(owner: layout, rate: 0, name: "HorizontalAnimation", easing: Easing.Linear);
animation.Commit(owner: layout, name: "VerticalAnimation", easing: Easing.Linear, finished: (v, r) => { layout.IsVisible = false; });
layout.IsVisible = false;
}
else
{
//view is closed. code below is open the view
//Y here is the absolute position of the image.
if (kebabMenuIcon.Children[0] is Image kebabMenuIconImage)
{
kebabMenuIconImage.Source = "groupHighlighted.png";
}
layout.TranslationY = y + 20;
var animation = new Animation(v => layout.HeightRequest = v, 0, (SummaryKebabMenuView.ItemsSource as ObservableCollection<string>).Count * 45, Easing.SinIn);
var animation1 = new Animation(v => { layout.TranslationX = App.ScreenWidth - v - 20; layout.WidthRequest = v; }, 0, 200);
animation1.Commit(owner: layout, name: "HorizontalAnimation", easing: Easing.Linear);
animation.Commit(owner: layout, name: "VerticalAnimation", easing: Easing.Linear);
layout.IsVisible = true;
}
需要获得如下图所示的结果。 特别是动画。