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

SfCarousel with a full screen current item

Thread ID:

Created:

Updated:

Platform:

Replies:

144047 Apr 16,2019 06:54 AM UTC Jun 29,2020 10:23 PM UTC Xamarin.Forms 8
loading
Tags: SfCarousel
Lirbuj
Asked On April 16, 2019 07:00 AM UTC

Hi there,

One of the use cases I need the SFCarousel control for is to have the current view (as defined in the itemtemplate) displayed in full screen. At any one time I only want to see the current view; not the next and previous views.

However despite having my dimensions set to use up the full screen (I host it in an absolutelayout), the control still displays my view in a 3rd of the screen space with the preceding and following views on the side.

I want to use the control to display book pages that can be viewed with left or right swipes (like a book reader) so I don't need the preview of  preceding or following pages. I only want the preceding and following views to show during the swipe action.

The closest I am able to get what I want is the Linear viewmode, but I am still unable to figure out how to make the current view take up the full screen. Note, the the SfCarousel control itself takes up the full screen, but its contents (my view) is reduced to a fraction of the screen.

Any pointers would be much appreciated. Thank you.

Kind regards

Muneesh Kumar G [Syncfusion]
Replied On April 16, 2019 12:58 PM UTC

Hi Jubril, 
 
Thanks for using Syncfusion support.  
  
We have checked your requirement in SfCarousel control, and we have prepared a simple sample with ItemTemplate to display the items in SfCarousel with full view through ViewMode as Linear.  
 
We have set the Aspect as Fill. Since to show the SfCarouselItem to the full view we have set the Aspect as Fill and succeeding page also gets filled. Please have the sample from the below link, 
 
 
Screenshot: 
 
Please check with the sample and if the requirement differs from the sample please mention additional details with which platform the mentioned behavior is observed which will be helpful for us to analyze and provide an appropriate solution. 
 
Thanks, 
Muneesh Kumar G. 
 


Lirbuj
Replied On April 16, 2019 04:01 PM UTC

Hi,

Thanks for the response, but unfortunately your solution does not meet my requirements, See attached for what I get and what I'm looking for.

Example1.png - the image with the yellow space is what I get from your code. As you can see it doesn't fill up the screen. Note the yellow space that I have marked in red. This is not what I want.

Instead, I'd like my current item to fill up the screen like shown in the Example2.png.

Platform - Xamarin Forms targeting just IOS.


Also it is worth mentioning that my main item data is not an image view, but instead an absolutelayout that has other children views within it.


Thanks again and kind regards




Attachment: Example_73c4f8b6.zip

Muneesh Kumar G [Syncfusion]
Replied On April 17, 2019 06:28 AM UTC

Hi Lirbuj, 
 
Thanks for your update, we have checked your query and prepared a sample with the SfCarousel placed in the AbsoluteLayout and when placed inside the Layout the Carousel will render with its default height.  
 
Hence, we need to provide the desired ItemHeight to display the image with required height as per the below code snippet. 
 
Code snippet 
 
    <ContentPage.Resources> 
        <ResourceDictionary> 
            <DataTemplate x:Key="itemTemplate"> 
        <Image Source="user.png" Aspect="Fill" HeightRequest="2000" WidthRequest="300"/> 
            </DataTemplate> 
        </ResourceDictionary> 
    </ContentPage.Resources> 
    <ContentPage.Content> 
        <AbsoluteLayout BackgroundColor="Yellow"> 
        <syncfusion:SfCarousel x:Name="carousel" ItemHeight="650" ItemTemplate="{StaticResource itemTemplate}" ItemsSource="{Binding ImageCollection}" ViewMode="Linear" />   
            </AbsoluteLayout> 
    </ContentPage.Content> 
 
 
 Please have the sample from the below link, 
 
 
Screenshot : 
 
 
Please check with the sample if it meets the requirement you have mentioned and if the requirement differs from the sample please mention the children views that need to be used inside the AbsoluteLayout which will be helpful to analyze in detail and provide an appropriate solution. 
  
Regards, 
Muneesh Kumar G. 


Lirbuj
Replied On April 17, 2019 10:19 AM UTC

Hi,

Hi thanks for your feedback.

Each of my child items is an absolute layout with other children views. Also, I don't know the item height until runtime so I size the child items by using the LayoutBounds property of the AbsoluteLayout. Using ItemHeight and ItemWidth requires I know the screen size beforehand, which I don't.

Thanks again for your help.

Kind regards

Muneesh Kumar G [Syncfusion]
Replied On April 18, 2019 09:56 AM UTC

Hi Lirbuj, 
 
Thanks for your update. 
 
We can achieve your requirement by calculating the current device Width and Height in the AppDelegate file of iOS project and this will be applied to ItemHeight and ItemWidth API of SfCarousel. We have also modified the sample based on your requirement. Please find the sample from the below link. 
 
Code snippet: 
 
App.Xaml.cs  
  
public partial class App : Application 
 {                                            
        public static int ScreenWidth; 
        public static int ScreenHeight;                                                
 }  

   
AppDelegate.cs  


 
public override bool FinishedLaunching(UIApplication app, NSDictionary options) 
 {                                                                                   
       App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width; 
       App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height; 
 }  
 
MainPage.Xaml.cs  
  
      carousel.ItemHeight = App.ScreenHeight;   
      carousel.ItemWidth = App.ScreenWidth; 
 
 
 
Please let us know if you have any queries.  
 
Regards, 
Muneesh Kumar G. 


Lirbuj
Replied On April 23, 2019 06:31 PM UTC

Hi there,

Thank you for your help. Much appreciated, but I have found a different solution for my requirements.

Kind regards

Lirbuj

Muneesh Kumar G [Syncfusion]
Replied On April 24, 2019 04:47 AM UTC

Hi Lirbuj, 
 
Glad that the issue has been resolved and please get back to us if you need any other assistance.  
 
Thanks, 
Muneesh Kumar G. 


Bradley Plett
Replied On June 29, 2020 10:23 PM UTC

Hi there,

Thank you for your help. Much appreciated, but I have found a different solution for my requirements.

Kind regards

Lirbuj

"I have found a different solution for my requirements" - can I ask what you ended up using?  I'm quite disappointed by the way this problem is being solved, as well, so I'm curious.

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