我们与每年开发大量移动应用程序的开发人员进行了交谈,他们说:“我们不记得上一次制作不包含轮播的移动应用程序的情况。”因此,我们很高兴推出新的控件Xamarin.Forms 4.4.0中的
CarouselView
。 此外,我们还展示了
IndicatorView
用于显示带有轮播的页面和元素。 以及
SwipeView
用于为
CollectionView
任何项目提供上下文操作。 如果不演示对图像GIF动画的新支持,轮播主题将是不完整的。 让我们开始吧。

具有Xamarin.Forms 4.4
GIF动画是将动画添加到应用程序中以方便与用户更好地通信的一种简便的方法,同时要注意一些操作或细节。 当然,这对于猫的gif也很棒。 您只需拥有
Image
,以及
IsAnimationPlaying
属性即可启用或禁用自动播放。
动画循环将默认运行。 要停止动画,请将
IsAnimationPlaying
设置为False。

就是这样,您有动画! 对于小图像,特别是内置在应用程序中的小图像,这是理想的选择。 遵守GIF图像循环设置。 确保在Android上使用快速渲染,以获得更好的用户体验。
CarouselView和IndicatorView
新的
CarouselView
建立在与
CollectionView
相同的基本控件之上,无论您水平滚动还是垂直滚动,都可以轻松地向应用程序中添加多功能轮播。 使用
CollectionView
您将获得:
- ItemsLayout
- ItemsSource
- ItemTemplate
- 空模板

<CarouselView HeightRequest="160"> <CarouselView.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>h01.jpg</x:String> <x:String>h02.jpg</x:String> <x:String>h03.jpg</x:String> <x:String>h04.jpg</x:String> </x:Array> </CarouselView.ItemsSource> <CarouselView.ItemTemplate> <DataTemplate> <Image Source="{Binding .}"/> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView>
您还可以获得一些特定于轮播的属性,用于管理诸如上一个元素和下一个元素应该窥视的距离之类的事情。

<CarouselView PeekAreaInsets="50" ...>
高级技巧:在上面的示例中,您还将注意到上一个和下一个元素已缩放和移动。 您现在可以通过使用行为并在滚动时更改布局来实现此目的。 当我们发布4.5时,您可以使用视觉状态来简化此过程。
要添加一个
IndicatorView
,请将其放置在任何地方,然后按名称将其与
CarouselView
关联:
<CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView IndicatorColor="LightGray" SelectedIndicatorColor="Black" IndicatorSize="10" HorizontalOptions="Center" IndicatorView.ItemsSourceBy="walletCarousel"/>

有关
CarouselView
和
IndicatorView
可以执行的所有功能的更多信息,请参阅
文档 。
注意:先前发行的NuGet
Xamarin.Forms.CarouselView(预览)将被存档,并且将不再发行。 如果使用此控件,则可以删除NuGet并更新代码名称空间。 我们已经努力保持API的一致性,但是您可能需要配置一些内容。
Github滑动查看
此控件通常在元素列表中找到,允许用户向任意方向滑动以打开上下文按钮以执行常规操作,例如编辑或删除。 要使用此控件,只需将其包装在要向其添加行为的任何元素周围。 默认情况下,
SwipeItem
接收标题和图标,以及命令或单击处理程序。 如果要添加更复杂的内容,可以使用模板来完成。

<SwipeView> <SwipeView.RightItems> <SwipeItems Mode="Execute"> <SwipeItem Text="Favourite" Command="{Binding Favourite}"> <SwipeItem.Icon> <FontIconSource Glyph=""/> </SwipeItem.Icon> </SwipeItem> </SwipeItems> </SwipeView.LeftItems> <!-- Swipeable content --> <Frame> // content here </Frame> </SwipeView>
以上
示例以及更多示例已发布在我们才华横溢的团队成员Javier Suarez Ruiz
的博客上 。
您还可以使用平台特定信息来控制
Android和
iOS上的滑动模式。 有关
SwipeView
更多详细信息,请参见
SwipeView
。
立即开始使用Xamarin.Forms 4.4
要开始使用Xamarin.Forms 4.4,请从NuGet程序包管理器升级或安装它。 如果要从以前的版本升级,请记住Xamarin.Forms和Xamarin.Essentials现在依赖于Android 28.0.0.3支持。 因此,您将要与使用的任何其他软件包一起更新它们,这可能取决于Android支持库。
如果要使用
SetFlags
请记住包括它们。 要针对解决方案中的所有平台全局执行此操作,请将以下内容添加到
App.xaml.cs
:
public App() { InitializeComponent(); Device.SetFlags(new[] { "CarouselView_Experimental", "IndicatorView_Experimental", "SwipeView_Experimental" } ); MainPage = new AppShell(); }