最近微软更新了新版本的xamarin.form4.4框架,这个框架对于当前用户来说是一大进步,这个框架升级后可以支持更多的新特性,对于开发者来说是一大进步,同时微软又开始测试新的组件了,另人惊喜的是微软终于推出了CarouseView和SwipeView两个重要的组件,而IndicatorView控件只是一个辅助控件,同时开始支持GIF格式的图片了(以前不支持你敢信,要支持需使用其他的图库)。
要使用新的组件,先使用SetFlage方法声明一下,在APP.xaml.cs添加如下代码
1 public App() 2 { 3 InitializeComponent(); 4 5 Device.SetFlags(new[] { 6 "CarouselView_Experimental", 7 "IndicatorView_Experimental", 8 "SwipeView_Experimental" 9 } ); 10 11 MainPage = new AppShell(); 12 }
一、GIF 动图
<Image Source="https://cataas.com/cat/gif?type=sq" IsAnimationPlaying="True"/>
在Views的xaml中直接添加GIF Image即可,动图默认是循环播放的,如果要停止循环,设置IsAnimationPlaying为false即可。
二、CarouseIView 和IndicatorView组件。
这两个组件是组合使用的,你可以单独使用,并不影响功能,CarouseIView是一个巨幕组件,用户可以滑动巨幕,来切换内容,同时支持水平滑动和垂直滑动,和CollectionView组件类似,但又稍微不同,CollectionView一般用于大量数据的显示,并且性能非常棒,是微软推出的替代ListView组件的,而CarouseIView主要是水平巨幕功能。
1 <CarouselView x:Name="carouselView" ItemsSource="{Binding Monkeys}" > 2 <CarouselView.ItemTemplate> 3 <!-- DataTemplate that defines item appearance --> 4 <DataTemplate> 5 <StackLayout> 6 <Frame HasShadow="True" BorderColor="DarkGray" CornerRadius="5" Margin="20" HeightRequest="300" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"> 7 <StackLayout> 8 <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" /> 9 <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="150" WidthRequest="150" HorizontalOptions="Center" /> 10 <Label Text="{Binding Location}" HorizontalOptions="Center" /> 11 <Label Text="{Binding Details}" FontAttributes="Italic" HorizontalOptions="Center" MaxLines="5" LineBreakMode="TailTruncation" /> 12 </StackLayout> 13 </Frame> 14 </StackLayout> 15 </DataTemplate> 16 </CarouselView.ItemTemplate> 17 </CarouselView> 18 <IndicatorView ItemsSourceBy="carouselView" 19 IndicatorColor="LightGray" 20 SelectedIndicatorColor="DarkGray" 21 HorizontalOptions="Center" />
三、SwipeView组件
这是一个侧滑组件,支持上、下、左、右四个方向的滑动,添加SwipeItem来显示隐藏的内容,通过SwipView.RightItems、LeftItems、TopItems、BottomItems控制滑动的方向,同时又SwipeStarted、SwipeChanging、SwipedEnded、CloseRequested事件。同时,SwipeView定义了Close方法,用来关闭Items。
1 <SwipeView> 2 <SwipeView.LeftItems> 3 <SwipeItems> 4 <SwipeItem Text="Favorite" 5 IconImageSource="favorite.png" 6 BackgroundColor="LightGreen" 7 Invoked="OnFavoriteSwipeItemInvoked" /> 8 <SwipeItem Text="Delete" 9 IconImageSource="delete.png" 10 BackgroundColor="LightPink" 11 Invoked="OnDeleteSwipeItemInvoked" /> 12 </SwipeItems> 13 </SwipeView.LeftItems> 14 <!-- Content --> 15 </SwipeView>