Sweep from right menu

rightmenu.cs

// topbar.cs - this is used to replace the navigation bar

public class TopBar : View
    {
        private string Title, LeftImage, RightImage;
        readonly Page currentPage;
        StackLayout panel;
        Image rightCell;
        Grid grid;
        MenuView menu;
        bool FromMain;

        public TopBar(string text = "", Page current = null, string leftImage = "", string rightImage = "", StackLayout stack = null, bool fromMain = true)
        {
            Title = text;
            LeftImage = leftImage;
            RightImage = rightImage;
            currentPage = current;
            panel = stack;
            FromMain = fromMain;
        }

        public Grid CreateTopBar()
        {
            grid = new Grid
            {
                VerticalOptions = LayoutOptions.CenterAndExpand,
                BackgroundColor = Constants.Green,
                HeightRequest = 52,
                MinimumHeightRequest = 52,
                WidthRequest = App.ScreenSize.Width,
            };

            var padView = new ContentView
            {
                WidthRequest = 8
            };

            var leftView = new ContentView
            {
                HeightRequest = 16,
                WidthRequest = 16
            };
            var rightView = new ContentView
            {
                HeightRequest = 16,
                WidthRequest = 16
            };

            var leftCell = new Image();
            if (!string.IsNullOrEmpty(LeftImage))
            {
                leftCell.Source = LeftImage;
                leftCell.HeightRequest = leftCell.WidthRequest = 16;
                leftCell.HorizontalOptions = LayoutOptions.StartAndExpand;

                var gestLeft = new TapGestureRecognizer
                {
                    NumberOfTapsRequired = 1,
                };
                gestLeft.Tapped += async delegate
                {
                    await currentPage.Navigation.PopAsync();   
                };
                leftCell.GestureRecognizers.Add(gestLeft);
                leftView.Content = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Children = { padView, leftCell }
                };
            }

            dynamic title;
            if (!string.IsNullOrEmpty(Title))
            {
                title = new Label
                {
                    FontSize = 22,
                    TextColor = Color.White,
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center,
                    MinimumWidthRequest = App.ScreenSize.Width - 64,
                    Text = Title
                };
            }
            else
            {
                title = new Image
                {
                    Source = "headerlogo.png",
                    HeightRequest = 42,
                    WidthRequest = 42,
                    VerticalOptions = LayoutOptions.Center
                };
            }

            rightCell = new Image();

            if (!string.IsNullOrEmpty(RightImage))
            {
                rightCell.Source = RightImage;
                rightCell.HeightRequest = rightCell.WidthRequest = 32;
                rightCell.HorizontalOptions = LayoutOptions.EndAndExpand;

                rightView.Content = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Children = { rightCell, padView }
                };

                menu = new MenuView();
                menu.HeightRequest = App.ScreenSize.Height - grid.HeightRequest;
                Rectangle origBounds;

                var gestRight = new TapGestureRecognizer
                {
                    NumberOfTapsRequired = 1,
                    Command = new Command((o) =>
                        {
                            var bounds = panel.Children[0].Bounds;
                            bounds.X = App.ScreenSize.Width * .18;
                            if (!App.Self.PanelShowing)
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                                    {
                                        panel.WidthRequest = panel.Width + menu.Content.WidthRequest;
                                            
                                        panel.Children.Add(new StackLayout
                                            {
                                                Padding = new Thickness(0, FromMain ? -8 : 0),
                                                Children = { menu }
                                            }
                                        );

                                        origBounds = panel.Children[1].Bounds;
                                        if (origBounds.X < App.ScreenSize.Width)
                                            origBounds.X = App.ScreenSize.Width + 6;

                                        await panel.Children[1].LayoutTo(bounds, 250, Easing.CubicIn);
                                        panel.Children[0].Opacity = .5;
                                        App.Self.PanelShowing = true;
                                    });
                            }
                            else
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                                        await panel.Children[1].LayoutTo(origBounds, 250, Easing.CubicOut)); 
                                panel.Children.Remove(menu);
                                //panel.WidthRequest = panel.Width - menu.Content.WidthRequest;
                                panel.Children[0].Opacity = 1;
                                App.Self.PanelShowing = false;
                            }
                        })
                };
                rightCell.GestureRecognizers.Add(gestRight);

                MessagingCenter.Subscribe<MenuView, string>(this, "Menu", (sender, args) =>
                    {
                        if (args == "Close")
                        {
                            if (App.Self.PanelShowing)
                            {
                                Device.BeginInvokeOnMainThread(async() =>
                                    {
                                        if (panel.Children.Count > 1)
                                        {
                                            await panel.Children[1].LayoutTo(origBounds, 250, Easing.CubicOut); 
                                            panel.Children.Remove(menu);
                                            panel.Children[0].Opacity = 1;
                                            App.Self.PanelShowing = false;
                                        }
                                    });
                            }
                        }
                    });
            }

            grid.Children.Add(leftView, 0, 0);
            grid.Children.Add(title, 1, 0);
            grid.Children.Add(rightView, 2, 0);
            return grid;
        }
    }
    
