Showing posts with label Xamarin Forms. Show all posts

In the ever-evolving landscape of technology, tools and frameworks continuously evolve, and developers must stay ahead of the curve. One si...

Good Bye Xamarin Good Bye Xamarin

A blog about android developement

Xamarin Forms

In the ever-evolving landscape of technology, tools and frameworks continuously evolve, and developers must stay ahead of the curve. One significant evolution in recent times is the transition from Xamarin.Forms to .NET MAUI (Multi-platform App UI). This shift brings about a series of changes and deadlines that developers must navigate skillfully. In this article, we'll simplify and explore the essential milestones and recommendations to smoothly transition from Xamarin to .NET MAUI.

Saying Farewell to Xamarin

Xamarin.Forms, the precursor to .NET MAUI, is reaching its twilight phase. Existing Xamarin.Forms projects now have the imperative of migrating to .NET MAUI, with Xamarin itself approaching its expiration date. It's vital to note that support for all Xamarin SDKs, including Xamarin.Forms, will come to an end after May 1, 2024.

For those seeking comprehensive insights into this transition, detailed information and guidelines are available in the official documentation.

Navigating the Transition to .NET 7

Complicating matters further is the impending end of support for .NET 7, scheduled for May 14, 2023. To mitigate potential challenges, it's wise to initiate migrations well in advance, allowing ample time to address any arising issues during the process. For detailed information, delve into the resources provided.

Embracing Visual Studio Code

As Visual Studio for Mac faces retirement by August 31, 2024, developers may find themselves at a crossroads. However, there's no cause for concern as the transition to .NET MAUI can seamlessly continue using Visual Studio Code. Learn how to implement the MAUI Extension for Visual Studio Code and access additional resources in the official documentation.

Understanding App Store Transition Deadlines

The transition timeline extends beyond development environments to app distribution platforms. It's anticipated that by April 2025, the Apple App Store will likely stop accepting submissions of Xamarin applications built with Xcode 15. Similarly, the Google Play Store is expected to cease supporting Xamarin apps targeting API 34 by August 2025.

For more information on these transitions, refer to the provided links.

Fostering Community Engagement

In the spirit of community collaboration, developers are encouraged to share their feedback with the Microsoft team through David Ortinau's facilitated platform. Your experiences are invaluable in enriching the community and streamlining the migration process from Xamarin to .NET MAUI. Participate in the feedback survey to contribute to this collective effort.

Showcasing Your .NET MAUI Creations

As .NET MAUI gains momentum, Microsoft eagerly seeks to showcase applications developed using this framework. Your contributions and feedback play a pivotal role in shaping the future of .NET MAUI. Keep an eye out for Microsoft events where .NET MAUI applications are celebrated and showcased.


In conclusion, transitioning from Xamarin to .NET MAUI signifies a significant milestone in the realm of cross-platform app development. By staying informed, proactive, and leveraging available resources, developers can navigate this transition with confidence and agility, propelling their projects into the future.


Certainly! Here's a tabulated overview of the key dates and their details:

Date Event Details
May 1, 2024 End of Xamarin Official Support Support for all Xamarin SDKs, including Xamarin.Forms, will cease after this date.
May 14, 2023 End of .NET 7 Official Support Support for .NET 7 will be terminated, urging developers to plan migration strategies well in advance.
August 31, 2024 Retirement of Visual Studio for Mac Visual Studio for Mac will be retired, prompting developers to transition to alternative environments such as Visual Studio Code.
April 2025 Apple App Store Transition Deadline The anticipated final deadline for the Apple App Store to accept submissions of Xamarin applications built with Xcode 15.
August 2025 Google Play Store Transition Deadline The expected final deadline for the Google Play Store to accept Xamarin apps targeting API 34.

These dates serve as crucial milestones for developers navigating the transition from Xamarin to .NET MAUI. It's essential to stay informed and plan accordingly to ensure a smooth and seamless transition process.

Introduction Xamarin.Essentials Xamarin.Essentials provides developers with cross-platform APIs for their mobile applications. Andro...

Xamarin.Forms - Text To Speech Using Xamarin Essentials Xamarin.Forms - Text To Speech Using Xamarin Essentials

A blog about android developement

Xamarin Forms

