Carousel is not in Displayed properly.

[Aagam]

In default view mode the days tuesday and wednessday are visible in side slided they go up and out of the view. monday is never seen.

Also in liner view which i want i cant see the carousel?

i think that it goes above out of the layout bounds.

//XAML

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"

             mc:Ignorable="d"

             x:Class="TimeTable.Views.HomePage.WeekDayPage">

    <ContentPage.Content>

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="80" />

                <RowDefinition Height="*" />

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="20" />

                <ColumnDefinition Width="*" />

                <ColumnDefinition Width="20" />

            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Black">

                <button:SfButton Text="+" FontSize="20" BackgroundColor="White" TextColor="#007AFF" HasShadow="True" ShadowColor="#aaaaaa" CornerRadius="0" WidthRequest="40" HorizontalOptions="End" VerticalOptions="CenterAndExpand" Margin="20" />

            </StackLayout>

            <StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Padding="10">

                <carousel:SfCarousel x:Name="WeekDays" ViewMode="Linear" ItemSpacing="10"  VerticalOptions="CenterAndExpand">

                        <carousel:SfCarousel.ItemTemplate>

                            <DataTemplate>

                                <Label Text="{Binding .}" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" FontSize="30" FontAttributes="Bold" TextColor="Black" />

                            </DataTemplate>

                            </carousel:SfCarousel.ItemTemplate>

                    </carousel:SfCarousel>

                <button:SfButton Text="Tasks" FontSize="15" BackgroundColor="White" TextColor="#007AFF" HasShadow="True" ShadowColor="#aaaaaa" CornerRadius="20" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="End" Margin="20" />

            </StackLayout> 

        </Grid>

    </ContentPage.Content>

</ContentPage>

//binding data

 public partial class WeekDayPage : ContentPage

    {

        public WeekDayPage()

        {

            InitializeComponent();

            var weekDay = new List<string> { "Monday", "Tuesday", "WednessDay" };

            WeekDays.ItemsSource = weekDay;

        }

    }

i have attached the picture of the output i am getting with liner.

the red circle shows where i want the carousel.

Attachment: Screenshot_(45)_39eafead.rar

[Ramya Soundar Rajan]

Hi Aagam, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we have modified the sample to achieve your requirement. Please find the sample and the code snippet from below, 

 

Code Snippet: 

 

 <Grid> 

            <Grid.RowDefinitions> 

                <RowDefinition Height="80" /> 

                <RowDefinition Height="*" /> 

            </Grid.RowDefinitions> 

            <Grid.ColumnDefinitions> 

                <ColumnDefinition Width="*" /> 

                <ColumnDefinition Width="*" /> 

                <ColumnDefinition Width="20" /> 

            </Grid.ColumnDefinitions> 

 

            <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Black"> 

                <button:SfButton Text="+" FontSize="20" BackgroundColor="White" TextColor="#007AFF" HasShadow="True" ShadowColor="#aaaaaa" CornerRadius="0" WidthRequest="40" HorizontalOptions="End" VerticalOptions="CenterAndExpand" Margin="20" /> 

            </StackLayout> 

 

            <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" > 

                <Grid.RowDefinitions> 

                    <RowDefinition Height="*"/> 

                    <RowDefinition Height="Auto"/> 

                </Grid.RowDefinitions> 

                <carousel:SfCarousel x:Name="WeekDays" ViewMode="Linear" ItemSpacing="10" Grid.Row="0"> 

                        <carousel:SfCarousel.ItemTemplate> 

                            <DataTemplate> 

                                <Label Text="{Binding}"  VerticalOptions="CenterAndExpand" HorizontalOptions="Center" FontSize="30" FontAttributes="Bold" TextColor="Green" /> 

                            </DataTemplate> 

                            </carousel:SfCarousel.ItemTemplate> 

                    </carousel:SfCarousel> 

 

                <button:SfButton Text="Tasks" Grid.Row="1" FontSize="15" BackgroundColor="White" TextColor="#007AFF" HasShadow="True" ShadowColor="#aaaaaa" CornerRadius="20" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="End" Margin="20" /> 

            </Grid> 

        </Grid> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CarouselGrid-669278370 

  

Please check with the sample and let us know if you have any concern. 

 

Regards, 

Ramya S