// menu view

public class MenuListClass
    {
        public string image { get; set; }

        public string text { get; set; }
    }

    public class MenuView : ContentView
    {
        List<MenuListClass> menuList;

        public MenuView()
        {
            menuList = new List<MenuListClass>
            {
                new MenuListClass { text = "menu option 1", image = "image1l.png" },
                new MenuListClass { image = "image2.png", text = "menu option 2" },
            };

            var listView = new ListView
            {
                ItemsSource = menuList,
                ItemTemplate = new DataTemplate(typeof(MenuListView)),
                RowHeight = 48,
                WidthRequest = App.ScreenSize.Width * .85,
                SeparatorColor = Constants.LightGrey
            };

            listView.Footer = new BoxView
            {
                BackgroundColor = Color.Transparent,
                WidthRequest = App.ScreenSize.Width,
                HeightRequest = App.ScreenSize.Height - 112
            };

            listView.ItemSelected += async (object sender, SelectedItemChangedEventArgs e) =>
            {
                var selected = e.SelectedItem as MenuListClass;
                Page page = null;
                if (selected != null)
                {
                    if (selected.text == "menu option 1")
                        page = new Page1();
                    else
                        page = new Page2();

                    if (page != null)
                    {
                        MessagingCenter.Send(this, "Menu", "Close");
                        await Navigation.PushAsync(page).ContinueWith((t) =>
                            {
                                if (t.IsCompleted)
                                    Device.BeginInvokeOnMainThread(() => listView.SelectedItem = null);  
                            });
                    }
                }
            };

            Content = new StackLayout
            {
                BackgroundColor = Color.White,
                Orientation = StackOrientation.Vertical,
                MinimumWidthRequest = App.ScreenSize.Width * .85,
                WidthRequest = App.ScreenSize.Width * .85,
                HeightRequest = App.ScreenSize.Height /*- 52 - 36*/,
                Children = { listView }
            };
        }
    }

    public class MenuListView : ViewCell
    {
        public MenuListView()
        {
            var imgIcon = new Image
            {
                WidthRequest = 42,
                HeightRequest = 42,
            };
            imgIcon.SetBinding(Image.SourceProperty, new Binding("image"));

            var lblText = new CustomLabel
            {
                FontFamily = Constants.TradeGothic,
                FontSize = 18,
                VerticalTextAlignment = TextAlignment.Center,
                TextColor = Constants.MainCopy
            };
            lblText.SetBinding(Label.TextProperty, new Binding("text"));

            View = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                Padding = new Thickness(8),
                Children = { imgIcon, lblText }
            };
        }
    }
    
// calling method
// this is quite a nice way to do it
// 1. Create the vertical stacklayout (the main stack)
// 2. Create the horizontal stacklayout (the one passed to topbar)
// 3. do what you need to create the main UI and add to the horizontal layout children
// 4. Add the topbar then horizontal layout to the main stack
// 5. Make the Content = vertical_layout

void GenerateUi()
        {
            var gridStack = new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                WidthRequest = App.ScreenSize.Width,
                VerticalOptions = LayoutOptions.Start,
                Padding = new Thickness(0, -8, 0, 0)
            };

            var internalStack = new StackLayout
            {
                Orientation = StackOrientation.Vertical,
                BackgroundColor = Constants.LightGrey,
                WidthRequest = App.ScreenSize.Width,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
            
            var topbar = new TopBar("", this, "icoback.png", "icomenu.png", gridStack, false).CreateTopBar(); 
            
// and that's it!