Question

我正在尝试实现这种设计，如页面上的图所示，如何在Xamarin.forms中主要在共享项目中实现该设计。我正在尝试通过特定于平台的方式来降低复杂性。

我甚至尝试使用了https://github.com/XAM-Consulting/SlideOverKit。但是问题是打开菜单时我无法在菜单中滑动（即在触摸页面后我希望菜单隐藏），但不会发生。我们需要手动将其拖出以将其关闭。

所以请让我知道如何实现这一目标。

谢谢 enter image description here

Answer 1

根据您的描述，我修改了代码，其中有一个GIF

单击ImageButton时，应调用此方法this.HideMenu();

QuickInnerMenuPage的代码

  public QuickInnerMenuPage()
    {
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
              new Label(){Text="1222"}
            }
        };

        this.SlideMenu = new QuickInnerMenuView(MenuOrientation.RightToLeft);

        QuickInnerMenuView.ib.Clicked += (o, e) =>
        {

            this.HideMenu();
        };


    }
}

有QuickInnerMenuView

的代码

    public class QuickInnerMenuView : SlideMenuView
{
    public static ImageButton ib;
    public QuickInnerMenuView (MenuOrientation orientation)
    {
         ib = new ImageButton
        {
            Source = "Happy.png",
            WidthRequest = 25,
            HeightRequest = 25,
        };

        var mainLayout = new StackLayout {
            Spacing = 15,
            Children = {
                ib,
                new ImageButton {
                    Source = "Home.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
                new ImageButton {
                    Source = "MessageFilled.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
                new ImageButton {
                    Source = "Settings.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
            }
        };
        // In this case the IsFullScreen must set false
        this.IsFullScreen = false;
        this.BackgroundViewColor = Color.Transparent;

        // You must set BackgroundColor, 
        // and you cannot put another layout with background color cover the whole View
        // otherwise, it cannot be dragged on Android
        this.BackgroundColor = Color.FromHex ("#C82630");
        this.MenuOrientations = orientation;
        if (orientation == MenuOrientation.BottomToTop) {
            mainLayout.Orientation = StackOrientation.Vertical;
            mainLayout.Children.Insert (0, new Image {
                Source = "DoubleUp.png",
                WidthRequest = 25,
                HeightRequest = 25,
            });
            mainLayout.Padding = new Thickness (0, 5);
            // In this case, you must set both WidthRequest and HeightRequest.
            this.WidthRequest = 50; 
            this.HeightRequest = 200;

            // A little bigger then DoubleUp.png image size, used for user drag it.
            this.DraggerButtonHeight = 30;

            // In this menu direction you must set LeftMargin.
            this.LeftMargin = 100;

        }

Answer 2

您是否要添加想要实现的效果，例如遵循GIF。

如果是这样，则在使用SlideMenu时，您应该创建一个继承自MenuContainerPage的新视图，例如以下代码。注意：MenuContainerPage来自SlideOverKit

    public class QuickInnerMenuPage: MenuContainerPage
{
    public QuickInnerMenuPage()
    {
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
              new Label(){Text="1222"}
            }
        };

        this.SlideMenu = new QuickInnerMenuView(MenuOrientation.RightToLeft);
    }
}

这是我的演示。您可以参考。 https://github.com/851265601/SlideOverKitDemo

使用xamarin滑入和滑出

2 个答案: