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

Adjust/remove padding above and below the image

I currently have the rotator implemented with the data template containing only an image with a binding source. The source I'm using will always contain a 1 x 1 image, fit to the width of the device screen. 

I'm trying to remove/adjust the default padding that seems to be given to the top and bottom of the image in the rotator (seems there is a bit more padding on iOS than Android, but I would like there to be none with placement mode set to dots or none). The navigation strip seems to be in different positions as well on both platforms (Android it is touching the bottom of the image, iOS puts it below the image in the default padding area). 

My question is how/can I achieve the removal of this space that seems to be added to the top and bottom of the image? There seems to be zero padding if the navigation mode is set to thumbnail, but I want there to be none for the other mode (dots/no dots).

Example of implementation:


5 Replies

MK Muneesh Kumar G Syncfusion Team May 9, 2019 12:34 PM UTC

Hi Trevor,

Greetings from Syncfusion, we have validated your requirement . You can achieve this by setting "Aspect" property as Fill for Image control it exactly fills the view. Code snippet for this, 
                    <Image  Source="{Binding Image}" Aspect="Fill"/>
Please find the sample from below location 
If your requirement different from this, we request you to try our sample and provide us more details about your requirement or modify the sample above and send it back to us.  
Muneesh Kumar G. 

TC Trevor Christensen May 9, 2019 01:38 PM UTC

Thanks for getting back to me. This method will fill the image to the rotator view, but is vertically stretching the image to do. I want to maintain the 1 x 1 aspect of the image. Is there a way to set the rotator view to fit the 1 x 1 image without adding padding above and below, or is it a fixed height? 

MK Muneesh Kumar G Syncfusion Team May 10, 2019 10:34 AM UTC

Hi Trevor, 
We have analyzed your query, but we are unable to get your exact requirement from that. In your first update you have mentioned Example of implementation. But nothing visible in that section. Can you please share the implementation code and image which is used to fill in SfRotator? This would be helpful for us to give better solution in this.  
Muneesh Kumar G, 

TC Trevor Christensen May 10, 2019 03:42 PM UTC

Hello again, 

I have modified your sample to display the issue. The below image (first) shows when padding is added to the parent stack (with vertical settings to "start" and aspect set to "fill") you can see better that the 1 x 1 image is stretched vertically. In order to properly display the image, I have removed the aspect setting (set to "fill" previously) so that the image will retain its 1 x 1 aspect. This will result in the rotator remaining the same size (filling the screen) while the image is proper size, leaving a lot of extra padding as seen with the dark gray background color of the rotator (second image). I have attached the modified sample as well. I want the rotator to only be as large as the image is with proper aspect.

Attachment: RotatorSample14571707_7ad1e52c.zip

MK Muneesh Kumar G Syncfusion Team May 13, 2019 08:58 AM UTC

Hi Trevor, 
The Rotator behavior is to hold any view that is provided in the ItemTemplate either Image or any Entry, Button controls. Also, unlike ContentView, Rotator control will be holding multiple views which may have different layouts and different sizes.  
So, based on a single image loaded we cannot shrink the control as that will affect other views. So, if we are maintaining common image sizes, we can manually set the WidthRequest and HeightRequest based on the Image used. 
If you still face any difficulties, please check and let us know. 
Muneesh Kumar G.  

Live Chat Icon For mobile
Up arrow icon