Image inside circular border not cropped on iOS

[Goran Zidar]

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

[Lavanya Anaimuthu]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Border_(1)725383317.zip 

  

Please let us know if you need further assistance on this. 

 

Regards, 

Lavanya A.