CODEWITHSUNDEEP
androidiosxamarin.forms
Morten J Petersen
Morten J Petersen

Reputation: 233

Image in rounded frame fails to conform to the frame on iOS but not Android

I have some XAML in Xamarin Forms that creates a rounded frame containing an image.

        <Frame CornerRadius="45" HasShadow="false" BackgroundColor="White" Padding="5" HorizontalOptions="End" VerticalOptions="End" HeightRequest="80" WidthRequest="80" Margin="10">
            <Image Source="camerabutton.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Scale="1.5">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                                Command="{Binding CameraPageCommand}"
                                CommandParameter="camerabutton"
                                Tapped="OnCameraClicked"/>
                </Image.GestureRecognizers>
            </Image>
        </Frame>

I'm aware that there seem to be some issues regarding the frame element when it comes to iOS but I'm hoping someone can aid me with this issue.

On Android it works exactly as intended and perfectly cuts off the corners and displays a rounded cut out of the image. But on iOS the image merely overlaps, see images below.

enter image description here enter image description here

This is obviously not what I intended and my preference is to have it conform to how it looks on Android.

Upvotes: 1

Views: 499

Answers (2)

Ziyad Godil
Ziyad Godil

Reputation: 2680

Solution 1 : First you try to set Property of frame IsClippedToBounds="true"

OR

Solution 2 : Add rendering on IOS and here is the renderer code:

[assembly: ExportRenderer(typeof(Frame), typeof(CustomFrameRenderer))]
namespace YOU_IOS_NAMESPACE
{
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
    {
        base.OnElementChanged(e);
        var view = (CustomFrame)Element;

        if (view != null)
        {
           Layer.CornerRadius = (nfloat)view.CornerRadius;
           Layer.MasksToBounds = true;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        var view = (CustomFrame)Element;

        if (view != null)
        {
            Layer.CornerRadius = (nfloat)view.CornerRadius;
            Layer.MasksToBounds = true;
        }
    }
}

Upvotes: 3

Rudy Spano
Rudy Spano

Reputation: 1421

I've already encountered this kind of bugs using Frame control. Perhaps you can try to use another control like this one: https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/RoundedBoxView

And why are you setting a padding of 5 on your frame?

Upvotes: 1

Related Questions