Introduction

Xamarin.Essentials

Xamarin.Essentials provides developers with cross-platform APIs for their mobile applications. Android, iOS, and UWP offer unique operating system and platform APIs that developers have access to all in C# leveraging Xamarin. Xamarin.Essentials provides a single cross-platform API that works with any Xamarin.Forms, Android, iOS, or UWP application that can be accessed from shared code no matter how the user interface is created.

Text-to-Speech

This enables an application to utilize the built-in text-to-speech engines to speak back text from the device and also to query available languages that the engine can support.


Coding Part

Steps

  1. 1: Creating new Xamarin.Forms Projects
  2. 2: Implementation of Text to Speech in Xamarin Forms

Step 1: Creating new Xamarin.Forms Projects

Create New Project by selecting "New Project" à "Xamarin Cross Platform App" and Clicking "OK". Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Implementation of Text to Speech in Xamarin Forms

In this step, we will see how to implement the functionality in Xamarin.Forms.


Platform Specific Changes:

  • If your project's Target Android version is set to Android 11 (R API 30) you must update your Android Manifest with queries that are used with the new package visibility requirements.
  • Open the AndroidManifest.xml file under the Properties folder and add the following inside of the manifest node:

Xamarin Forms App Changes:

  • Add a reference to Xamarin.Essentials in your class:
  • Text-to-Speech works by calling the SpeakAsync method with text and optional parameters, and returns after the utterance has finished.
  • This API provide more options on how the audio is spoken back with SpeechOptions that allows setting the volume, pitch, and locale.

Full Code

Result

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction In this tutorial, we will learn how to play a video or audio file in Xamarin.Forms applicati...

Video Player App in Xamarin.Forms Video Player App in Xamarin.Forms

A blog about android developement

Xamarin Forms

Video Player App in Xamarin.Forms

Introduction

In this tutorial, we will learn how to play a video or audio file in Xamarin.Forms application. This feature is not available by default in Xamarin Forms. So, we need to add an additional plugin to achieve these features. "MediaManager Plugin" offers this functionality."MediaManager Plugin" offers this functionality.


Media Manager

  • Designed to be simple and easy to use
  • Native playback of media files from remote http(s), embedded and local sources
  • Native media notifications and remote controls
  • Queue and playback management by default
  • Playback status (Playing, Buffering, Loading, Paused, Progress)
  • Events for media handling to hook into

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects
  2. Step 2: Setting up the Media Manager in Xamarin.Forms .Net Standard Project
  3. Step 3: Implementation of Xamarin Forms - Video Player App

Step 1: Creating new Xamarin.Forms Projects

Create New Project by selecting "New Project" à "Xamarin Cross Platform App" and Clicking "OK".
Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Media Manager in Xamarin.Forms .Net Standard Project

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and selecting “Manage Nuget Packages”.
  • Then select below mentioned 2 plugins and check all the projects in the solution, install the plugin.
    • Plugin.MediaManager
    • Plugin.MediaManager.Forms

Step 3: Implementation of Xamarin Forms - Video Player App

In this step, add a VideoView control to your project. For that, go to Solution Explorer >> double click on MainPage.Xaml. After opening this, you can add VideoView assembly and XAML code to your project.

  • Include the video view control in your xaml file and add the button to perform play/pause operations.
  • We are going to play the video from the url as like in the below snippet.
  • Then add click event to perform the play and pause operations. We need to use the below mentioned code part to peform the play/pause operations using Media Manager
  • The final code behind will look like below.
  • Make sure to call " CrossMediaManager.Init(this, savedInstanceState); " for Android or " CrossMediaManager.Init(this); " for iOS from your platform code before starting playback, otherwise the video View will not be prepared to display the video.

Result

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction A Quick Tour in app allows us to understand what’s an application about and how the app work...

Quick Tour using Xamarin Community Toolkit Quick Tour using Xamarin Community Toolkit

A blog about android developement

Xamarin Forms

Introduction

A Quick Tour in app allows us to understand what’s an application about and how the app works before using it. In this post, we are going to learn how to create a Quick Tour for the Xamarin Forms Application using the Xamarin Community Toolkit. This post is a part of Xamarin Community Toolkit - Tutorial Series. Please visit the post if you are new to Xamarin Community Toolkit.


