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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adjust/remove padding above and below the image

Thread ID:

Created:

Updated:

Platform:

Replies:

144492 May 8,2019 08:25 PM UTC May 13,2019 08:58 AM UTC Xamarin.Forms 5
loading
Tags: SfRotator
Trevor Christensen
Asked On May 8, 2019 09:27 PM UTC

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:

                     
                       
                           
                               
                                   
                               
                           
                       

Muneesh Kumar G [Syncfusion]
Replied On 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, 
 
           
       <rotator:SfRotator.ItemTemplate>
                <DataTemplate>
                    <Image  Source="{Binding Image}" Aspect="Fill"/>
                </DataTemplate>
            </rotator:SfRotator.ItemTemplate>
 
 
 
 
 
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.  
 
Regards, 
Muneesh Kumar G. 


Trevor Christensen
Replied On 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? 

Muneesh Kumar G [Syncfusion]
Replied On 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.  
  
Thanks,  
Muneesh Kumar G, 


Trevor Christensen
Replied On 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

Muneesh Kumar G [Syncfusion]
Replied On 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. 
 
Regards,  
Muneesh Kumar G.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon