How to right align Stacklayout inside RelativeLayout?

Hi,
I want to make a custom popup menu on top right corner. I am using a StackLayout inside a RelativeLayout. How do I make below xaml "PopupMenuLayout" (StackLayout) right align to parent "MainLayout" (RelativeLayout)? "PopupMenuLayout" 's width can expand or shrink base on it's children inside the layout. I need to set the RelativeLayout.XConstraint = Parent.Width - Self.Width. How to do it in XAML? I prefer solve in XAML but in code also fine.

My current code which does not work:

<RelativeLayout x:Name="MainLayout">

    <StackLayout x:Name="DetailLayout" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Label Text="Some Text float on Bottom" VerticalOptions="Center" HorizontalOptions="Start" />
    </StackLayout>
    <StackLayout x:Name="PopupMenuLayout"                         
                         Orientation="Horizontal"     
                         HorizontalOptions="EndAndExpand"
                         HeightRequest="260" WidthRequest="240"
                         IsVisible="{Binding isPopupMenuVisible}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-240}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}">
            <Label Text="Some Text float on Top" VerticalOptions="Center" HorizontalOptions="Start" />
    </StackLayout>

</RelativeLayout>

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    I think you can use absolutelayout. Take a look to Xamarin doc
  • VenkataSwamyVenkataSwamy INMember ✭✭✭

    Hii @ThomasCheung

    Compare to RelativeLayout, AbsoluteLayout is best to display custom popups.

    The below link might be useful

    https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/

  • Hi @ThomasCheung

    If you are insisted to use Relative Layout then,

    for Right side Alignment

        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0,Constant=0}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1, Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.5,Constant=0}"
    

    In the above lines of code
    Factor multiplies the amount of property of the parent
    and Constants add to the property of the parent
    here for height I provided factor = 0.5 which means i am asking it to take 50% of the height of the parent
    for Alignment i used
    Y factor = 0 so it sticks to top
    X factor = 1 so it sticks on the right side of the page

    I hope this meets your requirements.

  • ThomasCheungThomasCheung USMember

    Thanks for the suggestions. @VenkataSivaprasadReddyPulagam I tried your suggestion but the popup menu still show up on the left edge of the screen rather than the right.

    <ScrollView Orientation="Vertical" VerticalOptions="FillAndExpand"> 
    <RelativeLayout x:Name="MainLayout">
    
        <StackLayout x:Name="DetailLayout" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Label Text="Some Text float on Bottom" VerticalOptions="Center" HorizontalOptions="Start" />
        </StackLayout>
        <StackLayout x:Name="PopupMenuLayout"                         
                         Orientation="Horizontal"     
                         HorizontalOptions="EndAndExpand"
                         HeightRequest="260" WidthRequest="240"
                         IsVisible="{Binding isPopupMenuVisible}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0,Constant=0}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1,Constant=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5,Constant=0}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.5,Constant=0}">
    
            <Frame x:Name="PopupMenuFrame" Style="{StaticResource PopUpFrameStyle}" HorizontalOptions="EndAndExpand" >
                            <StackLayout Orientation="Vertical" Spacing="10" HorizontalOptions="EndAndExpand">
                    <Label Text="Some Text float on Top" VerticalOptions="Center" HorizontalOptions="Start" />
                </StackLayout>
            </Frame>
        </StackLayout>
    
    </RelativeLayout>
    </ScrollView>   
    

    Thanks @Alessandro, @Venkata. I also follow the examples of AbsoluteLayout but also show up on the left screen. Even set fix X, Y, Width, Height with AbsoluteLayout. See below XAML. But also show up on left edge of screen. Something is setting this popup layout to left align??

    <AbsoluteLayout x:Name="PopupMenuLayout" IsVisible="{Binding isPopupMenuVisible}" AbsoluteLayout.LayoutBounds="100, 50, 300, 300">
    
Sign In or Register to comment.