The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms.


Xamarin Community Toolkit Popup

The Popup control allows developers to create and display popups within their applications. The Popup can be extended to return data to the invocation code. This Popup can be used just like a ContentView or ContentPage is used in the Xamarin Forms Application.


Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Interactive Quick Tour using Xamarin Community Toolikit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by selecting "New Project" à "Xamarin Cross Platform App" and Click "OK".
Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Interactive Quick Tour using Xamarin Community Toolikit

In this step, we will see how to implement the Quick Tour for the Xamarin Forms App using Popup offered in Xamarin Community Toolkit. This control allows you to have customised popup according the application requirement.


I have divided the quick tour implementation into 3 steps, explained one by one.


  • In the each step will have a common footer that shows a Skip button, an actual Step indicator, and a Next button. I have created a BasePage that will contain a ContentView with the common part contains the above mentioned views along with the ContentView. This view is useful to display the different views on the each steps.

  • In the code behind, we will add the Next and Skip functions. Also will initialize them with the navigation logic, so that every time the next is executed it will remove the previous page, and navigate to the next page.

  • Each step will inherit from the BaseQuickTourPage and will wrap the view in the ContentView control. All the steps in the Quick Tour will be followed like the first step.

  • In order to handle which step/page goes next, I created a QuickTourBuilder using the builder pattern, which will handle the logic to indicate which step is going to go next.

  • On the first page of the Quick Tour, implement the IQuickTourLauncher interface, and use the LaunchAsync method to navigate to it.

  • In the sample page code-behind, we need to create the quick tour by using the QuickTourBuilder and specifying the sequence of pages that will be part of it like below.

Result

Download Code:

You can download the code from GitHub.. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub..


Introduction In this post, we are going to learn about the state layout which is offered in the Xamarin C...

Xamarin Community Toolkit - State Layout Xamarin Community Toolkit -  State Layout

A blog about android developement

Xamarin Forms

Introduction

In this post, we are going to learn about the state layout which is offered in the Xamarin Community Toolkit and how do we implement it in our application. This post is a part of Xamarin Community Toolkit - Tutorial Series. Please visit the post if you are new to Xamarin Community Toolkit.


The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms.


State Layout is used for displaying a specific view when your app or screen is in a specific state. For example, displaying the activity indicator when the app is loading and waiting for a response from the service call.

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of State Layout using Xamarin Community Toolikit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by selecting "New Project" à "Xamarin Cross Platform App" and Click "OK".
Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of State Layout using Xamarin Community Toolikit.

In this step, we will see how to implement the state layout offered in Xamarin Community Toolkit. This control allows you to have different views according to a specific state. The view will change automatically according to the current state.

  • Open your XAML design file and add the following namespace to utilise the views in the screen.
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
  • This control offers the "StateToBooleanConverter" which will return true if the specified state matches the bound state. To use it you have to pass the state you want to check as the ConverterParameter.
    <ContentPage.Resources>
    	<xct:StateToBooleanConverter x:Key="StateToBooleanConverter" />
    </ContentPage.Resources>
  • This converter is useful for displaying the activity indicator based on the state like below
    <ActivityIndicator Color="#1abc9c" 
        IsRunning="{Binding MainState, Converter={StaticResource StateToBooleanConverter}, ConverterParameter={x:Static xct:LayoutState.Loading}}" />
  • Also, state layout has "AnimateStateChanges" property which indicates if you want an animated transition when switching between states.
    <StackLayout xct:StateLayout.CurrentState="{Binding MainState}"
    	xct:StateLayout.AnimateStateChanges="False">
    </StackLayout>
  • In this post, we will display the activity indicator when the state property changes and find the full code for the same below.

    Full Code:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
                 xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                 x:Class="XamarinCommunityToolkit.StateLayoutSamplePage"
                 xmlns:pg="clr-namespace:XamarinCommunityToolkit"
                 ios:Page.UseSafeArea="true">
        <ContentPage.BindingContext>
            <pg:StateLayoutSamplePageModel/>
        </ContentPage.BindingContext>
        <ContentPage.Resources>
            <xct:StateToBooleanConverter x:Key="StateToBooleanConverter" />
        </ContentPage.Resources>
        <ContentPage.Content>
            <Grid xct:StateLayout.CurrentState="{Binding MainState}" xct:StateLayout.AnimateStateChanges="true">
                <xct:StateLayout.StateViews>
                    <xct:StateView StateKey="Loading" BackgroundColor="White" VerticalOptions="FillAndExpand">
                        <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
                            <ActivityIndicator Color="#1abc9c" 
                                               IsRunning="{Binding MainState, Converter={StaticResource StateToBooleanConverter}, ConverterParameter={x:Static xct:LayoutState.Loading}}" />
                            <Label Text="Loading..." HorizontalOptions="Center" />
                        </StackLayout>
                    </xct:StateView>
                </xct:StateLayout.StateViews>
                <Button Command="{Binding FullscreenLoadingCommand}" 
                        VerticalOptions="Center"
                        HorizontalOptions="Center"
                        Text="Show Fullscreen Loader" 
                        Margin="0,0,0,16" />
            </Grid>
        </ContentPage.Content>
    </ContentPage>
  • The state can be changed from the view model like below.
    FullscreenLoadingCommand = CommandFactory.Create(async () =>
    {
    	MainState = LayoutState.Loading;
    	await Task.Delay(2000);
    	MainState = LayoutState.None;
    });
