We were speaking with a customer last year that builds dozens of mobile applications every year. They said, «We cannot remember the last time we made a mobile app that did NOT include a carousel view.» Many of you have expressed almost identical sentiments to us. So, we are very pleased to introduce a new
![](https://habrastorage.org/r/w780q1/webt/vx/ex/eo/vxexeoki5fnnyktncrfp8ogtwjk.jpeg)
GIF animations are a great and simply way to add animation to your app for better user feedback, calling attention to some action or detail. It’s also great for cat GIFs, of course. The
Animations will loop by default. To stop an animation, set
![](https://habrastorage.org/getpro/habr/post_images/14a/37e/42f/14a37e42f898e81a5f16aebb2df3dca5.gif)
Just like that you have animations! This is ideal for smaller images, and especially those embedded in your application. Looping settings in the GIF image are respected. Make sure you are using fast renderers on Android for the best experience.
Built upon the same base control as
![](https://habrastorage.org/getpro/habr/post_images/190/750/33b/19075033b32cee78cd81f0181e9af34e.gif)
You also get some carousel specific properties for controlling things such as the distance the previous and next items should «peek» into view.
![](https://habrastorage.org/getpro/habr/post_images/20c/da1/82c/20cda182c74edaade0d5bbb6019784fa.gif)
Advanced Tip: In the example above you’ll also note that the previous and next items are scaled and offset. You can achieve this today with a behavior and doing the layout modifications on scroll. When we ship 4.5 you’ll instead be able to use visual states to more easily do this.
To add an
![](https://habrastorage.org/getpro/habr/post_images/c21/528/74a/c2152874a04b025cfa7a0a1544fc3afa.gif)
For more details about all the powerful things you can do with
Note: The previously released NuGet Xamarin.Forms.CarouselView (Preview) will be archived and no longer released. If you were using this control, you may remove the NuGet and update your code namespace. We worked to keep the API consistent, but you may need to adjust a few things. GitHub
This control is typically found within a list of items for allowing the user to swipe in any direction to reveal context buttons for common actions like edit or delete. In order to use this control, just wrap it around whatever element you wish to add the behavior to, and specific your SwipeItems. By default a
![](https://github.com/jsuarezruiz/FavFighters/raw/master/images/favfighters.gif)
The above sample and more were blogged by our talented team member Javier Suarez Ruiz.
You can also use platform-specifics to control the swipe transition mode on Android and iOS. For more details about
Even before the massive turnout for Hacktoberfest we had a lot of fantastic contributions in the pipeline that are now appearing in Xamarin.Forms 4.4.0. Check out these great improvements from 34 of your fellow developers. Highlights include:
To get started with Xamarin.Forms 4.4, update or install from your favorite NuGet package manager. The transition from 4.3.0 is smooth. If you are updating from a previous version, take note that Xamarin.Forms and Xamarin.Essentials now depend on Android Support 28.0.0.3. So you will want to update those together along with any other packages you use that might depend on the Android Support libraries.
Make sure to enable the new preview features using
We will be watching GitHub for your feedback on these preview controls between now and our next version, 4.5 when we expect to move them swiftly out of this preview state.
CarouselView
control in Xamarin.Forms 4.4.0. Along with this we also have IndicatorView
for displaying the pages or items in the carousel. As well as SwipeView
for providing contextual actions to any element in a CollectionView
. The release theme of getting things moving would not be complete without showcasing the new GIF animation support for images. Let’s begin right there.![](https://habrastorage.org/webt/vx/ex/eo/vxexeoki5fnnyktncrfp8ogtwjk.jpeg)
Xamarin.Forms 4.4 Features
GIF animations are a great and simply way to add animation to your app for better user feedback, calling attention to some action or detail. It’s also great for cat GIFs, of course. The
Image
is all you need along with the new IsAnimationPlaying
property to enable and disable playback.Animations will loop by default. To stop an animation, set
IsAnimationPlaying
to false.![](https://habrastorage.org/getpro/habr/post_images/14a/37e/42f/14a37e42f898e81a5f16aebb2df3dca5.gif)
Just like that you have animations! This is ideal for smaller images, and especially those embedded in your application. Looping settings in the GIF image are respected. Make sure you are using fast renderers on Android for the best experience.
CarouselView and IndicatorView
Built upon the same base control as
CollectionView
, the new CarouselView
makes it simple to add rich carousels to your app no matter whether you’re scrolling horizontally or vertically. Just as you get with CollectionView
you get:- ItemsLayout
- ItemsSource
- ItemTemplate
- EmptyTemplate
![](https://habrastorage.org/getpro/habr/post_images/190/750/33b/19075033b32cee78cd81f0181e9af34e.gif)
<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>
You also get some carousel specific properties for controlling things such as the distance the previous and next items should «peek» into view.
![](https://habrastorage.org/getpro/habr/post_images/20c/da1/82c/20cda182c74edaade0d5bbb6019784fa.gif)
<CarouselView PeekAreaInsets="50"
...>
Advanced Tip: In the example above you’ll also note that the previous and next items are scaled and offset. You can achieve this today with a behavior and doing the layout modifications on scroll. When we ship 4.5 you’ll instead be able to use visual states to more easily do this.
To add an
IndicatorView
you position it wherever you like and then associate it to the CarouselView
by name:<CarouselView x:Name="walletCarousel">
// implementation here
</CarouselView>
<IndicatorView
IndicatorColor="LightGray"
SelectedIndicatorColor="Black"
IndicatorSize="10" HorizontalOptions="Center"
IndicatorView.ItemsSourceBy="walletCarousel"/>
![](https://habrastorage.org/getpro/habr/post_images/c21/528/74a/c2152874a04b025cfa7a0a1544fc3afa.gif)
For more details about all the powerful things you can do with
CarouselView
and IndicatorView
, refer to the documentation.Note: The previously released NuGet Xamarin.Forms.CarouselView (Preview) will be archived and no longer released. If you were using this control, you may remove the NuGet and update your code namespace. We worked to keep the API consistent, but you may need to adjust a few things. GitHub
SwipeView
This control is typically found within a list of items for allowing the user to swipe in any direction to reveal context buttons for common actions like edit or delete. In order to use this control, just wrap it around whatever element you wish to add the behavior to, and specific your SwipeItems. By default a
SwipeItem
takes a title and an icon, plus a command or click handler. If you wish to add something more complex, you can do that via a template.![](https://github.com/jsuarezruiz/FavFighters/raw/master/images/favfighters.gif)
<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>
The above sample and more were blogged by our talented team member Javier Suarez Ruiz.
You can also use platform-specifics to control the swipe transition mode on Android and iOS. For more details about
SwipeView
, refer to the documentation.Contributors
Even before the massive turnout for Hacktoberfest we had a lot of fantastic contributions in the pipeline that are now appearing in Xamarin.Forms 4.4.0. Check out these great improvements from 34 of your fellow developers. Highlights include:
- Use named sizes with FontImageSource – @tuyen-vuduc
- Scaling animation methods ScaleXTo and ScaleYTo – @sthewissen
- Letter-spacing – @KSemenenko
- Placeholder text alignment – @krdmllr
Get Started with Xamarin.Forms 4.4 Today
To get started with Xamarin.Forms 4.4, update or install from your favorite NuGet package manager. The transition from 4.3.0 is smooth. If you are updating from a previous version, take note that Xamarin.Forms and Xamarin.Essentials now depend on Android Support 28.0.0.3. So you will want to update those together along with any other packages you use that might depend on the Android Support libraries.
Make sure to enable the new preview features using
SetFlags
if you wish to use them. To do this globally for all platforms in your solution, add the following in your App.xaml.cs
:public App()
{
InitializeComponent();
Device.SetFlags(new[] {
"CarouselView_Experimental",
"IndicatorView_Experimental",
"SwipeView_Experimental"
} );
MainPage = new AppShell();
}
We will be watching GitHub for your feedback on these preview controls between now and our next version, 4.5 when we expect to move them swiftly out of this preview state.