Xamarin.Forms中带有动画的自定义选项菜单(3点菜单)

时间:2018-12-13 13:16:14

标签: xamarin xamarin.forms

如何在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;
}

需要获得如下图所示的结果。 特别是动画。

enter image description here

0 个答案:

没有答案