The Xamarin Community Toolkit - State Layout offering multiple properties and allow us to have custom states and please visit the below link for more details. https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/statelayout

Download Code:

You can download the code from GitHub.. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub..


Introduction In this post, we are going learn the behaviors offered in the Xamarin Community Toolkit and ...

Xamarin Community Toolkit - Behaviors Xamarin Community Toolkit -  Behaviors

A blog about android developement

Xamarin Forms

Introduction

In this post, we are going learn the behaviors offered in the Xamarin Community Toolkit and how do we use them. This post is a part of Xamarin Community Toolkit - Tutorial Series and visit the post for know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms. 

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Behaviors using Xamarin Community Toolikit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project:

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Behaviors using Xamarin Community Toolikit.

In this step, we will see how to implement and use the behaviors offered in Xamarin Community Toolkit. Here, we have explained the implementation of Important behaviors with the registration form.

  • Open your XAML design file and add the following namespace to utilise the views in the screen.
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Registration Form:

  • Create a form like in the following screen, which contains entries to get username, email, phone number and age.
  • SetFocusOnEntryCompletedBehavior:

  • The behavior gives focus to a specified visual element when an entry is completed. For example, a page might have several entries in sequence, and it would be convenient to the user if completing an entry automatically switched focus to the next entry.

    Code Part:

    <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_email}" 
    	x:Name="ent_name" 
    	Placeholder="Username"/>
    <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
    	x:Name="ent_email"
    	Placeholder="Email"/>
  • EmailValidationBehavior:

  • The behavior allows users to determine whether or not text input is a valid e-mail address. For example, an Entry control can be styled differently depending on whether a valid or an invalid e-mail address is provided. The validation is achieved through a regular expression that is used to verify whether or not the text input is a valid e-mail address. It offers 2 properties "InvalidStyle" and "ValidStyle" will be applied based on this behavior output.

    Code Part:

    <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
    	   x:Name="ent_email"
    	   Placeholder="Email">
    	<Entry.Behaviors>
    		<xct:EmailValidationBehavior
    			InvalidStyle="{StaticResource InvalidEntryStyle}"
    			ValidStyle="{StaticResource ValidEntryStyle}"
    			DecorationFlags="Trim"/>
    	</Entry.Behaviors>
    </Entry>
  • MaskedBehavior:

  • The behavior allows the user to define an input mask for data entry. Adding this behavior to an Entry control will force the user to input only values that matching a given mask. Examples of its usage include input of a credit card number or a phone number with country code.

    Code Part:

    <Entry x:Name="ent_phone"
    	   Placeholder="Mobile Number"
    	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_age}">
    	<Entry.Behaviors>
    		<xct:MaskedBehavior 
    			Mask="+AA-AAAAA-AAAAA" 
    			UnMaskedCharacter="A"/>
    	</Entry.Behaviors>
    </Entry>
  • NumericValidationBehavior:

  • The behavior allows the user to determine if text input is a valid numeric value. For example, an Entry control can be styled differently depending on whether a valid or an invalid numeric input is provided

    Code Part:

    <Entry x:Name="ent_age"
    	   Placeholder="Age"
    	   MaxLength="2"
    	   Keyboard="Numeric"
    	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
    	<Entry.Behaviors>
    		<xct:NumericValidationBehavior 
    			MaximumValue="35"
    			InvalidStyle="{StaticResource InvalidEntryStyle}"/>
    	</Entry.Behaviors>
    </Entry>

    MaxLengthReachedBehavior:

  • The behavior allows the user to trigger an action when a user has reached the maximum length allowed on an Entry. It can either trigger a Command or an event depending on the user scenario.

    Code Part:

    <Entry x:Name="ent_age"
    	   Placeholder="Age"
    	   MaxLength="2"
    	   Keyboard="Numeric"
    	   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
    	<Entry.Behaviors>
    		<xct:MaxLengthReachedBehavior 
    			MaxLengthReached="MaxLengthReachedBehavior_MaxLengthReached"
    			ShouldDismissKeyboardAutomatically="True"/>
    	</Entry.Behaviors>
    </Entry>
  • AnimationBehavior:

  • The behavior allows the user to add an animation when an event is raised. It offers various built-in animations such as fade, flip and scale. These are exposed through an instance of the AnimationBase class.

    Code Part:

    <Button Text="Submit"
    		x:Name="btn_submit">
    	<Button.Behaviors>
    		<xct:AnimationBehavior EventName="Clicked">
    			<xct:AnimationBehavior.AnimationType>
    				<xct:FadeAnimation
    		Easing="{x:Static Easing.SinInOut}"
    		Duration="1000"/>
    			</xct:AnimationBehavior.AnimationType>
    		</xct:AnimationBehavior>
    	</Button.Behaviors>
    </Button>

