locked
Place Image on Frame's Border RRS feed

  • Question

  • User31568 posted

    Hi,

    How can I place an image on the Frame border centered just like the Bill gates and USA flag here in the attached image?

    Thanks, Jassim

    Sunday, December 22, 2019 11:20 AM

Answers

  • User371688 posted

    You can use RelativeLayout to achieve this.I just created a simple demo,you can check it.

        <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Frame 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}"    
             Margin="30"
             BorderColor="Black"
             CornerRadius="10"
             HeightRequest="80"
             WidthRequest="160"
             IsClippedToBounds="True"
             HorizontalOptions="Center"
             VerticalOptions="Center">
            </Frame>
            <Image 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .25}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.02}"
             Source="outdoors.jpg"
             Aspect="AspectFill"
             HeightRequest="40"
             WidthRequest="50" />
    
            <Image 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .25}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.2}"
             Source="outdoors.jpg"
             Aspect="AspectFill"
             HeightRequest="40"
             WidthRequest="50" />
        </RelativeLayout>
    

    For more details about RelativeLayout, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout

    The result is

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, December 23, 2019 7:04 AM

All replies

  • User200920 posted

    Hi @JassimRahma Try to add IsClippedToBounds="true" on Frame, Like below example

    <Frame Margin="10"
           BorderColor="Black"
           IsClippedToBounds="True"
           HorizontalOptions="Center"
           VerticalOptions="Center">
      <Image Source="outdoors.jpg"
             Aspect="AspectFill"
             HeightRequest="100"
             WidthRequest="100" />
    </Frame>
    
    Monday, December 23, 2019 7:03 AM
  • User371688 posted

    You can use RelativeLayout to achieve this.I just created a simple demo,you can check it.

        <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Frame 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}"    
             Margin="30"
             BorderColor="Black"
             CornerRadius="10"
             HeightRequest="80"
             WidthRequest="160"
             IsClippedToBounds="True"
             HorizontalOptions="Center"
             VerticalOptions="Center">
            </Frame>
            <Image 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .25}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.02}"
             Source="outdoors.jpg"
             Aspect="AspectFill"
             HeightRequest="40"
             WidthRequest="50" />
    
            <Image 
             RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .25}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0.2}"
             Source="outdoors.jpg"
             Aspect="AspectFill"
             HeightRequest="40"
             WidthRequest="50" />
        </RelativeLayout>
    

    For more details about RelativeLayout, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relative-layout

    The result is

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, December 23, 2019 7:04 AM