Home

Awesome

AiForms.Effects for Xamarin.Forms

for .NET MAUI

AiForms.Effects is the effects library that provides you with more flexible functions than default by targetting only Android and iOS in a Xamarin.Forms project.

Japanese

Build status

Features

Trigger Property (1.4.0~)

Though toggling an effect had used On property in less than ver.1.4.0, As of ver.1.4.0, an effect can be enabled by setting one or more main properties of the effect. These properties are named "Trigger Properties".

Trigger properties correspond to main properties such as Command and LongCommand in case of AddCommand Effect.

In this document, trigger properties are written "trigger".

Old (~1.3.1)

<Label Text="Text" ef:AddCommand.On="true" ef:AddCommand.Command="{Binding GoCommand}" />

Always needs On property.

New (1.4.0~)

<Label Text="Text" ef:AddCommand.Command="{Binding GoCommand}" />

Need not On property when specified Trigger Property.

To keep traditional

If an effect had been used to dynamically toggle to with the On property specified, it may not correctly work on the trigger properties mode. To keep traditional mode, you can disable trigger properties by specifying the static config property at any place in .NETStandard project as the following code.

AiForms.Effects.EffectConfig.EnableTriggerProperty = false;

Minimum Device and Version etc

iOS:iPhone5s,iPod touch6,iOS9.3
Android:version 5.1.1 (only FormsAppcompatActivity) / API22

Nuget Installation

Install-Package AiForms.Effects

You need to install this nuget package to .NETStandard project and each platform project.

for iOS project

You need to write the following code in AppDelegate.cs:

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    
    global::Xamarin.Forms.Forms.Init();
    AiForms.Effects.iOS.Effects.Init();  //need to write here

    ...
    return base.FinishedLaunching(app, options);
}

for Android project

You need to write the following code in MainActivity.cs:

protected override void OnCreate(Bundle bundle) {
            
    base.OnCreate(bundle);

    global::Xamarin.Forms.Forms.Init(this, bundle);
    AiForms.Effects.Droid.Effects.Init(); //need to write here
    ...
}

Gradient

This is the effect that the gradient background is set to a Layout Element. Although It can be set to the controls except with Layouts, its implementation is not complete.

Properties

How to write with XAML

<ContentView 
    ef:Gradient.Colors="Red,Yellow,#800000FF"
    ef:Gradient.Orientation="RightLeft"	>
    <Label Text="Abc" />			
</ContentView>

Floating

This is the effect that arranges some floating views (e.g. FAB) at any place on a page. The arranged elements are displayed more front than a ContentPage and are not affected a ContentPage scrolling.

How to use

This sample is that an element is arranged at above 25dp from the vertical end and left 25dp from the horizontal end.

<ContentPage xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects">
    
    <ef:Floating.Content>
        <ef:FloatingLayout>
            <!-- This element is arranged at above 25dp from the vertical end and left 25dp from the horizontal end. -->
            <ef:FloatingView 
                VerticalLayoutAlignment="End" 
                HorizontalLayoutAlignment="End"
                OffsetX="-25" OffsetY="-25" >
                 <!-- Code behind handling / ViewModel binding OK -->
                 <Button Clicked="BlueTap" BackgroundColor="{Binding ButtonColor}" 
                         BorderRadius="28" WidthRequest="56" HeightRequest="56" 
                         Text="+" FontSize="24"
                         TextColor="White" Padding="0" />
            </ef:FloatingView>
        </ef:FloatingLayout>
    </ef:Floating.Content>

    <StackLayout>
        <Label Text="MainContents" />
    </StackLayout>
</ContentPage>
<img src="images/floating.jpg" width="600" />

Property

Note that this effect doesn't work without trigger property because it hasn't an On property.

FloatingLayout

This is the Layout that can freely arrange several FloatingView's over a page.

FloatingView

It is a view that FloatingLayout arranges. This view is used to specify HorizontalLayoutAlignment, VerticalLayoutAlignment, OffsetX, OffsetX and determine itself position. This view can be set any VisualElements.

Properties

Feedback

This is the effect that adds touch feedback effects (color and sound) to a view. This effect can be made use of with others effect (for example, AddNumberPicker and AddDatePicker) simultaneously. However, AddCommand can't be used along with this effect because AddCommand contains this functions.

Properties

AddTouch

This is the effect that adds touch events (begin, move, end, cancel) to a view. Each touch events provides location property and can be taken X and Y position.

Properties

Since this effect hasn't any trriger property, control by On property.

TouchRecognizer events

Demo

https://youtu.be/9zrVQcr_Oqo

How to use

This effect usage is a little different from the other effects. First of all, set On attached property to a target control and set the value to true in XAML.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage 
    ...
    xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects">
    <StackLayout HeightRequest="300" ef:AddTouch.On="true" x:Name="container" />
