Showing posts with label Xamarin Community Toolkit. Show all posts

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 Community Toolkit

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 Community Toolkit

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 Community Toolkit

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 Community Toolkit

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 "How to create Master Details Page using Xamarin Community To...

Master Details Page using Xamarin Community Toolkit Master Details Page using Xamarin Community Toolkit

A blog about android developement

Xamarin Community Toolkit

Introduction

In this post, we are going see the "How to create Master Details Page using Xamarin Community Toolkit". To know more about Xamarin Community Toolkit, check the previous posts.

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 Master Details Page using Xamarin Community Toolkit

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 Master Details Page using Xamarin Community Toolkit.

    In this step, we will see how to implement the Implementation of Master Details Page using Xamarin Community Toolkit in XAML. We have expalined the steps below.

  • 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"
  • SideMenuView
    1. Basically, SideMenuView can be added as a child to any layout (e.g. you can put SideMenuView inside StackLayout or even make every item view in CollectionView be SideMenuView as well) or into ContentPage as the root view.
    2. Here, three views inside the SideMenuView. These views represent the Main View, the Left Menu, the Right Menu. This can be determined by using "SideMenuView.Position" property.
    3. SideMenuView.MenuWidthPercentage attached property for determining side menu's size.
    <xct:SideMenuView x:Name="SideMenu">
    	<!--MainView-->
    	<AbsoluteLayout BackgroundColor="White">
    
    		<StackLayout AbsoluteLayout.LayoutFlags="All"
    			AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
    				   VerticalOptions="Center"
    				   HorizontalOptions="Center">
    
    			<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
    				<Label Text="Master Detail Page using XCT" 
    					   HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
    			</Frame>
    
    			<Label Text="<-- Swipe Left or Right -->"
    				   TextColor="Black"
    				   VerticalOptions="Center"
    				   HorizontalOptions="Center"
    				   FontSize="20"/>
    
    		</StackLayout>
    
    		<StackLayout Orientation="Horizontal"
    					 Padding="15, 10"
    					 AbsoluteLayout.LayoutFlags="WidthProportional"
    					 AbsoluteLayout.LayoutBounds="0, 0, 1, -1">
    			<Button Text="|||"
    					TextColor="White"
    					BackgroundColor="#2196F3"
    					WidthRequest="40"
    					FontSize="20"
    					VerticalOptions="Center"
    					Clicked="OnLeftButtonClicked"/>
    			<Button Text="|||"
    					BackgroundColor="#2196F3"
    					TextColor="White"
    					WidthRequest="40"
    					VerticalOptions="Center"
    					FontSize="20"
    					HorizontalOptions="EndAndExpand"
    					Clicked="OnRightButtonClicked" />
    		</StackLayout>
    	</AbsoluteLayout>
    
    	<!--LeftMenu-->
    	<ScrollView xct:SideMenuView.Position="LeftMenu"
    				xct:SideMenuView.MenuWidthPercentage="0.5"
    				BackgroundColor="Orange">
    		<StackLayout HeightRequest="2000">
    			<Button Text="TO RIGHT" FontSize="25" Clicked="OnRightButtonClicked" />
    		</StackLayout>
    	</ScrollView>
    
    	<!--RightMenu-->
    	<ScrollView xct:SideMenuView.Position="RightMenu"
    				xct:SideMenuView.MenuWidthPercentage="0.35"
    				BackgroundColor="Gold">
    		<StackLayout HeightRequest="2000">
    			<Button Text="TO LEFT" FontSize="25" Clicked="OnLeftButtonClicked" />
    		</StackLayout>
    	</ScrollView>
    
    </xct:SideMenuView>
  • Opening the side menu from right or left can be controlled by the State property of the SideMenuView.
    SideMenu.State = SideMenuState.LeftMenuShown; (or SideMenuState.RightMenuShown;)

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.


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 Community Toolkit

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.


From this post, we are going to see about Xamarin Community Toolkit, followed by the features of this Xamarin Community Toolkit a...

Xamarin Community Toolkit - Tutorial Series Xamarin Community Toolkit - Tutorial Series

A blog about android developement

Xamarin Community Toolkit

From this post, we are going to see about Xamarin Community Toolkit, followed by the features of this Xamarin Community Toolkit as a series of tutorials.

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. 

The Xamarin Community Toolkit is available as a Visual Studio NuGet package for new or existing Xamarin.Forms projects. This includes the beloved C# UI Extensions, MediaElement, and Expander controls. There is much more to the toolkit though as the community has been contributing tons of great new controls and helpers. You can also preview the capabilities of the toolkit by running the sample app available in the Xamarin Community Toolkit repo.

Features of Xamarin Community Toolkit

This toolkit’s offers many of those behaviors, converters, and effects that you keep copying from one project to another and aggregate all of these into a single package so it will become your one-stop library that has it all. The Toolkit will also be a place where you can find brand new controls. Some of them come from PRs to Xamarin.Forms that couldn’t be included in the main package, some our controls maintainers donating their controls, and some are just brand-new things!

  1. Behaviors
    • Animations
    • Validators
    • EventloCommand
    • ImpliedOrderGrid
    • Masked (input)
    • UserStoppedTyping
  2. Converters
    • ByteArrayTolmageSource
    • ItemSelectedEventArgs
    • MultiConverterParameter
    • NotEqual
    • TextCase
  3. Effects
    • SafeArea
  4. Extensions
    • ImageResource
    • Translate
    • ValueConverter
  5. Helpers
    • Localization
    • Subscription
    • WeakEvent
  6. ObjectModel
    • AsyncCommand
    • ObservableRangeCollection
  7. Views
    • CameraView
    • Expander
    • SideMenuView
    • AvatarView
    • RangeSlider

Setup Xamarin Community Toolkit

  • The toolkit is available as a NuGet package that can be added to any existing or new project using Visual Studio. Open an existing project, or create a new project using the Blank Forms App template.
  • In the Solution Explorer panel, right click on your project name and select Manage NuGet Packages. Search for Xamarin.CommunityToolkit, and choose the desired NuGet Package from the list.
  • To add the namespace to the toolkit, In your C# page, add
     using Xamarin.CommunityToolkit;
    In your XAML page, add the namespace attribute:
     xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

We will see the upcoming tutorials on Xamarin Community Toolkit