Sliding Entry In Xamarin.Forms

Today, I am going to show you how to create a Custom Slide entry in Xamarin.Forms with animation and also using gradient color. here is YT URL,

Let's get started!

First, we are going to create a demo project and give the name of our choice. Then, we will create a new folder and give it the name "custom view" for customizing control.

Please read the BorderlessEntry blog or article and watch the video, I have mentioned the URL below.

For the article on BorderlessEntry.

Now, we are creating another class with the name gradient color. In this class, we create two getter setter properties - one for start color and another for end color. If you want to see the custom gradient color demo, just click here.

For the article of GradientColor.

First, we create a Xamarin.Forms project on Windows machine.

Open Visual Studio 2017. Select File >> Create Project. A dialog window appears.

This is the new project dialog window and here,

1. We can select the cross-platform;
2. select Mobile App(Xamarin.Forms);
3. give the project name as SlidingImageEntry;
4. choose the folder path;
5. and finally, click OK.

This is another window in which,

1. I choose the blank app;
2. select the project (Android, iOS, UWP) in which I want to create the app;
3. select the Code Sharing Strategy as .NET Standard;
4. and finally, click OK to create the project.

Here, let us check if the Xamarin.Forms NuGet Package updated or not. If not, we will update it. Following are the steps for updating the package.

First, we select the solution and right-click on the solution and then select the NuGet package as shown in this below screen.

Now, appears a new window (Nuget - Solution). This window contains the information of packages used in this project. Here, we can select the Update tab. All the packages are listed here. Here, you can search for package Xamarin Forms and then select the particular package and check all the projects (Android and iOS) and install/update your package.

Now, we are creating a sliding entry with custom renderer borderless entry using gradient stack layout, using this combination.

Now here, we create a XAML with the name ImageSlideEntry.axml and below is its design for the side entry layout.

I created a layout in custom view in the content view and then added animation for sliding left and right side with the image showing left side if unfocused and if focuses the entry so the image is showing on the left side.

ImageSlideEntry.xaml

Now, we should implement C# code the animation of the image with sliding Entry.