We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Image inside circular border not cropped on iOS

I am using version 17.2.0.35 of the SfBorder control and as you can see from the screenshots in the attached zip file the image inside the border on iOS is not being cropped to fit the circle. The control appears to work fine in Android.

The XAML I am using to show this is very basic (see below):

                                <StackLayout Orientation="Horizontal"
                                             HorizontalOptions="FillAndExpand"
                                             VerticalOptions="StartAndExpand"
                                             Spacing="0"
                                             >

                                    <border:SfBorder BorderColor="White"
                                             BackgroundColor="White"
                                             CornerRadius="50"
                                             HorizontalOptions="CenterAndExpand"
                                             VerticalOptions="StartAndExpand"
                                             HasShadow="True"
                                             ShadowColor="Gray"
                                             BorderWidth="3"
                                             >

                                        <ffimageloading:CachedImage Source="{Binding ProfilePhotoLocation}"
                                                                ErrorPlaceholder="nouser.png"
                                                                DownsampleHeight="100"
                                                                DownsampleUseDipUnits="True"
                                                                x:Name="ProfilePhoto"
                                                                Aspect="AspectFill"
                                                                HeightRequest="100"
                                                                WidthRequest="100"
                                                                VerticalOptions="Center"
                                                                HorizontalOptions="CenterAndExpand"
                                                                Margin="0,0,0,0"
                                                                />

                                    </border:SfBorder>

                                </StackLayout>

Ami I doing something wrong? Any help you may be able to offer would be appreciated.

Attachment: sfBorder_66fe2e3b.zip

1 Reply

LA Lavanya Anaimuthu Syncfusion Team July 21, 2019 01:34 AM

Hi Goran, 
 
Greetings from Syncfusion. 
 
We have already logged this issue internally. As of now, you may resolve this issue by adding the below code snippet. 
 
Code Snippet: 
 <StackLayout Orientation="Horizontal"
        Margin="10, 40, 10,10"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="StartAndExpand"
       Spacing="0">
        
        <border:SfBorder BorderColor="White"
                          BackgroundColor="White" HasShadow="true"
                          CornerRadius="50"
                          ShadowColor="Gray"
                          HorizontalOptions="CenterAndExpand"
                          VerticalOptions="StartAndExpand"
                          BorderWidth="3">                               
        
            <border:SfBorder BorderColor="White"
                    BackgroundColor="White"         
                    CornerRadius="50"
                    HasShadow="false">
                                             
                <Image Source="Icon.png"
                    x:Name="ProfilePhoto"
                    Aspect="AspectFill"
                    HeightRequest="100"
                    WidthRequest="100"
                    VerticalOptions="Center"
                    HorizontalOptions="CenterAndExpand"
                    Margin="0,0,0,0" />
               
            </border:SfBorder>
            
        </border:SfBorder>

 </StackLayout>
 
 
Also, we have attached the sample, please download it from the following location. 
 
  
Please let us know if you need further assistance on this. 
 
Regards, 
Lavanya A. 


Loader.
Live Chat Icon For mobile
Up arrow icon