在Xamarin Android中，我们如何实现轮播视图？

Question

我正在使用 xamarin android。 我必须显示一个水平滚动列表。 由于我是 Xamarin Android 的初学者，我无法找到合适的解决方案。

我还没有找到合适的方法。

Answer 1

我做了一个演示，它分为三个部分。

首先，我创建一个

Model

类来定义我的数据类型。

 public class Photo
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public string Url { get; set; }
    }

其次，我创建一个

ViewModel

类来处理数据。

public class MyViewModel
    {
        public ObservableCollection<Photo> Photos { get; set; }

        public MyViewModel()
        {
            Photos = new ObservableCollection<Photo>();
            Photos.Add(new Photo() { Name = "Name1", Details = "Details1", Location = "Location1" });
            Photos.Add(new Photo() { Name = "Name2", Details = "Details2", Location = "Location2" });
            Photos.Add(new Photo() { Name = "Name3", Details = "Details3", Location = "Location3" });

        }
    }

第三，我将

ViewModel

绑定到

MainPage

并通过

CarouselView

呈现它。

在MainPage.xaml.cs文件中

  public MainPage()
        {
            this.BindingContext = new MyViewModel();
            InitializeComponent();
          
        }

在 MainPage.xaml 文件中

<CarouselView ItemsSource="{Binding Photos}">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                 <StackLayout>
                 <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="100"
                       WidthRequest="100"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                     <StackLayout>
                            <Label Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Large"></Label>
                            <Label Text="{Binding Details}" HorizontalOptions="Center" VerticalOptions="Center" FontSize="Large"></Label>
                    </StackLayout>
                </Frame>
                </StackLayout>
               
            </DataTemplate>
        </CarouselView.ItemTemplate>
</CarouselView>

更多信息可以参考Xamarin.Forms CarouselView Layout。

Answer 2

尝试我们的Syncfusion Xamarin Carousel View组件

Syncfusion 提供免费的社区许可证

https://www.syncfusion.com/products/communitylicense

注：我为 Syncfusion 工作