Roadmap to Xamarin Forms 5.0 | iFour Technolab

Xamarin forms 5.0 can release the new features including Brushes, RadioButton, CarouselView, App Themes (Dark Mode), Shapes and Paths, and SwipeView.

Upgrading to 5.0

Visual Studio 2019 will be the minimum required version for using Xamarin forms 5.0.
Some UI markup extension like Expander, C#, and MediaElement has been moved to the Xamarin, install this NuGet packages and update the code. This is the probable library that has a lot of valuable solutions that every app need.
Some Xamarin Theme packages and the DataPages can be removed from the solution.
Some pages and types can be renamed like, MasterDetailPage has been renamed to FlyoutPage (MasterDetailPage. Master changed to FlyoutPage.Flyout and MasterBehavior changed to) and related types have been renamed to similar. Both changes are optional and your app can continue to work for now without making these changes.

Let’s see the Xamarin’s published new features.

Brushes
Drag-and-drop
CarouselView
IndicatorView
RadioButton
Shapes and Paths
SwipeView

Brushes

A brush is used to paint an area like any control’s background. The Brush is available in the Xamarin.forms namespace on Android, the Universal Windows Platform (UWP), iOS, macOS, and the Windows Presentation Foundation (WPF).

There are different types available in Xamarin forms to describe the brushes.

SolidColorBrush: This can be used for paints an area with a solid color, and this class derives from the Brush class. This class has an IsEmpty method that returns a bool.

LinearGradientBrush: This can be used to paints an area with a linear gradient, and the LinearGradientBrush class defines the following properties:

StartPoint: Represent the starting two-dimensional coordinates of the linear gradient. Default values of this property are (0,0).
EndPoint: Represent the ending two-dimensional coordinates of the linear gradient. Default values of this property are (1,1).

RadialGradientBrush: This can be used to paints an area with a radial gradient, and the RadialGradientBrush class defines the following properties:

Center: This property is used to getting a center point of the circle for the radial gradient. (0.5,0.5) is the default value of this property.
Radius: This property is used to getting the radius of the circle for the radial gradient. 0.5 is the default value of this property.

Drag-and-drop

A drag and drop gesture are used to arranged from one location to another location using a continuous gesture. In drag and drop gestures when the drag source is released, drop source occurs.

Let’s see some below steps to enable drag and drop in the application.

You can enable drag by adding a DragGestureRecognizer object to its GestureRecognizer collection. And set the DragGestureRecognizer.CanDrag property to true.
You can enable drop by adding a DropGestureRecognizer object to its GestureRecognizer collection. DropGestureRecognizer.AllowDrop property to true for enable drop.

CarouselView

Carousel view is used to show data in a scrollable layout. Users can swipe to move to the next items of the collection. In carousel view, all the items can display horizontal orientation by default. At a time, the only single item will be displayed on a screen you can swipe forwards and backward for the collection of items. Also, you can use indicators that can show each item in CarouselView. In carousel view, we can also add images, labels, and other virtual components.

Let’s see the carousel page example.

MainPage.Xaml


<!--?xml version="1.0" encoding="utf-8" ?-->
<carouselpage x:class="Xamarin5._0.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<contentpage>

</contentpage>