</ContentPage>

In turn, use AddTouch.GetRecognizer method, get a TouchRecognizer in code. This recognizer can be used to handle each touch events.

var recognizer = AddTouch.GetRecognizer(container);

recognizer.TouchBegin += (sender, e) => {
    Debug.WriteLine("TouchBegin");
};

recognizer.TouchMove += (sender, e) =>  {
    Debug.WriteLine("TouchMove");
    Debug.WriteLine($"X: {e.Location.X} Y:{e.Location.Y}"); 
};

recognizer.TouchEnd += (sender, e) => {
    Debug.WriteLine("TouchEnd");
};

recognizer.TouchCancel += (sender, e) => {
    Debug.WriteLine("TouchCancel");
};

SizeToFit

This is the effect that make font size adjusted to fit the Label size. This can be used only Label.

Properties

Since this effect hasn't any trriger property, control by On property.

Demo

https://youtu.be/yMjcFOp38XE

How to write with Xaml

<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
	x:Class="AiEffects.TestApp.Views.BorderPage">
	<Label Text="LongText..." ef:SizeToFit.On="true" ef.SizeToFit.CanExpand="false"
			HeightRequest="50" Width="200"  />
</ContentPage>

Border

This is the effect that add border to a view.
Entry, Picker, DatePicker and TimePicker on iOS have a border by default.
When specifying their width 0, it is possible that hide border.

<img src="images/border_ios.gif" /> <img src="images/border_droid.gif" />

Properties

How to write with Xaml

<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
	x:Class="AiEffects.TestApp.Views.BorderPage">
	<StackLayout Margin="4" 
        ef:Border.Width="2" ef:Border.Radius="6" ef:Border.Color="Red">
		<Label Text="hoge" />
        <Label Text="fuga" />
	</StackLayout>
</ContentPage>

Limitations

ToFlatButton

This is the effect that alter Button to flat(only Android).
If this effect is used, you will be able to design like iOS's Button.
And also this effect will enable BorderRadius, BorderWidth and BorderColor of default button properties to use by Android.

<img src="images/toflat1.png" height="400" /> <img src="images/toflat2.png" height="400" />

Supported View

Properties

How to write with Xaml

<Button Text="ButtonText" 
	ef:ToFlatButton.On="true" 
	ef:ToFlatButton.RippleColor="Red"
	BorderWidth="4" BorderColor="Green" BorderRadius="10" 
/>

AddText

This is the effect that add one line text into a view.
If you use this effect, for example you will be able to show a information that validations or character count etc.
You will be able to change text position(top-left,top-right,bottom-left,bottom-right), text color,font size and margin by specifying property.

<img src="images/addtext_ios.gif" /> <img src="images/addtext_droid.gif" />

Supported View

and more.

Properties

How to write with Xaml

<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
	x:Class="AiEffects.TestApp.Views.AddTextPage">
	<StackLayout Margin="4">
		<Entry HorizontalOptions="FillAndExpand" Text="{Binding Title}"
			ef:AddText.On="true" ef:AddText.TextColor="Red" 
			ef:AddText.FontSize="10" ef:AddText.Margin="4,8,4,8" 
			ef:AddText.Padding="2,4,2,4" ef:AddText.BackgroundColor="#A0F0F0E0"
			ef:AddText.HorizontalAlign="End"
			ef:AddText.VerticalAlign="Start" 
			ef:AddText.Text="{Binding TitleMessage}" />
	</StackLayout>
</ContentPage>

Limitations

When device rotates, text position will not be right in case android.

AddCommand

This Effect add Command function to a view.
There are properties of Command and Parameter for tap and long tap.

Supported View (in case Xamarin.Forms 3.6.0)

iOSAndroid
ActivityIndicator✅✅
BoxView✅✅
Button✅✅
DatePicker❌✅
Editor❌❌
Entry❌❌
Image✅✅
Label✅✅
ListView✅❌
Picker❌✅
ProgressBar✅✅
SearchBar❌❌
Slider✅❌
Stepper✅❌
Switch❌❌
TableView❌❌
TimePicker❌✅
WebView❌❌
ContentPresenter✅✅
ContentView✅✅
Frame✅❌
ScrollView❌❌
TemplatedView✅✅
AbsoluteLayout✅✅
Grid✅✅
RelativeLayout✅✅
StackLayout✅✅

Properties

How to write with Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
		x:Class="AiEffects.Sample.Views.AddCommandPage">

        <StackLayout>
    		<Label Text="Label"
    			ef:AddCommand.On="true"
    			ef:AddCommand.EffectColor="#50FFFF00"
    			ef:AddCommand.Command="{Binding EffectCommand}"
    			ef:AddCommand.CommandParameter="Label"
                ef:AddCommand.LongCommand="{Binding LongTapCommand}"
                ef:AddCommand.LongCommandParameter="LongTap" />
        </StackLayout>
