How can overlay a stackLayout with another existing stacklayout?

bifedefrangobifedefrango Member ✭✭
edited February 14 in Xamarin.Forms

So I have this BaseMainPage and I need it so I can have a Icon on all my page's navigation bar. And when I click this icon, I want a StackLayout to overlay the current displaying page...
This is my BaseMainPage. xaml:

<ContentPage xmlns="
             x:Class="OficinaDigitalX   .Views  .BaseMainPage">
    <ContentPage.ToolbarItems>
        <ToolbarItem Icon="notes" Clicked="ShowNotes_Clicked"/>
    </ContentPage.ToolbarItems>

    <StackLayout x:Name="NotesView" 
                 HorizontalOptions="FillAndExpand" 
                 VerticalOptions="FillAndExpand"  
                 BackgroundColor="Gray"
                 AbsoluteLayout.LayoutBounds="0,0,1,1" 
                 AbsoluteLayout.LayoutFlags="All"
                 Margin="50, 0, 0, 50">
    </StackLayout>
</ContentPage>

This is my BaseMainPage .xaml .cs:

public partial class BaseMainPage : ContentPage
    {
        public bool isNotesOpened = false;

        public BaseMainPage()
        {
            InitializeComponent();
        }

        public void ShowNotes_Clicked(object sender, EventArgs e)
        {
            if (!isNotesOpened)
            {
                NotesView .TranslateTo(0, 0, 200);
                isNotesOpened = true;

            }

            else if (isNotesOpened)
            {
                NotesView .TranslateTo(550, 0, 200);
                isNotesOpened = false;
            }
        }

This is "MyCar.xaml.cs"

public partial class MyCar : BaseMainPage
public MyCar()
        {
            InitializeComponent();
            BindingContext = new MyCarViewModel(Navigation);
        }

And my "MyCar.xaml"

<views:BaseMainPage xmlns="
        xmlns:android="clr-namespace:Xamarin. Forms. PlatformConfiguration. AndroidSpecific;assembly=Xamarin .Forms. Core"
        xmlns:views="clr-namespace:OficinaDigitalX .Views"   
        xmlns:customControls="clr-namespace:OficinaDigitalX. ViewModel"
        x:Class="OficinaDigitalX. Views. MyCar"
                    Title="Os Meus Carros">
    <views:BaseMainPage. Content>
        <AbsoluteLayout>

    ////My Code
</views:BaseMainPage.  Content>
</views:BaseMainPage> 

So the thing here is, the icon is perfect, and I get to the "shownotesclicked" code when I click the Icon... but I think my "notesView" stack layout is getting behind the new layout I'm creating within the pages that inherit from it...
So the question here is:
Pretending I'm on MyCar page, how can I overlay the page with the StackLayout "NotesView" from BaseMainPage?


The gray area is what I want to do, and the black area is tha page I'm currently in

Tagged:

Best Answer

  • YorkGoYorkGo CN Xamurai
    Accepted Answer

    Have a look at: https://github.com/rotorgames/Rg.Plugins.Popup

    Rg.Plugins.Popup - is a cross platform plugin for Xamarin.Forms which allows to open Xamarin.Forms pages as a popup that can be shared across iOS, Android and UWP (macOS supporting will be soon). Also the plugin allows to use very simple and flexible animations for showing popup pages

Answers

  • YorkGoYorkGo CNMember, Xamarin Team Xamurai
    Accepted Answer

    Have a look at: https://github.com/rotorgames/Rg.Plugins.Popup

    Rg.Plugins.Popup - is a cross platform plugin for Xamarin.Forms which allows to open Xamarin.Forms pages as a popup that can be shared across iOS, Android and UWP (macOS supporting will be soon). Also the plugin allows to use very simple and flexible animations for showing popup pages

  • bifedefrangobifedefrango Member ✭✭

    thank's a lot, this is very helpfull!

Sign In or Register to comment.