CODEWITHSUNDEEP
xamarin.forms
Linh Dao
Linh Dao

Reputation: 1683

How do i write the following statements in XAML for RelativeLayout of Xamarin Forms?

I want to arrange some controls inside a RelativeLayout of Xamarin Forms. In C#, i wrote the following code to archive my goal:

_avatar = new Xamarin.Forms.Image();
_rlTopLayout.Children.Add(_avatar, 
    xConstraint: Constraint.Constant(0),
    yConstraint: Constraint.Constant(0),
    widthConstraint: Constraint.Constant(78),
    heightConstraint: Constraint.Constant(94)
);
_roundedBorderEntry = new Xamarin.Forms.Entry();
_rlTopLayout.Children.Add(_roundedBorderEntry,
    xConstraint: Constraint.RelativeToView(_avatar, (parent, sibling) => sibling.X + sibling.Width),
    yConstraint: Constraint.RelativeToView(_avatar, (parent, sibling) => sibling.Y),
    widthConstraint: Constraint.RelativeToView(_avatar, (parent, sibling) => parent.Width - sibling.Width),
    heightConstraint: null
);

How do i archive this with XAML layout file? Especially with the following expression:

xConstraint: Constraint.RelativeToView(_avatar, (parent, sibling) => sibling.X + sibling.Width)
widthConstraint: Constraint.RelativeToView(_avatar, (parent, sibling) => parent.Width - sibling.Width)
heightConstraint: null

Upvotes: 1

Views: 123

Answers (2)

Ben
Ben

Reputation: 2995

XAML, assuming the image is 100 by 50:

<RelativeLayout x:Name="relativeLayout" HorizontalOptions="FillAndExpand" >
  <Image x:Name="image" Source="100x50.png" WidthRequest="100" HeightRequest="50"/>
  <Entry x:Name="entry" Text="enter text here"
         RelativeLayout.XConstraint=
             "{ConstraintExpression Type=RelativeToView, ElementName=image, 
                                    Property=Width, Factor=1, Constant=0}"
         RelativeLayout.WidthConstraint=
             "{ConstraintExpression Type=RelativeToParent,
                                    Property=Width, Factor=1, Constant=-100}" />
</RelativeLayout>

Please note that in XAML sibling refer to a named element using x:Name and the ElementName=elementName construct.

Upvotes: 1

Martin Zikmund
Martin Zikmund

Reputation: 39112

Creating RelativeLayout constraints is surely easier in code than in XAML. You can see this thread on Xamarin.Forums where developers discuss the available syntax.

For your case it however might not be enough. See the post by MikeEEE who created a custom markup extension to handle the special cases. He published example on his GitHub here, here and sample page here.

Upvotes: 1

Related Questions