SfCarousel with a full screen current item

[Lirbuj]

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]

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, 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Carousel_1440471208795379 

 

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]

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]

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, 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Carousel_14Forum2111719949 

 

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]

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]

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; 

 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/CarouselSample-405646058 

 

Please let us know if you have any queries.  

 

Regards, 

Muneesh Kumar G. 

[Lirbuj]

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]

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]

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.