Sizing images in Carousel

[Julie Misson]

Hi,

I am trying to size the images in my Carousel so they look like Syncfusion examples, i.e. take up a bit over a third of the screen (width) gettingstarted.png.  Mine take up the whole screen, it does not seem to matter what parameters I set.

This is my code currently.  Note: it has gone through various changes.

Thank-you.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="BeatPain.AcitvityImagessf"
    xmlns:syncfusion="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
    BackgroundColor="{StaticResource HomeBackgroundColor}">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="itemTemplate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition>
            <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength" iOS="8*" Android="6*" WinPhone="*"/>
                </RowDefinition.Height>
            </RowDefinition>

            <RowDefinition>
                <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength" iOS="80" Android="80" WinPhone="*"/>
                </RowDefinition.Height>
            </RowDefinition>

                        <RowDefinition>
                <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength" iOS="*" Android="*" WinPhone="*"/>
                </RowDefinition.Height>
            </RowDefinition>
       
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>
                <Image Source="{Binding Image}"  Grid.Row="0" Grid.Column="0" Aspect="AspectFit"/>
                <Label Text="{Binding About}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" 
                    Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
                    Style="{StaticResource TextStyle}" BackgroundColor="{StaticResource HomeBackgroundColor}"/>
                 <Label Text="{Binding Pages}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" 
                    Grid.Row="2" Grid.Column="0" 
                        Style="{StaticResource TextStyle}" 
                    FontSize="12" BackgroundColor="{StaticResource HomeBackgroundColor}" TextColor="Silver"/>
                    </Grid>
            </DataTemplate>
        </ResourceDictionary>
     </ContentPage.Resources>

    <ContentPage.Content>
        <syncfusion:SfCarousel x:Name="carousel"  ItemTemplate="{StaticResource itemTemplate}" DataSource="{Binding ImageCollection}"  
        HeightRequest="200" WidthRequest="100"
        ScaleOffset ="1"/>    
    </ContentPage.Content>
    </ContentPage>

[Julie Misson]

Thanks.  I have answered this myself.  Decided to give up doing it in XAML and tried C# instead.

This worked:

if (Device.RuntimePlatform == Device.Android)
            {
                carousel.ItemWidth = 180;
                carousel.ItemHeight = 400;
            }
            if (Device.RuntimePlatform == Device.iOS)
            {
                carousel.ItemWidth = 300;
                carousel.ItemHeight = 500;

            }

[Vinnalan Aravazhi]

Hi Julie Misson,

     

         Thanks for using syncfusion products. We are glad that you have achieved your requirement in SfCarousel control. Please let us know if you need any further assistance.

     

Regards,

Vinnalan K A.