Full Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinCommunityToolkit.BehavioursSample">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry" x:Key="InvalidEntryStyle">
                <Setter Property="TextColor" Value="Red"/>
            </Style>
            <Style TargetType="Entry" x:Key="ValidEntryStyle">
                <Setter Property="TextColor" Value="Green"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="20"
                     VerticalOptions="Center">

            <Label Text="Register Here..!"
                   TextColor="Orange"
                   FontSize="Title"
                   HorizontalOptions="Center"
                   Margin="0,0,0,10"/>

            <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_email}"
                   x:Name="ent_name"
                   Placeholder="Username"/>
            <Entry xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_phone}"
                   x:Name="ent_email"
                   Placeholder="Email">
                <Entry.Behaviors>
                    <xct:EmailValidationBehavior
                        InvalidStyle="{StaticResource InvalidEntryStyle}"
                        ValidStyle="{StaticResource ValidEntryStyle}"
                        DecorationFlags="Trim"/>
                </Entry.Behaviors>
            </Entry>
            <Entry x:Name="ent_phone"
                   Placeholder="Mobile Number"
                   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference ent_age}">
                <Entry.Behaviors>
                    <xct:MaskedBehavior 
                        Mask="+AA-AAAAA-AAAAA" 
                        UnMaskedCharacter="A"/>
                </Entry.Behaviors>
            </Entry>
            <Entry x:Name="ent_age"
                   Placeholder="Age"
                   MaxLength="2"
                   Keyboard="Numeric"
                   xct:SetFocusOnEntryCompletedBehavior.NextElement="{x:Reference btn_submit}">
                <Entry.Behaviors>
                    <xct:NumericValidationBehavior 
                        MaximumValue="35"
                        InvalidStyle="{StaticResource InvalidEntryStyle}"/>
                    <xct:MaxLengthReachedBehavior 
                        MaxLengthReached="MaxLengthReachedBehavior_MaxLengthReached"
                        ShouldDismissKeyboardAutomatically="True"/>
                </Entry.Behaviors>
            </Entry>
            <Button Text="Submit"
                    x:Name="btn_submit">
                <Button.Behaviors>
                    <xct:AnimationBehavior EventName="Clicked">
                        <xct:AnimationBehavior.AnimationType>
                            <xct:FadeAnimation
                    Easing="{x:Static Easing.SinInOut}"
                    Duration="1000"
                />
                        </xct:AnimationBehavior.AnimationType>
                    </xct:AnimationBehavior>
                </Button.Behaviors>
            </Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Demo:

