Adjust/remove padding above and below the image

[Trevor Christensen]

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]

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 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/RotatorSample-14571707  

 

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]

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]

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]

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]

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.