{"id":45929,"date":"2019-12-12T09:13:41","date_gmt":"2019-12-12T17:13:41","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=45929"},"modified":"2019-12-17T07:11:37","modified_gmt":"2019-12-17T15:11:37","slug":"xamarin-forms-4-4","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-4-4\/","title":{"rendered":"Get Moving with Xamarin.Forms 4.4"},"content":{"rendered":"<p>We were speaking with a customer last year that builds dozens of mobile applications every year. They said, \u201cWe cannot remember the last time we made a mobile app that did NOT include a carousel view.\u201d Many of you have expressed almost identical sentiments to us. So, we are very pleased to introduce a new <code>CarouselView<\/code> control in Xamarin.Forms 4.4.0. Along with this we also have <code>IndicatorView<\/code> for displaying the pages or items in the carousel. As well as <code>SwipeView<\/code> for providing contextual actions to any element in a <code>CollectionView<\/code>. The release theme of getting things moving would not be complete without showcasing the new GIF animation support for images. Let\u2019s begin right there.<\/p>\n<h2 id=\"Xamarin.Forms 4.4\">Xamarin.Forms 4.4 Features<\/h2>\n<p>GIF\u00a0animations are a great and simply way to add animation to your app for better user feedback, calling attention to some action or detail. It&#8217;s also great for cat GIFs, of course. The\u00a0<code>Image<\/code>\u00a0is all you need along with the new <code>IsAnimationPlaying<\/code> property to enable and disable playback.<\/p>\n<p>Animations\u00a0will\u00a0loop\u00a0by\u00a0default.\u00a0To\u00a0stop\u00a0an\u00a0animation,\u00a0set\u00a0<code>IsAnimationPlaying<\/code>\u00a0to\u00a0false.<\/p>\n<p><center>\n<img decoding=\"async\" class=\"size-full wp-image-45930 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/12\/animated_gif.gif\" alt=\"Animation of a carouselview that is being swiped through until a GIF is played back of a cat\" width=\"320\" height=\"384\" \/><\/center><\/p>\n<pre><code>&lt;Image\u00a0Source=\"https:\/\/cataas.com\/cat\/gif?type=sq\" IsAnimationPlaying=\"True\"\/&gt;\r\n<\/code><\/pre>\n<p>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.<\/p>\n<h2 id=\"carouselview-and-indicator-view\">CarouselView and IndicatorView<\/h2>\n<p>Built upon the same base control as <code>CollectionView<\/code>, the new <code>CarouselView<\/code> makes it simple to add rich carousels to your app no matter whether you\u2019re scrolling horizontally or vertically. Just as you get with <code>CollectionView<\/code> you get:<\/p>\n<ul>\n<li>ItemsLayout<\/li>\n<li>ItemsSource<\/li>\n<li>ItemTemplate<\/li>\n<li>EmptyTemplate<\/li>\n<\/ul>\n<p><center>\n<img decoding=\"async\" class=\"size-full wp-image-45939 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/12\/carousel_rei_2.gif\" alt=\"Image of the carouselview swiping through photos\" width=\"422\" height=\"373\" \/><\/center><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;CarouselView HeightRequest=\"160\"&gt;\r\n    &lt;CarouselView.ItemsSource&gt;\r\n        &lt;x:Array Type=\"{x:Type x:String}\"&gt;\r\n            &lt;x:String&gt;h01.jpg&lt;\/x:String&gt;\r\n            &lt;x:String&gt;h02.jpg&lt;\/x:String&gt;\r\n            &lt;x:String&gt;h03.jpg&lt;\/x:String&gt;\r\n            &lt;x:String&gt;h04.jpg&lt;\/x:String&gt;\r\n        &lt;\/x:Array&gt;\r\n    &lt;\/CarouselView.ItemsSource&gt;\r\n    &lt;CarouselView.ItemTemplate&gt;\r\n        &lt;DataTemplate&gt;\r\n            &lt;Image Source=\"{Binding .}\"\/&gt;\r\n        &lt;\/DataTemplate&gt;\r\n    &lt;\/CarouselView.ItemTemplate&gt;\r\n&lt;\/CarouselView&gt;\r\n<\/pre>\n<p>You also get some carousel specific properties for controlling things such as the distance the previous and next items should \u201cpeek\u201d into view.<\/p>\n<p><center>\n<img decoding=\"async\" class=\"size-full wp-image-45933 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/12\/carousel_disney.gif\" alt=\"Carouselview swiping through images using Xamarin.Forms 4.4\" width=\"424\" height=\"326\" \/><\/center><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;CarouselView PeekAreaInsets=\"50\"\r\n              ...&gt;<\/pre>\n<blockquote><p>Advanced Tip: In the example above you&#8217;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&#8217;ll instead be able to use visual states to more easily do this.<\/p><\/blockquote>\n<p>To add an <code>IndicatorView<\/code> you position it wherever you like and then associate it to the <code>CarouselView<\/code> by name:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;CarouselView x:Name=\"walletCarousel\"&gt;\r\n\/\/ implementation here\r\n&lt;\/CarouselView&gt;\r\n&lt;IndicatorView \r\n  IndicatorColor=\"LightGray\"\r\n  SelectedIndicatorColor=\"Black\"\r\n  IndicatorSize=\"10\" HorizontalOptions=\"Center\"\r\n  IndicatorView.ItemsSourceBy=\"walletCarousel\"\/&gt;\r\n<\/pre>\n<p><center>\n<img decoding=\"async\" class=\"size-full wp-image-45934 aligncenter\" src=\"http:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2019\/12\/carousel_wallet.gif\" alt=\"Xamarin.Forms 4.4. Carouselview showing an airline ticketing system\" width=\"426\" height=\"749\" \/><\/center>For more details about all the powerful things you can do with <code>CarouselView<\/code> and <code>IndicatorView<\/code>, refer to the <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/indicatorview\">documentation<\/a>.<\/p>\n<blockquote><p><strong>Note:<\/strong> The previously released NuGet <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.Forms.CarouselView\/2.3.0-pre2\">Xamarin.Forms.CarouselView (Preview)<\/a> 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. <a href=\"https:\/\/github.com\/xamarin\/Xamarin.Forms.CarouselView\">GitHub<\/a><\/p><\/blockquote>\n<h2 id=\"swipeview\">SwipeView<\/h2>\n<p>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 <code>SwipeItem<\/code> 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.<\/p>\n<p><center>\n<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/github.com\/jsuarezruiz\/FavFighters\/raw\/master\/images\/favfighters.gif\" alt=\"Device showing a list of pokemon and the user is performing a swipe left on a cell to reveal an action under it.\" height=\"500\" \/><\/center><\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;SwipeView&gt;\r\n        &lt;SwipeView.RightItems&gt;\r\n                &lt;SwipeItems Mode=\"Execute\"&gt;\r\n                        &lt;SwipeItem Text=\"Favourite\" Command=\"{Binding Favourite}\"&gt;\r\n                                &lt;SwipeItem.Icon&gt;\r\n                                        &lt;FontIconSource Glyph=\"&amp;#xE74D;\"\/&gt;\r\n                                &lt;\/SwipeItem.Icon&gt;\r\n                        &lt;\/SwipeItem&gt;\r\n                &lt;\/SwipeItems&gt;\r\n        &lt;\/SwipeView.RightItems&gt;\r\n\r\n        &lt;!-- Swipeable content --&gt;\r\n        &lt;Frame&gt;\r\n          \/\/ content here\r\n        &lt;\/Frame&gt;\r\n&lt;\/SwipeView&gt;\r\n<\/pre>\n<p>The above <a href=\"https:\/\/javiersuarezruiz.wordpress.com\/2019\/12\/04\/xamarin-forms-un-primer-vistazo-a-swipeview\/\">sample and more were blogged<\/a> by our talented team member Javier Suarez Ruiz.<\/p>\n<p>You can also use platform-specifics to control the swipe transition mode on <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/platform\/android\/swipeview-swipetransitionmode\">Android<\/a> and <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/platform\/ios\/swipeview-swipetransitionmode\">iOS<\/a>. For more details about <code>SwipeView<\/code>, refer to the <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/swipeview\">documentation<\/a>.<\/p>\n<h2 id=\"contributors\">Contributors<\/h2>\n<p>Even before the <a href=\"https:\/\/devblogs.microsoft.com\/xamarin\">massive turnout for Hacktoberfest<\/a> we had a lot of fantastic contributions in the pipeline that are now appearing in Xamarin.Forms 4.4.0. <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/release-notes\/4.4\/4.4.0#thank-you\">Check out these great improvements<\/a> from 34 of your fellow developers. Highlights include:<\/p>\n<ul>\n<li>Use named sizes with FontImageSource &#8211; @<a href=\"https:\/\/github.com\/tuyen-vuduc\"><strong>tuyen-vuduc<\/strong><\/a><\/li>\n<li>Scaling animation methods ScaleXTo and ScaleYTo &#8211; @<a href=\"https:\/\/github.com\/sthewissen\"><strong>sthewissen<\/strong><\/a><\/li>\n<li>Letter-spacing &#8211; @<a href=\"https:\/\/github.com\/KSemenenko\"><strong>KSemenenko<\/strong><\/a><\/li>\n<li>Placeholder text alignment &#8211; @<a href=\"https:\/\/github.com\/krdmllr\"><strong>krdmllr<\/strong><\/a><\/li>\n<\/ul>\n<h2 id=\"get-started-today\">Get Started with Xamarin.Forms 4.4 Today<\/h2>\n<p>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.<\/p>\n<p>Make sure to enable the new preview features using <code>SetFlags<\/code> if you wish to use them. To do this globally for all platforms in your solution, add the following in your <code>App.xaml.cs<\/code>:<\/p>\n<pre class=\"\">public App()\r\n{\r\n    InitializeComponent();\r\n\r\n    Device.SetFlags(new[] { \r\n        \"CarouselView_Experimental\", \r\n        \"IndicatorView_Experimental\",\r\n        \"SwipeView_Experimental\" \r\n    } );\r\n\r\n    MainPage = new AppShell();\r\n}\r\n<\/pre>\n<p>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.<\/p>\n<p><strong>Quick Links:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/release-notes\/4.4\/4.4.0\">Release Notes &#8211; lots of quality improvements including Shell and CollectionView<\/a><\/li>\n<li>Animated GIFs\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/images#animated-gifs\">documentation<\/a><\/li>\n<\/ul>\n<\/li>\n<li>\u00a0CarouselView\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/carouselview\/\">documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/samples\/xamarin\/xamarin-forms-samples\/userinterface-carouselviewdemos\/\">sample<\/a><\/li>\n<\/ul>\n<\/li>\n<li>IndicatorView\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/indicatorview\">documentation<\/a><\/li>\n<\/ul>\n<\/li>\n<li>SwipeView\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/swipeview\">documentation<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Carousel Gallery\n<ul>\n<li><a href=\"https:\/\/github.com\/davidortinau\/CarouselGallery\">GitHub<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Should you find any issues in the Xamarin.Forms 4.4 release, please <a href=\"https:\/\/www.github.com\/xamarin\/xamarin.forms\/issues\/new\">file them on GitHub<\/a> along with a simple reproduction demonstrating the issue.<\/p>\n<p>To see what\u2019s coming next, check out our <a href=\"https:\/\/aka.ms\/xf-roadmap\">feature roadmap<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducing a new CarouselView control in Xamarin.Forms 4.4. Along with IndicatorView for displaying the pages or items in the carousel. As well as SwipeView for providing contextual actions to any element in a CollectionView. <\/p>\n","protected":false},"author":553,"featured_media":45930,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,367],"tags":[851,750,751,7596,7597,16,7595],"class_list":["post-45929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-xamarin-forms","tag-animations","tag-carouselview","tag-collectionview","tag-indicatorview","tag-swipeview","tag-xamarin-forms","tag-xamarin-forms-4-4"],"acf":[],"blog_post_summary":"<p>Introducing a new CarouselView control in Xamarin.Forms 4.4. Along with IndicatorView for displaying the pages or items in the carousel. As well as SwipeView for providing contextual actions to any element in a CollectionView. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=45929"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45929\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/45930"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=45929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=45929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=45929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}