Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Corner radius in relative layout

WorldOfBastiWorldOfBasti Member ✭✭✭

Hello, I am using a relative layout to display round buttons. I use the width property to make it responsive, but I don't get the corner radius responsive. It looks good on the iPhone 11 Pro, but on the iPhone SE is the radius too high. How can I make it reponsive? Here a screenshot of the iPhone 11 Pro and SE:

Here is my code:

        <RelativeLayout x:Name="mainLayout">

            <Button Text="Button" TextColor="White" CornerRadius="40" BackgroundColor="Gray" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"/>

    </RelativeLayout>

Is there any solution for this? Thanks in advance.

Best Answer

Answers

  • WorldOfBastiWorldOfBasti Member ✭✭✭

    @aliahmad71452 said:
    You can do this by adding converter or behaviour. i am giving you an example how can you do this.

    at XAML

    <Button x:Name="button" Padding="0" Margin="0" Text="Button" TextColor="White" BackgroundColor="Gray" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"/>

    at backend

    button.PropertyChanged += (s, e) =>
    {
      if (e.PropertyName.Equals(nameof(Height)))
          ((Button)s).CornerRadius = (int)((Button)s).Height / 2;
    }; 
    

    This works great! Thanks, you made my day.

Sign In or Register to comment.