Continuez à voler avec Xamarin.Forms 4.4

Nous avons discuté avec nos développeurs, qui fabriquent beaucoup d'applications mobiles chaque année, et ils ont dit: "Nous ne pouvons pas nous souvenir de la dernière fois que nous avons créé une application mobile qui n'inclurait PAS de carrousel." Nous sommes donc heureux d'introduire un nouveau contrôle CarouselView dans Xamarin.Forms 4.4.0. De plus, nous présentons également IndicatorView pour afficher les pages et les éléments avec un carrousel. Ainsi que SwipeView pour fournir des actions contextuelles pour tout élément de CollectionView . Le thème du carrousel ne serait pas complet sans une démonstration du nouveau support des animations GIF pour les images. Commençons.

Caractéristiques Xamarin.Forms 4.4

L'animation GIF est un moyen simple et efficace d'ajouter une animation à votre application pour une meilleure communication avec l'utilisateur, en faisant attention à certaines actions ou à certains détails. Bien sûr, cela est également idéal pour les gifs de chat. Image est tout ce dont vous avez besoin, ainsi que la propriété IsAnimationPlaying pour activer ou désactiver la lecture automatique.

La boucle d'animation ira par défaut. Pour arrêter l'animation, définissez IsAnimationPlaying sur False.



Ça y est, vous avez des animations! Ceci est idéal pour les petites images, en particulier celles intégrées à votre application. Les paramètres de boucle d'image GIF sont respectés. Assurez-vous d'utiliser des rendus rapides sur Android pour une meilleure expérience utilisateur.

CarouselView et IndicatorView

Construit sur le même contrôle de base que CollectionView , le nouveau CarouselView facilite l'ajout de carrousels multifonctionnels à votre application, que vous fassiez défiler horizontalement ou verticalement. Avec CollectionView vous obtenez:

• Éléments
• ItemsSource
• ItemTemplate
• EmptyTemplate

 <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> 

Vous obtenez également des propriétés spécifiques au carrousel pour gérer des choses comme la distance que les éléments précédent et suivant doivent jeter un œil.

 <CarouselView PeekAreaInsets="50"              ...> 

Conseil avancé: dans l'exemple ci-dessus, vous remarquerez également que les éléments précédent et suivant sont mis à l'échelle et décalés. Vous pouvez y parvenir dès maintenant en utilisant le comportement et en changeant la disposition pendant le défilement. Lorsque nous publions la version 4.5, vous pouvez utiliser des états visuels pour simplifier cela.

Pour ajouter un IndicatorView , vous le placez n'importe où, puis vous l' CarouselView à CarouselView par son nom:

 <CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView  IndicatorColor="LightGray"  SelectedIndicatorColor="Black"  IndicatorSize="10" HorizontalOptions="Center"  IndicatorView.ItemsSourceBy="walletCarousel"/> 

Pour plus d'informations sur toutes les choses puissantes que vous pouvez faire avec CarouselView et IndicatorView , consultez la documentation .

Remarque: NuGet Xamarin.Forms.CarouselView (Preview) précédemment publié sera archivé et ne sera plus publié. Si vous avez utilisé ce contrôle, vous pouvez supprimer NuGet et mettre à jour l'espace de noms de code. Nous avons travaillé pour maintenir la cohérence de l'API, mais vous devrez peut-être configurer quelques éléments. Github

Swipeview

Ce contrôle se trouve généralement dans la liste des éléments, permettant à l'utilisateur de glisser dans n'importe quelle direction pour ouvrir les boutons de contexte pour des actions générales, telles que la modification ou la suppression. Pour utiliser ce contrôle, il suffit de l'enrouler autour de tout élément auquel vous souhaitez ajouter un comportement. Par défaut, SwipeItem reçoit le titre et l'icône, ainsi que la commande ou le gestionnaire de clics. Si vous souhaitez ajouter quelque chose de plus complexe, vous pouvez le faire avec un modèle.

 <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> 

L' exemple ci-dessus et bien plus a été publié sur le blog de notre talentueux membre de l'équipe Javier Suarez Ruiz.

Vous pouvez également utiliser les spécificités de la plateforme pour contrôler le mode de balayage sur Android et iOS . Consultez la SwipeView pour plus de détails sur SwipeView .

Commencez avec Xamarin.Forms 4.4 aujourd'hui

Pour commencer avec Xamarin.Forms 4.4, mettez-le à niveau ou installez-le à partir du gestionnaire de packages NuGet. Si vous effectuez une mise à niveau à partir d'une version précédente, gardez à l'esprit que Xamarin.Forms et Xamarin.Essentials dépendent désormais de la prise en charge d'Android 28.0.0.3. Par conséquent, vous souhaiterez les mettre à jour avec tous les autres packages que vous utilisez, qui peuvent dépendre des bibliothèques de support Android.

N'oubliez pas d'inclure de nouvelles fonctions d'aperçu à l'aide de SetFlags si vous souhaitez les utiliser. Pour ce faire globalement pour toutes les plateformes de votre solution, ajoutez ce qui suit à votre App.xaml.cs :

 public App() {    InitializeComponent();    Device.SetFlags(new[] {        "CarouselView_Experimental",        "IndicatorView_Experimental",        "SwipeView_Experimental"    } );    MainPage = new AppShell(); }