Align Bottom

NestorLedonNestorLedon USMember ✭✭

How would I go about aligning the second StackLayout to the bottom of parent RelativeLayout? Thanks.

            <RelativeLayout x:Name="EventImageLayout" VerticalOptions="Start" HorizontalOptions="Center">

                <StackLayout VerticalOptions="Start" HorizontalOptions="Start">
                    <Image x:Name="EventImage" Source="http://tinyurl.com/lc7hnty" />
                </StackLayout>

                <StackLayout VerticalOptions="End" HorizontalOptions="Center" Padding="12,0">
                    <Label Text="{Binding Event.Name}" FontSize="Large" TextColor="#ffffffff" LineBreakMode="NoWrap" FontAttributes="Bold"/>
                </StackLayout>

            </RelativeLayout>

Posts

  • MitchMilamMitchMilam USMember ✭✭✭

    @NestorLedon You will have to set a Constraint on the second StackLayout to align it to the Parent's height. Take a look at the documentation.

  • NestorLedonNestorLedon USMember ✭✭

    @MitchMilam thanks for the reference. Set me in the right direction. The answer looks like so:

                <StackLayout Orientation="Vertical">
                    <RelativeLayout x:Name="EventImageLayout">
    
                        <StackLayout>
                            <Image x:Name="EventImage" Source="http://tinyurl.com/lc7hnty" />
                        </StackLayout>
    
                        <StackLayout 
                            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.25}"
                            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.85}">
                            <Label Text="{Binding Event.Name}" FontSize="Large" TextColor="#ffffffff" LineBreakMode="NoWrap" FontAttributes="Bold"/>
                        </StackLayout>
    
                    </RelativeLayout>
                </StackLayout>
    

    Had to make some additional changes around the parent to get it to work right but the most important part is the RelativeLayout.YConstraint.

  • If you want move contenitorBottom to the bottom of Parent.

            StackLayout contenitorBottom = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = new Color(255, 122, 122, 0.3),
                Margin = new Thickness(5, 0, 5, 5)
            };
            Children.Add(contenitorBottom, 
                                    Constraint.RelativeToParent((parent) => { return parent.X; }), 
                                    Constraint.RelativeToParent((parent) => { return parent.Y + parent.Height - (parent.Height* 0.15); }),
                                    Constraint.RelativeToParent((parent) => { return parent.Width; }),
                                    Constraint.RelativeToParent((parent) => { return parent.Height* 0.15; }));
    

    `

  • Pamelarios.2249Pamelarios.2249 USUniversity ✭✭

    Im trying to organize the following views . 1 autocomplete (parent) 2.label (should be relative to parent ) 3.mapview (relative to label )4.buttons (should be at the end of the page )
    Label labelInfo = new Label { Text = " Hello ", BackgroundColor = Color.White, TextColor = Color.Black ,HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center};
    // create map style buttons
    var street = new Button { Text = "Street" };
    var hybrid = new Button { Text = "Hybrid" };
    var satellite = new Button { Text = "Satellite" };

              var segments = new StackLayout
            {
                Spacing = 70,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                HeightRequest = 30,
                Orientation = StackOrientation.Horizontal,
                Children = { street, hybrid, satellite }
            };
    
            //this.Content = mapView;
            this._baseLayout.Children.Add(
                mapView,
                Constraint.RelativeToView(autoComplete, (r, v) => v.X),
                Constraint.RelativeToView(autoComplete, (r, v) => autoComplete.HeightOfSearchBar),
                heightConstraint: Constraint.RelativeToParent((r) => r.Height - autoComplete.HeightOfSearchBar),
                widthConstraint: Constraint.RelativeToView(autoComplete, (r, v) => v.Width));
    
            this._baseLayout.Children.Add(
                autoComplete,
                Constraint.Constant(0),
                Constraint.Constant(0));
    
            this._baseLayout.Children.Add(
                labelInfo,
                Constraint.RelativeToView(autoComplete, (r, v) => v.X),
                Constraint.RelativeToView(autoComplete, (r, v) => autoComplete.HeightOfSearchBar),
                heightConstraint: Constraint.RelativeToParent((r) => r.Height - autoComplete.HeightOfSearchBar),
                widthConstraint: Constraint.RelativeToView(autoComplete, (r, v) => v.Width));
    
            this._baseLayout.Children.Add(
                segments,
                Constraint.Constant(-0),
                Constraint.Constant(-0));
    
    
        }
    
Sign In or Register to comment.