The XCT offering multiple behaviors and please visit the below link for more samples. https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Behaviors

Download Code:

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.


Introduction In this post, we are going see the featured effects available in Xamarin Community Toolkit a...

Xamarin Community Toolkit - Effects Xamarin Community Toolkit -  Effects

A blog about android developement

Xamarin Forms

Introduction

In this post, we are going see the featured effects available in Xamarin Community Toolkit and how to use them. This post is a part of Xamarin Community Toolkit - Tutorial Series and visit the post for know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms. 

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Effects using Xamarin Community Toolikit.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Effects using Xamarin Community Toolikit.

In this step, we will see how to implement the featured effects offered in Xamarin Community Toolkit. Here, we have expalined the implementation of Safe Area Effect, Shadow Effect, Life Cycle Effect and StatusBar Effect.

  • Open your XAML design file and add the following namespace to utilise the views in the screen.
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

SafeAreaEffect

  • The SafeAreaEffect is an effect that can be added to any element through an attached property to indicate whether or not that element should take current safe areas into account.
  • This is an area of the screen that is safe for all devices that use iOS 11 and greater.
  • Specifically, it will help to make sure that content isn't clipped by rounded device corners, the home indicator, or the sensor housing on an iPhone X. The effect only targets iOS, meaning that on other platforms it does not do anything.
  • Properties:
      SafeArea - Indicates which safe areas should be taken into account for this element
<StackLayout xct:SafeAreaEffect.SafeArea="True" BackgroundColor="White"> </StackLayout>

Before Applying the Effect

After Applying the Effect

ShadowEffect

  • It is used to have shadow effect for Xamarin Forms Views and we have five properties that need to be understood to using this effect.
  • Properties:
    1. Color: It's the color that the shadow will have.
    2. Opacity: With this property, you can control the opacity you want in the shadow.
    3. Radius: It’s responsible for handling the blurring in the shadow.
    4. OffsetX/OffsetY: It allows us to define the displacement that the shadow will have, therefore OffsetX is responsible for specifying the distance of the horizontal displacement, while OffsetY of the vertical displacement.
  • In this example, I have updated the shadow effect for the Image Control like in the following code block
    <Image
    	x:Name="img"
    	HeightRequest="150"
    	Margin="10"
    	xct:ShadowEffect.Color="Green" 
    	xct:ShadowEffect.OffsetY="15"
    	Source="https://shorturl.at/qsvJ1">
    </Image>

Lifecycle Effect

  • The LifecycleEffect allows you to determine when a VisualElement has its renderer allocated by the platform. It can be identified by using the LifeCycleEffect event handlers.
<Image
	x:Name="img"
	HeightRequest="150"
	Margin="10"
	Source="https://shorturl.at/qsvJ1">
	<Image.Effects>
		<xct:LifecycleEffect Loaded="LifeCycleEffect_Loaded" Unloaded="LifeCycleEffect_Unloaded" />
	</Image.Effects>
</Image>
private void LifeCycleEffect_Loaded(object sender, EventArgs e)
{
	Console.WriteLine("Image loaded...");
}

private void LifeCycleEffect_Unloaded(object sender, EventArgs e)
{
	Console.WriteLine("Image Unloaded...");
}

Statusbar Effect

  • This effect is used to control the status bar color in the Xamarin Forms Application during the compile time or runtime or like button clicks. It is a single line code to be useful to control.
  • In this example, we will create color resource in the App.xaml file like below. It will be updated later dynamically.
    <Color x:Key="StatusBarColor">Firebrick</Color>
  • Then add the following line in the root element of your XAML page as a DynamicResource
    xct:StatusBarEffect.Color="{DynamicResource StatusBarColor}"
  • Then add the 3 buttons like in the sample screen and update your dynamic resource color on button click like below.
    private void ButtonClicked(object sender, EventArgs e)
    {
    	Application.Current.Resources["StatusBarColor"] = ((Button)sender).TextColor;            
    }

