Embedded Image Exceeds WidthConstraint of Layout (RelativeLayout)

bokelabokela USMember
edited May 2017 in Xamarin.Forms

I have an issue with image resource embedded within relative layout. Image itself scales perfectly even though its large image, but somehow its width exceeds given width constraint within layout.

Following code shows Relative layout with image (Koala.jpg) in question:

<RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                            <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                            <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                        </RelativeLayout>

The "HotelButton" RelativeLayout stack is expanded additionally over its defined width constraint (to MenuStack layout) when image is inserted within.
As you can see the "Red" layout in the background which is used to make and mark Menu limits, Hotel Button and Profile Button should be within "Red" layout in the background. But when image is inserted for Hotel Button it pushes Profile button out of bounds of "Red" layout.

Note, Hotel button and Profile button should be the same size - same width. Hotel button is marked with "Orange" color for better clarification.

Why is this happening when image is inserted within layout?
Why image itself is not scaled within defined width constraints of layout (Hotel button)?

Should I use different layout type or combinations of layouts when embedding image like this?
Any suggestions and corrections are welcome.
Thanks!

Complete XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestUIPCL;assembly=TestUIPCL"
             x:Class="TestUIPCL.Page1">

    <RelativeLayout VerticalOptions="Fill"
                    HorizontalOptions="Fill" x:Name="backrel"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}" >

        <RelativeLayout VerticalOptions="Fill"
                        HorizontalOptions="Fill" x:Name="backmenu"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=backrel,Property=Width, Factor=0.5}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0.4}" BackgroundColor="Black">

            <StackLayout Orientation="Vertical" x:Name="MainStack" Margin="0,0,0,0" HorizontalOptions="Fill"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1}" BackgroundColor="Red">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center"  HeightRequest="150" Margin="0,20,0,0"  x:Name="LogoStack" BackgroundColor="Black">
                    <Image Source="{local:ImageResource TestUIPCL.images.logo.png}"  Margin="0,0,0,0" VerticalOptions="CenterAndExpand"  />
                </StackLayout>

                <StackLayout Orientation="Horizontal" x:Name="MenuStack"  HeightRequest="150"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainStack, Property=Width, Factor=0.2}">

                    <RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                        <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                        <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                    </RelativeLayout>

                    <StackLayout HorizontalOptions="CenterAndExpand"  HeightRequest="100" x:Name="ProfileButton"  BackgroundColor="Black" Opacity="0.5">
                        <Image Source="{local:ImageResource TestUIPCL.images.logohotel.png}" VerticalOptions="Center" Margin="0,0,0,0"/>
                        <Label x:Name="lblProfile" TextColor="White" Text="PROFILE" HorizontalOptions="Center" Margin="0,2,0,0" YAlign="Start"></Label>
                    </StackLayout>


                </StackLayout>
            </StackLayout>

        </RelativeLayout>
    </RelativeLayout>

</ContentPage>
Sign In or Register to comment.