Custom Effects for Xamarin.Forms named AiForms.Effects
Tags: xamarinforms, xamarin, effects
Published: 2018-02-06 07:07:43

---
title: Custom Effects for Xamarin.Forms named AiForms.Effects
published: true
description: 
tags: xamarin.forms,xamarin,effects
---

I think that Xamarin.Forms Controls haven't enough fundamental functions. But Using Xamarin.Forms.Effects enable us to add various functions to controls.
So I made the effects library named AiForms.Effects in order to make the most of Xamarin.Forms Controls.

## Repository

[https://github.com/muak/AiForms.Effects](https://github.com/muak/AiForms.Effects)

## Nuget

[https://www.nuget.org/packages/AiForms.Effects/](https://www.nuget.org/packages/AiForms.Effects/)

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

### For iOS project

To use on iOS, you need to write some code in AppDelegate.cs.

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

    AiForms.Effects.iOS.Effects.Init();  //need to write here

    LoadApplication(new App(new iOSInitializer()));

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

## Minimum Device and Version etc

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

### Features

|                   |                                                           |
| ----------------- | --------------------------------------------------------- |
| AddCommand        | Add a Command to a view.                                  |
| AddDatePicker     | Add a DatePicker function to a view.                      |
| AddNumberPicker   | Add a NumberPicker function to a view.                    |
| AddTimePicker     | Add a TimePicker function to a view.                      |
| AddText           | Add one line text in a view.                              |
| AddTouch          | Add touch events (begin, move, end, cancel) to a view.    |
| AlterLineHeight   | Alter line height (line spacing) of a Label and Editor.   |
| AlterColor        | Alter an element color which can't be changed.            |
| Border            | Add a border to a view.                                   |
| Placeholder       | Show a placeholder in an Editor.                          |
| SizeToFit         | Make font size adjusted to fit a Label size.              |
| ToFlatButton      | Alter a Button to flat (for Android).                     |




## Overview

### AddCommand


This is the effect that adds Commands functions to a view. This provides such functions as tap action, long tap action, touch feedback color, tap sound and changing IsEnabled property synchronized CanExecute of Command.

{% youtube YdFHtPSuRg4 %}

### AddDatePicker

This is the effect that adds a Date Picker to a view. When a view is tapped, a Date Picker is shown and when a date is selected, the date will be reflected the Date property value. Furthermore, if the Command property is set, the command will be executed.

On iOS, if the TodayText property is set, today's button will be shown and if that button is tapped, today will be selected.

{% youtube 5vwkbO2yeeE %}

### AddNumberPicker

This is the effect that adds a Number Picker to a view. When a view is tapped, a Number Picker is shown and when a number is selected, the number will be reflected the Number property value. Furthermore, if the Command property is set, the command will be executed.

{% youtube 8VlmCXYVeJ8 %}

### AddTimePicker

This is the effect that adds a Time Picker to a view. When a view is tapped, a Time Picker is shown and when a time is selected, the time will be reflected the Time property value. Furthermore, if the Command property is set, the command will be executed.

{% youtube LA5oQ1m4WxA %}

### AddText

This is the effect that adds one line text into a view. If you use this effect, for example, you will be able to show such information as validations and character counter and so on. 
You can change the text position(top-left, top-right, bottom-left, bottom-right), text color, font size and margin by specifying each corresponded property.

{% youtube MgCa4PxtbGc %}

### 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.

{% youtube 9zrVQcr_Oqo %}

### AlterLineHeight

This is the effect that alters line height of Label and Editor. If the value of  Multiple-property is specified, Line height will become the font height * the Multiple property value. 

{% youtube FEWoP_xFD1k %}

### AlterColor

This is the effect that alters the color in a part of a view which can't be changed normally. This supports such a view as Slider and Switch.

{% youtube FJ9QDLe5wlU %}

### Border

This is the effect that adds a border to a view. Width, Color, and Radius of a border can be changed by specifying each corresponded property.

Though Entry, Picker, DatePicker, and TimePicker have a border in default on iOS, the border can be hidden by changing Width value to 0.

{% youtube UPnQvpv8WWs %}

### Placeholder

This is the effect that shows a placeholder in Editor. This supports Editor only.

{% youtube MbBgXKNVw2U %}

### SizeToFit

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

{% youtube yMjcFOp38XE %}

### ToFlatButton

This is the effect that alters Button to flat on Android. If this effect is used, you will be able to design a Button like an iOS one. And also this will enable you to change BorderRadius, BorderWidth, and BorderColor that are default Button properties on Android.

{% youtube 4aqQoZltPfE %}

## Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter ([@muak_x](https://twitter.com/muak_x
)).

Thank you.