Xamarin.Forms CarouselView

CarouselView – это компонент для представления данных в прокручиваемом макете, где пользователи могут пролистывать содержимое, чтобы перемещаться по коллекции элементов. По умолчанию CarouselView отображает элементы в горизонтальной ориентации. На экране отображается один элемент, а жесты пролистывания позволяют перемещаться по коллекции элементов вперед и назад. Кроме того, можно отобразить индикаторы, которые представляют каждый элемент в CarouselView:

По умолчанию CarouselView обеспечивает циклический доступ к коллекции элементов. Поэтому при пролистывании назад от первого элемента коллекции отображается последний элемент коллекции. Аналогично, если провести пальцем вперед от последнего элемента коллекции, он вернется к первому элементу.

CarouselView имеет много общего в своей реализации с CollectionView. Однако эти два элемента управления имеют разные сценарии использования. CollectionView обычно используется для представления списков данных любой длины, в то время как CarouselView обычно используется для выделения информации в списке ограниченной длины.

Добавление кода CarouselView

Прежде всего, необходимо добавить xaml-код в MainPage.xaml. Для этого нужно связать свойство ItemsSource со списком данных. Это может быть простой список урлов изображений или сложная структура данных. Для примера используем простой список урлов. Таким образом, ваш код будет выглядеть следующим образом:

<?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="CarouselView.Views.MainPage"
            Title="{Binding Title}">
 
   <Grid RowDefinitions="*,*">
 
       <CarouselView ItemsSource="{Binding ImagesList}"
                     Margin="10">
           <CarouselView.ItemTemplate>
               <DataTemplate>
                   <StackLayout>
                       <Frame HasShadow="True"
                              Margin="5"
                              Padding="5">
                           <Image Source="{Binding }"
                                  Aspect="AspectFill"/>
                       </Frame>
                   </StackLayout>
               </DataTemplate>
           </CarouselView.ItemTemplate>
       </CarouselView>
   </Grid>
</ContentPage>

С другой стороны, определите новое свойство ImagesList типа IEnumerable в вашей ViewModel.

Переопределите метод Initialize, в котором запустите приложение, и вы получите карусельное представление, как показано здесь:

Отображение индикаторов

В этом параграфе мы рассмотрим, как отобразить индикатор элементов карусели. Во-первых, добавим новый компонент под названием IndicatorView. Во-вторых, определим цвет индикатора и цвет выбранного индикатора. Наконец, добавим свойство IndicatorView в тег CarouselView и зададим его имя. Таким образом, ваш код будет выглядеть следующим образом:

<?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="CarouselView.Views.MainPage"
             Title="{Binding Title}">
 
    <Grid RowDefinitions="*,*">
        <StackLayout>
        <CarouselView ItemsSource="{Binding ImagesList}"
                      Margin="10"
                      IndicatorView="IndicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame HasShadow="True"
                               Margin="5"
                               Padding="5">
                            <Image Source="{Binding }"
                                   Aspect="AspectFill"/>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
 
        </CarouselView>
        <IndicatorView x:Name="IndicatorView"
                       IndicatorColor="LightGray"
                       SelectedIndicatorColor="Black"
                       HorizontalOptions="Center">
            
        </IndicatorView>
        </StackLayout>
    </Grid>
</ContentPage>

Это основные пункты, которые нужны для начала использования карусельного представления в формах Xamarin. Если вам нужно больше подробностей о том, как взаимодействовать с пользователем или обновлять содержимое, вы можете найти больше информации на сайте Microsoft. Необходимый код можно получить на GitHub.