Full Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkit.EffectsSamplePage"
             xct:StatusBarEffect.Color="{DynamicResource StatusBarColor}">
    <ContentPage.Content>
        <StackLayout xct:SafeAreaEffect.SafeArea="True"
                     BackgroundColor="White">

            <Frame BackgroundColor="#2196F3" 
                   Padding="24" 
                   CornerRadius="0">
                <Label Text="Xamarin Forms Effects using XCT" 
                       HorizontalTextAlignment="Center" 
                       TextColor="White" 
                       FontSize="36"/>
            </Frame>
            
            <Image
                x:Name="img"
                HeightRequest="150"
                Margin="10"
                xct:ShadowEffect.Color="Green" 
                xct:ShadowEffect.OffsetY="15"
                Source="https://shorturl.at/qsvJ1">
                <Image.Effects>
                    <xct:LifecycleEffect Loaded="LifeCycleEffect_Loaded" Unloaded="LifeCycleEffect_Unloaded" />
                </Image.Effects>
            </Image>
            <Grid Padding="10">
                <Button Clicked="ButtonClicked" Text="Red" TextColor="Red" BorderColor="Red" BorderWidth="2" Grid.Column="0"/>
                <Button Clicked="ButtonClicked" Text="Green" TextColor="Green" BorderColor="Green" BorderWidth="2" Grid.Column="1"/>
                <Button Clicked="ButtonClicked" Text="Blue" TextColor="Blue" BorderColor="Blue" BorderWidth="2" Grid.Column="2"/>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
The XCT offering other type effects as well and please visit the below link for more samples. https://github.com/xamarin/XamarinCommunityToolkit/tree/main/samples/XCT.Sample/Pages/Effects

Download Code:

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.


Introduction In this post, we are going see the featured views available in Xamarin Community Toolkit and how to...

Xamarin Community Toolkit - Featured Views Xamarin Community Toolkit -  Featured Views

A blog about android developement

Xamarin Forms

Introduction

In this post, we are going see the featured views available in Xamarin Community Toolkit and how to use them. This post is a part of Xamarin Community Toolkit - Tutorial Series and visit the post for know about the Xamarin Community Toolkit. The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms. 

Coding Part

Steps

  1. Step 1: Creating new Xamarin.Forms Projects.
  2. Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project.
  3. Step 3: Implementation of Xamarin Community featured views.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New Project à Select Xamarin Cross Platform App and Click OK.

Note: Xamarin.Forms version should be greater than 5.0.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the Xamarin Community Toolkit in Xamarin.Forms .Net Standard Project

    In this step, we will see how to setup the plugin.

  • Open the Nuget Manager in the Visual Studio Solution by right click the solution and select “Manage Nuget Packages”.
  • Then select “Xamarin Community Toolkit” and check all the projects in the solution, install the plugin

