Xamarin.Forms 5 Previews: Advance UI Controls for Mobile Application

Note: This is a guest post by Ajay Patel. The author’s views are entirely her own and may not reflect the views of CodeItBro.

Xamarin has been on the peaks since after its release. Because of its astounding feature updates, it caught more attention for application development. Some of the attractive features are support for Dependency injection interface, utilization of MVVM Cross Library, platform-specific UI controls, complete binding, etc.

In this blog, we will be going to talk about Xamarin.Forms 5 previews for advanced UI controls and beautiful mobile applications. Xamarin.Forms 5 is the latest version for Xamarin. There are several updates in this feature, like controls, effects, events.

Main Control updates in the Xamarin 5 includes solid and gradient brushes, carousel view, drag and drop, Radio button, Shapes, and Swipeview. These new features add creative potential to your application designs to create beautiful interactive experiences.

Also Read: How To Create ASP.net Login Page Using C# with SQL Database [Download]

Designs with Brushes, Shapes, and Paths

With brushes, you can now easily paint gradients where you need them. Shapes and Paths allow you to draw all the rounded corners and even oddly shaped parts of your UI using the platform’s graphical APIs that don’t add any dimensions to your end applications. You can use geometries to cut out any visual element and make it easier to obtain that much sought-after circular image.

Using Brushes

The brush allows you to paint an area as the background of the control using different approaches. The brush is available in the Xamarin.Forms namespace on iOS, Android, macOS, Universal Windows Platform (UWP), and Windows Presentation Foundation (WPF).

The Brush class is an abstract class that paints a field with its output. Classes derived from Brush define different ways to paint an area.

Also Read: How to create ASP.NET Registration Form Using C# and SQL Server Database.

Different Types of Brushes

1. The SolidColorBrush

The SolidColorBrush class is derived from the Brush class and is used to paint an area with a solid color. There are several approaches to determine the color of a SolidColorBrush. For example, you can specify your color with a Color value or use one of the Brush class’s predefined SolidColorBrush objects.

2. LinearGradiantBrush

The LinearGradientBrush class is acquired from the GradientBrush class to paint an area with a linear gradient that connects two or more colors across a line called the gradient axis. GradientStop objects are used to specify gradient colors and positions.

Properties of LinearGradiantBrush

• StartPoint: StartPoint represents the initial two-dimensional coordinates of the linear gradient. The default value is (0,0).
• EndPoint: EndPoint represents the last two-dimensional coordinates of the linear gradient. The default value is (1.1).
• RadialGradiantBrush: The RadialGradientBrush class is derived from the GradientBrush class and paints an area with a radial gradient that combines two or more colors in a circle. GradientStop objects are used to specify gradient colors and positions.

Also Read: CQRS and Event sourcing in ASP.NET [Explained]

Properties of RadialGradiantBrush

• Center: This brush is useful for the circle’s center to draw using radialGradiantBrush, and its default value is (0.5,0.5).
• Radius: This represents the radius of the circle for the radial gradient, and the default is 0.5.

Using the Shapes: The shape is a type of view that allows you to draw a shape on the screen. Since the Shape class is derived from the View class, shape objects can be used in design classes and most controls.

Properties of shapes

• Aspects: Describe how the shape fills the reserved area. The default value is Stretch.None.
• Fill: Fill displays the brush used to paint within the shape.
• Stroke: Used for the paint’s outline.
• StrokeDashArray: StrokeDashArray represents the double value collection used for the dashes and gaps in the shape’s outline.
• StrokeDashOffset: This property is used to find the distance of the starting to ending stroke. StrokeDashOffset default value is 0.
• StrokeLineJoin: StrokeLineJoin property used for the specific type of join at the vertices of the shape.
• StrokeMIterLimit: StrokeMiterLimit Specifies the boundary of the length of the pin to half the shape line’s thickness. The default value is 10.0.
• StrokeThickness: StrokeThickness indicates the width of the outline of the shape. The default value is 0.0.

Also Read: Get Traffic Analytics of Your GitHub Repositories For Free

Radio Button

While RadioButton is not the most interesting of control, the control template is used to drastically change the appearance of design predictions where we can get the extensibility of the control in future iterations. The RadioButton control now retrieves any content so that you can fully control the appearance and behavior of the control.

Interactive Controls with Carousel View, Swipe View, and Drag and Drop

Carousel View

CarouselView reinforces loop control and subsidizes different visual states to modify CurrentItem, PreviousItem, NextItem, and DefaultItem with VisualStateManager.PeekAreaInsets that can be utilized to explain the magnitude to which the preceding and following elements should overlap with the displayed element. It also involves an EmptyView, an IndicatorView which adds function, and much more.

Swipe View

SwipeView is a container control that surrounds a content item and provides context menu items that appear with a swipe gesture:

Properties of Swipe View

• LeftItems:

LeftItems illustrate only the swipe items that can be supplicated when the control is swiped from the left side.

• RightItems:

RightItems represent sweep items that can be called when the control is dragged to the right.

3)TopItems:

TopItems represent scrolling items that can be called when the control is dragged from the top.

4)BottomItems:

BottomItems represent sweep items that can be called when the control is dragged from the bottom

Events of SwipeView:

There are four events in Swipeview class below:

• SwipeStarted:

This event is activated at the initial stage of the analysis.

• SwipeChanging:

This event is fired as the swipe is move. The SwipeChangingEventArgs object that conducts this event has a SwipeDirection property of genre SwipeDirection and an Offset property of type double.

• SwipeEnded:

This event is fired when a swipe end. The SwipeEndedEventArgs object that assists this event has a SwipeDirection property of group SwipeDirection.

4) CloseRequested:

This event fired when the swipe closed.

Drag and Drop Control:

The drag and drop gesture allows you to drag items and associated data packets from one position on the screen to another using one continuous motion. Drag and drop can be done in a single app or start in one app and end in another. The Draggesturerrecognizer class provides drag Gestures.

Properties of Draggesturerecognizer:

• CanDrag: This indicates if the item the motion detection module is attached to is a source of slip.CanDrag property default value is false.
• DragStratingCommand: This property is executed when the first gesture is recognized.
• DragStratingCommandparameter: This property is useful for passing the parameter.

4)DropCompletedCommand: This property is executed when the drag is a drop in the destination.

5)DropCompletedCommandParameter: This property useful for passing the parameter.

Conclusion

In this blog, we discussed Xamarin.Forms 5 previews for advanced features and controls in the mobile application. There are several control updates like Drag and Drop control, Swipeview control, Carousel view, Radio button, Shapes, Brushes, and Paths. Those controls are useful in many properties and many events.

Author Bio: Ajay Patel – Technical Director, iFour Technolab Netherlands

A Seasoned technocrat with years of experience building technical solutions for various industries using Microsoft technologies. I have delivered hundreds of Web, Cloud, Desktop, and Mobile solutions with sharp understanding and technical acumen and is heading the technical department at Mobile Application Development Company – iFour Technolab Netherlands.