How can I make an overlaping menu using layouts

I have a menu button that I want to show or hide a menu like in the following picture but I don't want the red area showing. I would like to be able to see any text that could be behind the red.

This is the xaml that generates the current view

            <StackLayout
                Orientation="Vertical"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="EndAndExpand">
                <AbsoluteLayout
                    BackgroundColor="Red"
                    IsVisible="{Binding FormMenuExpanded}">
                    <Components:MenuList
                        AbsoluteLayout.LayoutFlags="PositionProportional"
                        AbsoluteLayout.LayoutBounds="0,0,150,200"
                        VerticalOptions="EndAndExpand"
                        x:Name="FormMenuList"
                        ItemSource="{Binding FormMenuOptions}"
                        IsVisible="{Binding FormMenuExpanded}"/>
                </AbsoluteLayout>
                <Components:FormNavigationToolBar
                    AutomationId="{x:Static constants:AutomationIds.FORM_PAGE_NAVIGATION_TOOLBAR}"
                    x:Name="FormNavigationToolBar" 
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="EndAndExpand"
                    FormTotalPages="{Binding TotalPages}"
                    ButtonWidth="{Binding FormNavigationToolBarHeight}"
                    FormCurrentPageNumber="{Binding CurrentPage}"
                    FormMenuExpanded="{Binding FormMenuExpanded}"/>
            </StackLayout>
Tagged:

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    BackgroundColor = "Transparent" ?

  • jmaurierjmaurier Member ✭✭

    @JohnHardman
    That's what I tried at first and it hides the text behind it still. I changed it to red to make it visible.

    Example:

  • NMackayNMackay GBInsider, University mod

    @jmaurier

    Had a very similar requirement recently, used Rg.Plugins to have a nice animated menu that slides in from a bottom toolbar, it's worth investigating. You can do a lot with that plugin.

  • JohnHardmanJohnHardman GBUniversity mod

    @jmaurier said:
    That's what I tried at first and it hides the text behind it still. I changed it to red to make it visible.

    The XAML above is only part of the XAML of the page, so I cannot be definitive as to whether anything more is required, but I would assume that the BackgroundColor="Transparent" is required for more than just where the "Red" is shown above. Set Transparent for the StackLayout as well for a start and see what you get then.

  • jmaurierjmaurier Member ✭✭

    @JohnHardman I went through and made everything I could transparent. The text from the sibling StackLoayout is still hidden.

    I may end up using Rg.Plugins but it seems a little excessive. Here is the current full xaml (without all the duplicated labels). Maybe something in my xaml needs to use an absolute layout.

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentView
        xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="Inform.Forms.Views.FormView"
        xmlns:Components="clr-namespace:Inform.Forms.Components"
        xmlns:constants="clr-namespace:Inform.Forms.Constants"
        AutomationId="{x:Static constants:AutomationIds.FORM_PAGE_IDENT}">
        <ContentView.Resources>
            <ResourceDictionary>
                <Style Class="ContentContainer" TargetType="StackLayout">
                    <Setter Property="BackgroundColor" Value="{x:Static constants:Strings.LightBackgroundColor}" />
                    <Setter Property="Orientation" Value="Vertical"/>
                    <Setter Property="VerticalOptions" Value="FillAndExpand"/>
                    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
                    <Setter Property="Padding" Value="0,0"/>
                </Style>
            </ResourceDictionary>
        </ContentView.Resources>
        <ContentView.Content>
            <StackLayout
                StyleClass="ContentContainer"
                Spacing="0">
                <Components:Banner AutomationId="Banner" Margin="0,0"/>
                <ScrollView>
                    <StackLayout
                        Spacing="0">
                        <StackLayout Padding="10,10,10,10">
                            <Label Text="form name" />
                            <Label Text="{Binding Name}" />
                            <StackLayout Orientation="Horizontal">
                                <Label Text="Page " TextColor="Black"/>
                                <Label Text="{Binding CurrentPage}" TextColor="Black"/>
                            </StackLayout>
                        </StackLayout>
                        <ContentView
                            Content="{Binding CurrentView}"
                            BackgroundColor="{StaticResource LightBackgroundColor}" />
                    </StackLayout>
                </ScrollView>
                <StackLayout
                    Orientation="Vertical"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="EndAndExpand"
                    BackgroundColor="Transparent"
                    Spacing="0">
                    <AbsoluteLayout
                        BackgroundColor="Transparent"
                        IsVisible="{Binding FormMenuExpanded}">
                        <Components:FlyOutMenu
                            AbsoluteLayout.LayoutFlags="PositionProportional"
                            AbsoluteLayout.LayoutBounds="0,0,175,200"
                            VerticalOptions="EndAndExpand"
                            x:Name="FormMenuList"
                            ItemSource="{Binding FormMenuOptions}"
                            IsVisible="{Binding FormMenuExpanded}"/>
                    </AbsoluteLayout>
                    <Components:FormNavigationToolBar
                        AutomationId="{x:Static constants:AutomationIds.FORM_PAGE_NAVIGATION_TOOLBAR}"
                        x:Name="FormNavigationToolBar" 
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="EndAndExpand"
                        FormTotalPages="{Binding TotalPages}"
                        ButtonWidth="{Binding FormNavigationToolBarHeight}"
                        FormCurrentPageNumber="{Binding CurrentPage}"
                        FormMenuExpanded="{Binding FormMenuExpanded}"/>
                </StackLayout>
            </StackLayout>
        </ContentView.Content>
    </ContentView>
    
Sign In or Register to comment.