<contentpage>
<stacklayout orientation="Horizontal">
<boxview backgroundcolor="#E678C0">
<boxview backgroundcolor="#86B7ED">
</boxview></boxview></stacklayout>
</contentpage>
<contentpage backgroundcolor="#86ED98"></contentpage>
</carouselpage>

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Xamarin5._0
{
    public partial class MainPage : CarouselPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Output:

Image: Carousel page slide 1

Image: Carousel page slide 2

IndicatorView

An Indicator view is used to display several items, and also help in showing the current position of items. Indicator view is used with the carousel view.

Indicator view has some below properties:

Count: This property is used to count the number of indicators.
IndicatorColor: Color of the indicator.
SelectedIndicatorColor: For set the currently selected indicator color.
IndicatorSize: For the set, the size of the indicator and the default size of the indicator is 6.0.
IndicatorsShape: This property is used to change the shape of each indicator.

Now, let’s see how to create an indicator.


<!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="Xamarin5._0.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<stacklayout>
<carouselview indicatorview="indicatorView">
<carouselview.itemtemplate>
<datatemplate>
<stacklayout>
<contentview>
<label text="Slide 1">
</label></contentview>
<contentview>
<label text="Slide 2">
</label></contentview>
</stacklayout>
</datatemplate>
</carouselview.itemtemplate>
</carouselview>
<indicatorview horizontaloptions="Center" indicatorcolor="LightGray" selectedindicatorcolor="DarkGray" x:name="indicatorView">
</indicatorview></stacklayout>
</contentpage>

The indicator view has an IndicatorsShape property for changing the indicator shape.

Circle: This is the default value of the IndicatorsShape property, and the shape will be circular.
Square: To create a square indicator.

<indicatorview indicatorcolor="LightGray" indicatorsshape="Square" selectedindicatorcolor="DarkGray" x:name="indicatorView">
</indicatorview>

RadioButton

RadioButton is inherited from TemplateView, and there is no longer a subclass of Button. Some changes like remove the Text property, added the Content property, added the value property.

The below classes can also be added

public static class RadioButtonGroup

public static readonlyBindablePropertyGroupNameProperty

public static readonlyBindablePropertySelectedValueProperty


<stacklayout orientation="Horizontal" radiobuttongroup.groupname="SimpleRadios">
<radiobutton content="Day">
<radiobutton content="Week">
<radiobutton content="Month">
</radiobutton></radiobutton></radiobutton></stacklayout>

Planning to Hire Xamarin App Development Company? Your Search ends here.

Shapes and Paths

The shape is used to draw a shape on the screen and this class derives from the view class. For using shapes on Xamarin forms, we need to add namespace Xamarin.Forms.Shapes on Android, iOS, Universal Windows Platform(UWP), and Windows Presentation Foundation(WPF).


<label text="Filled ellipse">
<svg>
<ellipse fill="Red" heightrequest="50" horizontaloptions="Start" widthrequest="150">
<label text="Circle">
<ellipse heightrequest="150" horizontaloptions="Start" stroke="Red" strokethickness="4" widthrequest="150">
</ellipse></label></ellipse></svg></label>

There are many more objects that derive from the shape class is Ellipse, Line, Path, Rectangle, Polygon, Polyline.

<label text="Path">
<svg>
<path aspect="Uniform" data="M 10,50 L 200,70" horizontaloptions="Start" stroke="Black">
<label text="Cubic Bezier Path">
<path aspect="Uniform" data="M 10,100 C 100,0 200,200 300,100" horizontaloptions="Start" stroke="Black">
</path></label></path>
</svg></label>

SwipeView

The SwipeView is used to wrap the item of content. The swipe view can provide a context menu by a swipe gesture. There is a four-swipe directional collection available - LeftItems, RightItems, TopItems, or BottomItems.

<swipeview closerequested="OnCloseRequested" swipechanging="OnSwipeChanging" swipeended="OnSwipeEnded" swipestarted="OnSwipeStarted" x:name="swipeView">
<swipeview.leftitems>
<swipeitems>
<swipeitem backgroundcolor="LightGreen" iconimagesource="favorite.png" invoked="OnFavoriteSwipeItemInvoked" text="Favorite">
<swipeitem backgroundcolor="LightPink" iconimagesource="delete.png" invoked="OnDeleteSwipeItemInvoked" text="Delete">
</swipeitem></swipeitem></swipeitems>
</swipeview.leftitems>
<grid backgroundcolor="LightGray" heightrequest="60" widthrequest="300">
<label horizontaloptions="Center" text="Swipe right" verticaloptions="Center">
</label></grid>
</swipeview>

Conclusion

Xamarin forms 5.0 come up with many advanced features that is good for developing an application. They made some changes, update some existing controls, and remove some classes.

Blog