How to properly use Relative Layout, using images, inside a content view.

JPHochbaumJPHochbaum USMember ✭✭✭
edited June 2017 in Xamarin.Forms

Below is the Content View and the two images I want placed inside the Content View.

Right now only the second image, "star", shows up in the content view. And it appears to only show up on the Factor .3 section of the Content View. So it appears I am not using RelativeLayout correctly. I tried referencing the documentation as much as possible but there is very little documentation for Relative Layout.

I would like to have one image on the left an one on the right, inside the content view.

  <RelativeLayout>
            <ContentView  x:Name="MenuBox"
                          BackgroundColor="Gray"
                          RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Width}"
                          RelativeLayout.HeightConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25}">


                <RelativeLayout>
                    <Image x:Name ="filter" Source="BlueFilterUnfilled.png" 
                                RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25}"
                                RelativeLayout.HeightConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.75}" 
                                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=X, Factor=.3}"/>

                </RelativeLayout>
                <RelativeLayout>
                    <Image x:Name ="star" Source="BlueUnfilledStar.png"
                            RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25}"
                                RelativeLayout.HeightConstraint ="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.75}" 
                                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=X, Factor=.7}"/>
                </RelativeLayout>

            </ContentView>
        </RelativeLayout>

Best Answer

  • JPHochbaumJPHochbaum US ✭✭✭
    Accepted Answer

    I found an example of how to get what I needed.

    I could avoid the Content View and just use the relative layout. Getting a better grip on how this works now.

     <RelativeLayout BackgroundColor="Gray" RelativeLayout.YConstraint="
                {ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=220}" HeightRequest="50" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
    
                <Image x:Name ="star" Source="BlueFilterUnfilled.png"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=10}" />
                <Picker x:Name="ColumnScroller"  BackgroundColor="White" Title="Column Picker" 
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.17, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.25, Constant=15}" />
                <Image x:Name ="filter"  Source="BlueUnfilledStar.png"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=100}" />
            </RelativeLayout>
    

Answers

  • JPHochbaumJPHochbaum USMember ✭✭✭
    Accepted Answer

    I found an example of how to get what I needed.

    I could avoid the Content View and just use the relative layout. Getting a better grip on how this works now.

     <RelativeLayout BackgroundColor="Gray" RelativeLayout.YConstraint="
                {ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=220}" HeightRequest="50" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
    
                <Image x:Name ="star" Source="BlueFilterUnfilled.png"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=10}" />
                <Picker x:Name="ColumnScroller"  BackgroundColor="White" Title="Column Picker" 
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.17, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.25, Constant=15}" />
                <Image x:Name ="filter"  Source="BlueUnfilledStar.png"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=100}" />
            </RelativeLayout>
    
Sign In or Register to comment.