How to set an image at the center of a background image inside a grid?

bgtmbgtm USMember ✭✭
edited February 2017 in Xamarin.Forms

I have a background image occupy the entire row of a grid and a circular image on top of it(for which i have used custom renderer), which needs to be at the center of the view, irrespective of the device. And two labels below the circular image,vertically aligned.

 <RelativeLayout Grid.Row="0" Grid.ColumnSpan="4" >              
            //background image -- occupies the entire width and given height for the row (no issue)
            <Image Source="bg.png"
                          Aspect="Fill"
                                  x:Name="backgroundImage"

                                  RelativeLayout.WidthConstraint="{ConstraintExpression
                             Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
                              RelativeLayout.HeightConstraint="{ConstraintExpression
                                 Type=RelativeToParent, Property=Height, Factor=1, Constant=0}"/>

            //foreground circular image-- y-constraint, height and width are as required

             <controls:CircularImage Source="foreground.png"
                                      Aspect="AspectFit"
                                  x:Name="foregroundImage"

                                  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                                        ElementName=backgroundImage, Property=Height, Factor=0.1, Constant=0}"
                                  RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                        ElementName=backgroundImage, Property=Width, Factor=0.4, Constant=0}"
                                      RelativeLayout.WidthConstraint="{ConstraintExpression
                                    Type=RelativeToParent, Property=Height, Factor=.4, Constant=0}"
                                  RelativeLayout.HeightConstraint="{ConstraintExpression
                                    Type=RelativeToParent, Property=Height, Factor=.6, Constant=0}" />

                <Label Text="ABCDEFGH"
                               Grid.Column="2"
                               Grid.ColumnSpan="2"
                               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                                    ElementName=profileImage, Property=Height, Factor=0.7, Constant=0}"
                           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                    ElementName=profileImage, Property=X, Factor=0, Constant=0}"
                               RelativeLayout.WidthConstraint="{ConstraintExpression
                                    Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
                               RelativeLayout.HeightConstraint="{ConstraintExpression
                                Type=RelativeToParent, Property=Height, Factor=.6, Constant=0}" />
                          //code
     </RelativeLayout>

Now, the circular image is aligned differently on different resolutions, if xconstraint factor=0.4, fine in 7" device, but towards right in smaller ones.

How do i make it look the same in all devices?

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭

    You could make 3 columns and 3 rows in the Grid. Then set the middle row/column to an absolute width and height, and use Star on the Left/Right/Top/Bottom columns.

    You might need to use Grid.SetRowSpan(IMAGING, 3); or same for ColumnSpan

  • trishelwoodtrishelwood USMember ✭✭

    You can use AbsoluteLayout instead of RelativeLayout and set your circle image's bound to 0.5,0.5,your_width,your_height and set AbsoluteLayout.LayoutFlags="XProportional,YProportional"

Sign In or Register to comment.