{"id":48037,"date":"2020-09-29T10:05:00","date_gmt":"2020-09-29T17:05:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=48037"},"modified":"2020-09-29T09:14:51","modified_gmt":"2020-09-29T16:14:51","slug":"xamarin-forms-5-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/xamarin-forms-5-preview\/","title":{"rendered":"Xamarin.Forms 5 Preview: Advanced UI Controls for Beautiful Apps"},"content":{"rendered":"

Xamarin.Forms 5 brings to stable release features that you have seen in preview over the latest several 4.x releases. This includes solid and gradient Brushes<\/code>, CarouselView<\/code>, drag-and-drop, RadioButton<\/code>, Shapes<\/code>, and SwipeView<\/code>. These new features inject new creative potential for your application designs to create beautiful, interactive experiences.<\/p>\n

Let’s look at those highlights, and then a quick checklist of what you should review as you get started with the Xamarin.Forms 5 pre-release.<\/p>\n

Beautiful Design with Brushes, Shapes, and Paths<\/h2>\n

With brushes you can now easily paint gradients anywhere you need them. Shapes and paths allow you to draw all the rounded corners and even oddly shaped parts of your UI by using the platform graphics APIs which adds no size to your final applications. You can use geometries to clip any visual element, which makes it very easy to get the highly sought-after circle image.<\/p>\n

\"Image<\/p>\n

For more information, check out the brushes documentation<\/a>, shapes documentation<\/a>, blog for shapes and paths<\/a>, and the blog introducing brushes<\/a>.<\/p>\n

Any UI with Templating<\/h2>\n

While RadioButton<\/code> isn’t perhaps the most exciting form control, its use of control templating to radically alter the look of the design foreshadows where we can take control extensibility in future iterations. The RadioButton<\/code> control now takes any content so you can completely control the look and behavior of the control. In its most simple usage, you can provide just text (left image), and in more advanced usage add a control template (right image) to match a Fluent UI design<\/a>.<\/p>\n

\"Image<\/p>\n

Control templates<\/a> have actually been part of Xamarin.Forms since version 2. Broadening this capability beyond custom controls<\/a> to the provided native controls unlocks new potential.<\/p>\n

More Interactive Controls with CarouselView, SwipeView, and Drag-and-drop<\/h2>\n

CarouselView<\/code> supports control of the looping, supports various visual states to transform the CurrentItem<\/code>, PreviousItem<\/code>, NextItem<\/code>, and DefaultItem<\/code> with VisualStateManager. PeekAreaInsets<\/code> can be used to set how much of the previous and next items should encroach on the current item in view. It also includes an EmptyView<\/code>, a property to attach an IndicatorView<\/code>, and so much more. For details on how to use these features and others, visit the CarouselView documentation<\/a>.<\/p>\n

\n
https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/09\/carousel-loop.mp4<\/a><\/video><\/div>\n<\/center><\/p>\n

SwipeView<\/code> wraps any control and layout to add contextual buttons and commands like you might see in a list. Drag-and-drop gestures<\/a> allow you to add that gesture to any UI view and control what can accept the drop, whether inside the application, or outside. This is especially useful on the Surface Duo when you have two apps open.<\/p>\n

\n \"Phone\n<\/center><\/p>\n

Learn more from the SwipeView documentation<\/a>, drag-and-drop documentation<\/a>, CarouselView documentation<\/a>, and from the CarouselView introduction blog post<\/a>.<\/p>\n

Thank You Reviewers<\/h2>\n

This release also included several community reviewers that played a significant role in helping us get through so many bug fixes and enhancements for this release. Code contributors are always celebrated, and these community members have gone the additional step to help make sure those contributions make it more quickly into the product. Join us in celebrating these awesome individuals!<\/p>\n