Step 3: Implementation of Xamarin Community featured views.

    In this step, we will see how to implement the XCT featured views in XAML. We have expalined the usage with Avatar View and Expander View

  • Open your XAML design file and add the following namespace to utilise the views in the screen.
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
  • AvatarView
    The AvatarView control allows the user to display an avatar or the user's initials if no avatar is available. By binding the Source property the user can assign an image to the AvatarView. Simultaneously binding the Text property will allow the user to also set the initials to be shown if no valid image is provided. It can used like the below code part.
    <xct:AvatarView Text="M" Source="https://www.c-sharpcorner.com/UploadFile/AuthorImage/553bbc20200726035629.jpg" HorizontalOptions="Center"/>
  • ExpanderView
    The Xamarin.CommunityToolkit Expander control provides an expandable container to host any content. The control has a header and content, and the content is shown or hidden by tapping the Expander header. When only the Expander header is shown, the Expander is collapsed. When the Expander content is visible the Expander is expanded. To know more about this control, click here.
    <xct:Expander >
        <xct:Expander.Header>
            <Grid Padding="10">
                <Label Text="Xamarin Community Toolkit - Views"
               FontSize="16" />
                <Image Source="expand.png"
                       WidthRequest="16"
                       HorizontalOptions="End"
                       VerticalOptions="Center">
                    <Image.Triggers>
                        <DataTrigger TargetType="Image"
                             Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                             Value="True">
                            <Setter Property="Rotation"
                            Value="180" />
                        </DataTrigger>
                    </Image.Triggers>
                </Image>
            </Grid>
        </xct:Expander.Header>
        <xct:Expander.ContentTemplate>
            <DataTemplate>
                <Grid Padding="10"
                      HorizontalOptions="FillAndExpand"
                      VerticalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="https://tinyurl.com/4pp4mn7e"
                           HeightRequest="45"
                           Aspect="Fill"/>
                    <Label Grid.Column="1"
                           VerticalOptions="FillAndExpand"
                           Text="The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms."
                   FontAttributes="Italic" />
                </Grid>
            </DataTemplate>
        </xct:Expander.ContentTemplate>
    </xct:Expander>
  • UniformGrid
    The UniformGrid is like the Grid, with the possibility of multiple rows and columns, but with one important difference: all rows and columns have the same size. That size is determined by the largest width and height of all the child elements. The child element with the largest width does not necessarily have to be the child element with the largest height. Use the UniformGrid when you need the Grid behavior without the need to specify different sizes for the rows and columns.
    <xct:UniformGrid>
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
        <BoxView Color="Blue" />
        <BoxView Color="Green" />
        <BoxView Color="LightGreen" />
        <BoxView Color="Gray" />
        <BoxView Color="Pink" />
    </xct:UniformGrid>
  • Here, I have listed the few views featured in the XCT plugin and the below controls are available with XCT
    1. AvatarView
    2. BadgeView
    3. CameraView
    4. DockLayout
    5. Expander
    6. LazyView
    7. MediaElement
    8. Popup
    9. RangeSlider
    10. Shield
    11. StateLayout
    12. TabView
    13. UniformGrid

Full Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="XamarinCommunityToolkit.MainPage">

    <StackLayout Spacing="0">
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Xamarin Community Toolkit Tutorial Series!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>

        <Label Text="Avatar View"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>

        <xct:AvatarView Text="M" Source="https://www.c-sharpcorner.com/UploadFile/AuthorImage/553bbc20200726035629.jpg" 
                        HorizontalOptions="Center"/>
        <Label Text="Expander View"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>
        
        <xct:Expander >
            <xct:Expander.Header>
                <Grid Padding="10">
                    <Label Text="Xamarin Community Toolkit - Views"
                   FontSize="16" />
                    <Image Source="expand.png"
                           WidthRequest="16"
                           HorizontalOptions="End"
                           VerticalOptions="Center">
                        <Image.Triggers>
                            <DataTrigger TargetType="Image"
                                 Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                                 Value="True">
                                <Setter Property="Rotation"
                                Value="180" />
                            </DataTrigger>
                        </Image.Triggers>
                    </Image>
                </Grid>
            </xct:Expander.Header>
            <xct:Expander.ContentTemplate>
                <DataTemplate>
                    <Grid Padding="10"
                          HorizontalOptions="FillAndExpand"
                          VerticalOptions="FillAndExpand">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="https://tinyurl.com/4pp4mn7e"
                               HeightRequest="45"
                               Aspect="Fill"/>
                        <Label Grid.Column="1"
                               VerticalOptions="FillAndExpand"
                               Text="The Xamarin Community Toolkit is a collection of reusable elements for mobile development with Xamarin.Forms, including animations, behaviors, converters, effects, and helpers. It simplifies and demonstrates common developer tasks when building iOS, Android, macOS, WPF and Universal Windows Platform (UWP) apps using Xamarin.Forms."
                       FontAttributes="Italic" />
                    </Grid>
                </DataTemplate>
            </xct:Expander.ContentTemplate>
        </xct:Expander>
        
        <Label Text="Uniform Grid"
               FontSize="16"
               Padding="10"
               FontAttributes="Bold"/>
        
        <xct:UniformGrid>
            <BoxView Color="Red" />
            <BoxView Color="Yellow" />
            <BoxView Color="Orange" />
            <BoxView Color="Purple" />
            <BoxView Color="Blue" />
            <BoxView Color="Green" />
            <BoxView Color="LightGreen" />
            <BoxView Color="Gray" />
            <BoxView Color="Pink" />
        </xct:UniformGrid>
    </StackLayout>

</ContentPage>

Demo:

Download Code:

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.