Continúa volando con Xamarin.Forms 4.4

Hablamos con nuestros desarrolladores, que hacen muchas aplicaciones móviles cada año, y dijeron: "No podemos recordar la última vez que hicimos una aplicación móvil que NO incluiría un carrusel". Por lo tanto, nos complace presentar un nuevo control CarouselView en Xamarin.Forms 4.4.0. Además, también presentamos IndicatorView para mostrar páginas y elementos con un carrusel. Además de SwipeView para proporcionar acciones contextuales para cualquier elemento en CollectionView . El tema del carrusel no estaría completo sin una demostración del nuevo soporte para animaciones GIF para imágenes. Empecemos

Características Xamarin.Forms 4.4

La animación GIF es una manera excelente y fácil de agregar animación a su aplicación para una mejor comunicación con el usuario, prestando atención a algunas acciones o detalles. Por supuesto, esto también es genial para los gifs de gatos. Image es todo lo que necesita, junto con la propiedad IsAnimationPlaying para habilitar o deshabilitar la reproducción automática.

El bucle de animación irá por defecto. Para detener la animación, configure IsAnimationPlaying en False.



Eso es todo, tienes animaciones! Esto es ideal para imágenes pequeñas, especialmente aquellas que están integradas en su aplicación. Se respeta la configuración de bucle de imagen GIF. Asegúrese de utilizar representaciones rápidas en Android para una mejor experiencia de usuario.

Vista de carrusel y Vista de indicador

Basado en el mismo control básico que CollectionView , el nuevo CarouselView hace que sea fácil agregar carruseles multifuncionales a su aplicación, independientemente de si se desplaza horizontal o verticalmente. Con CollectionView obtienes:

• ArtículosDiseño
• ItemsSource
• ItemTemplate
• Plantilla vacía

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

También obtienes algunas propiedades específicas del carrusel para administrar cosas como la distancia que deben mirar los elementos anteriores y siguientes.

 <CarouselView PeekAreaInsets="50"              ...> 

Sugerencia avanzada: en el ejemplo anterior, también notará que los elementos anteriores y siguientes están escalados y desplazados. Puede lograr esto ahora utilizando el comportamiento y cambiando el diseño mientras se desplaza. Cuando lancemos 4.5, puede usar estados visuales para simplificar esto.

Para agregar un IndicatorView , colóquelo en cualquier lugar y luego asócielo con CarouselView por su nombre:

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

Para obtener más información sobre todas las cosas poderosas que puede hacer con CarouselView e IndicatorView , consulte la documentación .

Nota: El NuGet Xamarin.Forms.CarouselView (Vista previa) publicado anteriormente se archivará y ya no se lanzará. Si usó este control, puede eliminar NuGet y actualizar el espacio de nombres de código. Hemos trabajado para mantener la coherencia en la API, pero es posible que deba configurar algunas cosas. Github

Swipeview

Este control generalmente se encuentra en la lista de elementos, lo que permite al usuario deslizar en cualquier dirección para abrir botones de contexto para acciones generales, como editar o eliminar. Para usar este control, simplemente envuélvalo alrededor de cualquier elemento al que desee agregar comportamiento. De forma predeterminada, SwipeItem recibe el título y el icono, así como el comando o el controlador de clic. Si desea agregar algo más complejo, puede hacerlo con una plantilla.

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

El ejemplo anterior y mucho más se publicó en el blog de nuestro talentoso miembro del equipo Javier Suárez Ruiz.

También puede usar los detalles de la plataforma para controlar el modo deslizar en Android e iOS . Consulte la SwipeView para obtener más detalles sobre SwipeView .

Comience hoy con Xamarin.Forms 4.4

Para comenzar con Xamarin.Forms 4.4, actualícelo o instálelo desde el administrador de paquetes NuGet. Si está actualizando desde una versión anterior, tenga en cuenta que Xamarin.Forms y Xamarin.Essentials ahora dependen de la compatibilidad con Android 28.0.0.3. Por lo tanto, querrá actualizarlos junto con cualquier otro paquete que use, que puede depender de las bibliotecas de soporte de Android.

Recuerde incluir nuevas funciones de vista previa usando SetFlags si desea usarlas. Para hacer esto globalmente para todas las plataformas en su solución, agregue lo siguiente a su App.xaml.cs :

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