</ContentPage>

Limitation

On Android

Tips

Changing Sound Effect

AppDelegate

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Effects.iOS.Effects.Init();
    //here specify sound number
    AiForms.Effects.iOS.FeedbackPlatformEffect.PlaySoundNo = 1104;
    ...
}

MainActivity

protected override void OnCreate(Bundle bundle) {
    
    base.OnCreate(bundle);
    ...
    
    global::Xamarin.Forms.Forms.Init(this, bundle);
    
    //here specify SE
    AiForms.Effects.Droid.FeedbackPlatformEffect.PlaySoundEffect = Android.Media.SoundEffect.Spacebar;
    
    ...
}

When using Image

Ripple Effect will not occur foreground. In that case wrap by a layout view.

<StackLayout ef:AddCommand.On="{Binding EffectOn}"
			 ef:AddCommand.EffectColor="{Binding EffectColor}">
    <Image Source="image" />
</StackLayout>

AddNumberPicker

This Effect add NumberPicker function to a view.<br> When you tap the view ,Picker is shown. And when you select a number,it reflects to Number property.If you set Command property,it executes.

<img src="images/numberpicker1.gif" height=400 /> <img src="images/numberpicker2.gif" height=400 />

Supported View

and more. same with AddCommand.

Properties

How to write with Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
		xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
		prism:ViewModelLocator.AutowireViewModel="True"
		x:Class="AiEffects.Sample.Views.AddNumberPickerPage"
		Title="AddNumberPicker">
	<StackLayout>
		<Label Text="Text"
			ef:AddNumberPicker.On="true"
			ef:AddNumberPicker.Min="10"
			ef:AddNumberPicker.Max="999"
			ef:AddNumberPicker.Number="{Binding Number}"
			ef:AddNumberPicker.Title="Select your number"
            ef:AddNumberPicker.Command="{Binding SomeCommand}" />
    </StackLayout>
</ContentPage>

AddTimePicker

This is the effect that add TimePicker to a view.
When you tap the view, Picker is shown. And when a time is selected, that time will be reflected to Time property. If Command property is set, the command will be executed.

This effect supports views same with AddCommand.

Properties

AddDatePicker

This is the effect that add DatePicker to a view.
When you tap the view, Picker is shown. And when a date is selected, that date will be reflected to Date property. If Command property is set, the command will be executed.

This effect supports views same with AddCommand.

Properties

AlterLineHeight

This Effect alter LineHeight of Label and Editor.

<img src="images/lineheight1.gif" width=250 /> <img src="images/lineheight2.jpg" width=250 />

Supported View

Properties

How to write with Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
		xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
		xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
		prism:ViewModelLocator.AutowireViewModel="True"
		x:Class="AiEffects.Sample.Views.AlterLineHeightPage"
		Title="AlterLineHeight">
	<StackLayout BackgroundColor="White" Spacing="4">
		<Label Text="{Binding LabelText}" VerticalOptions="Start" FontSize="12"
			ef:AlterLineHeight.On="true"
			ef:AlterLineHeight.Multiple="1.5"  />
	</StackLayout>
</ContentPage>

AlterColor

This is the effect that alter the color of an element which it cannot change color normally.

<img src="images/altercolor_ios.gif" /> <img src="images/altercolor_droid.gif" />

Supported views

iOSAndroidwhich part
Page✅Statusbar
Slider✅✅Trackbar
Switch✅✅Trackbar
Entry✅Under line
Editor✅Under line

Properties

How to write with Xaml

<Slider Minimum="0" Maximum="1" Value="0.5" 
	ef:AlterColor.On="true" ef:AlterColor.Accent="Red" />

Placeholder

** This feature was implemented in Xamarin.Forms 3.2.0. **

In case you use version less than 3.2.0, this effect can be made use of.

This is the effect that show placeholder on Editor.
This effect supports Editor only.

<img src="images/placeholder_ios.gif" /> <img src="images/placeholder_droid.gif" />

Properties

How to write with Xaml

<ContentPage 
	xmlns="http://xamarin.com/schemas/2014/forms" 
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
	xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
	x:Class="AiEffects.TestApp.Views.BorderPage">
	<Editor HeightRequest="150"
		ef:Placeholder.On="true"
		ef:Placeholder.Text="placeholder text"
		ef:Placeholder.Color="#E0E0E0"
	/>
</ContentPage>

Contributors

Donation

I am asking for your donation for continuous development🙇

Your donation will allow me to work harder and harder.

Sponsors

I am asking for sponsors too. This is a subscription.

Special Thanks

License

MIT Licensed.