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

Carousel cuts item content off

Hi,

We're testing currently the SfCarousel control for our app. On one page we're planning a list of carousels e.g.:

<listitem>
Title
Caroursel
</listitem>

<listitem>
Title
Carousel
</listitem>

...

Each SfCarousel Item has to be a Grid- or Stacklayout with some subelements e.g. Labels and Images. I read that the carousel allows to add content view types (https://www.syncfusion.com/forums/124165/carousel-with-contentview) but the download link for the example does not work (anymore?).

I tried the following code for each element:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="TPApp.gui.views.category.CategoryHomeListView"
    xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms" >

    <Grid RowSpacing="0" ColumnSpacing="0">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                              </Grid.RowDefinitions>
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                                          

        <Grid.Resources>
            <ResourceDictionary>
                    <DataTemplate x:Key="tpProductItemTemplate">
                           
                            <Grid RowSpacing="0" ColumnSpacing="0" VerticalOptions="Center" HorizontalOptions="Center">
                              <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                              </Grid.RowDefinitions>
                              <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                              </Grid.ColumnDefinitions>
                                          
                                <Image Source="{Binding sImageUrl}" VerticalOptions="Center" HorizontalOptions="Center" Grid.Row="0" 
                                            Grid.Column="0" />
                                                        
                            </Grid>
                    
                    </DataTemplate>
            </ResourceDictionary>
        </Grid.Resources>

        <carousel:SfCarousel x:Name="tpProductCarousel" HeightRequest="400" WidthRequest="400" Grid.Row="0" 
                                            Grid.Column="0" ItemTemplate="{StaticResource tpProductItemTemplate}" />    
    </Grid>    
</ContentView>






The carousel is showing, but is "cutting" the content. That means the selected image is not displayed completely but only the half (bottom).

I tried it with Gridlayout, StackLayout - and wrapping each with ContentViews... but was not able to solve that problem.

Is there some trick to prevent that behaviour?

Thank you very much.


Alex

1 Reply

RK Rathana Kumar Sekar Syncfusion Team February 15, 2017 11:25 AM UTC

Hi Toppreise,

Thanks for contacting Syncfusion Support.

We were unable to reproduce the reported issue "Carousel cut the itemcontent off when wrapping the itemcontent in stacklayout or grid layout" from our side. We have attached a sample in which we have checked the reported issue below.


Sample: http://www.syncfusion.com/downloads/support/forum/128888/ze/CarouselTesting-1144917909 

Please check the reported issue by using the attached sample. If the problem persists, please provide us the requested details in which the reported issue occurs. This will help to provide appropriate solution on this.

- Whether issue occurs in Xamarin.Forms iOS or Xamarin.Forms Android or both.

- Can you please modify the attached Sample.

- Your current Syncfusion Assembly Version.

- Screenshot if possible.
 
  
Regards,

Rathanakumar S.  


Loader.
Up arrow icon