Search code examples
xamarinxamarin.formsalignmentcarousel

Xamarin Carousel View: Align current item center when peaking?


I have a Xamarin Carousel view with the PeakAreaInsets set pretty high so that I can see multiple items in the list at once. However I notice that the current item when set to snap, aligns it self more with the top of the page when I would like it to snap to the center of the page. How can I accomplish this?

Here is a snippet of the code in question:

<ContentPage.Content>
    <CarouselView ItemsSource="{Binding Days}"
                          CurrentItem="{Binding SelectedDay}"
                          VerticalOptions="Center"
                          HorizontalOptions="Center"
                          PeekAreaInsets="300"
                          x:Name="DayCarousel">
                <CarouselView.ItemsLayout>
                    <LinearItemsLayout SnapPointsAlignment="Center"
                                       SnapPointsType="Mandatory"
                                       Orientation="Vertical"/>
                </CarouselView.ItemsLayout>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Spacing="0"
                                     Orientation="Vertical"
                                     HorizontalOptions="Center"
                                     VerticalOptions="Center"
                                     Margin="30,10">
                            <Label Text="{Binding FormattedDate}"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Style="{StaticResource LabelStyle}"/>
                            <Label Text="{Binding TitleText}"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center"
                                   Style="{StaticResource LabelHeader1Style}"/>
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding BindingContext.SelectDay, Source={x:Reference this}}"
                                                      CommandParameter="{Binding .}"/>
                            </StackLayout.GestureRecognizers>
                        </StackLayout>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
</ContentPage.Content>

Here is about what it looks like now (just a mock up):

enter image description here

And here is what I would like it to look like:

enter image description here


Solution

  • I ended up playing around with it for a bit. I'm not sure how its going to look on other phone formats and sizes since I haven't tested that yet. But eventually I found a happy medium after tweaking the PeakAreaInsets, and adjusting the SnapPointsAlignment. Currently I have it set to PeakAreaInsets = 350 and SnapPointsAlignment="Start"