AiForms.Effects for Xamarin.Forms

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

Gradient
- set a gradient background.
Floating
- arrange some floating views (e.g. FAB) at any place over a page.
Feedback
- add touch feedback effect (color and sound) without command.
AddTouch
- add touch event ( begin, move, end, cancel ).
SizeToFit
- make font size adjusted to fit the Label size.
Border
- add border to a view.
ToFlatButton
- alter Button to flat (for Android)
AddText
- add one line Text to a view.
AddCommand
- add Command function to a view.
AddNumberPicker
- add NumberPicker function to a view.
AddTimePicker
- add TimePicker function to a view.
AddDatePicker
- add DatePicker function to a view.
AlterLineHeight
- alter LineHeight of Label and Editor.
AlterColor
- alter Color of an element which it cannot change color.
Placeholder
- show placeholder on Editor.

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

On
- Effect On/Off (true is On)
Colors (trigger)
- The colors of gradient.
- Can set multiple colors with comma-separated in Xaml.
- Specify the instance of the GradientColors class in c#.
Orientation
- Specify the direction for the gradient.
- Can select from 8 directions.

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>

Property

Content (trigger)
- The root element to arrange floating views.
- This property is of type FloatingLayout.

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

HorizontalLayoutAlignment (defalut: Center)
- The horizontal position enumeration value (Start / Center / End / Fill)
VerticalLayoutAlignment (default: Center)
- The vertical position enumeration value (Start / Center / End / Fill)
OffsetX
- The adjustment relative value from the horizontal layout position. (without Fill)
OffsetY
- The adjustment relative value from the vertical layout position. (without Fill)
Hidden
- The bool value whether a view is hidden or shown.
- On Android, If IsVisible is false when a page is rendered, there is the issue that views are never displayed. This method is used to avoid the issue. If there is some problem using IsVisible, use this instead of.
- In internal, this property uses Opacity and InputTransparent 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

EffectColor (trigger)
- Touch feedback color. (default: transparent)
EnableSound (trigger)
- Touch feedback system sound. (default: false)

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

On
- Effect On / Off

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

TouchRecognizer events

TouchBegin
TouchMove
TouchEnd
TouchCancel

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

On
- Effect On/Off (true is On)
CanExpand
- Whether font size is expanded when making it fit. (Default true)
- If false, font size won't be expanded and only shrinked.

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.

AiForms.Effects

Install / Use

README

AiForms.Effects for Xamarin.Forms

Features

Trigger Property (1.4.0~)

Old (~1.3.1)

New (1.4.0~)

To keep traditional

Minimum Device and Version etc

Nuget Installation

for iOS project

for Android project

Gradient

Properties

How to write with XAML

Floating

How to use

Property

FloatingLayout

FloatingView

Properties

Feedback

Properties

AddTouch

Properties

TouchRecognizer events

Demo

How to use

SizeToFit

Properties

Demo

How to write with Xaml

Border

Properties