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.
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".
<Label Text="Text" ef:AddCommand.On="true" ef:AddCommand.Command="{Binding GoCommand}" />
Always needs On property.
<Label Text="Text" ef:AddCommand.Command="{Binding GoCommand}" />
Need not On property when specified Trigger Property.
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;
iOS:iPhone5s,iPod touch6,iOS9.3
Android:version 5.1.1 (only FormsAppcompatActivity) / API22
Install-Package AiForms.Effects
You need to install this nuget package to .NETStandard project and each platform 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);
}
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
...
}
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.
<ContentView
ef:Gradient.Colors="Red,Yellow,#800000FF"
ef:Gradient.Orientation="RightLeft" >
<Label Text="Abc" />
</ContentView>
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.
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>
Note that this effect doesn't work without trigger property because it hasn't an On property.
This is the Layout that can freely arrange several FloatingView's over a page.
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.
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.
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.
Since this effect hasn't any trriger property, control by On property.
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");
};
This is the effect that make font size adjusted to fit the Label size. This can be used only Label.
Since this effect hasn't any trriger property, control by On property.
<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>
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.
<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>
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.
<Button Text="ButtonText"
ef:ToFlatButton.On="true"
ef:ToFlatButton.RippleColor="Red"
BorderWidth="4" BorderColor="Green" BorderRadius="10"
/>
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.
and more.
<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>
When device rotates, text position will not be right in case android.
This Effect add Command function to a view.
There are properties of Command and Parameter for tap and long tap.
iOS | Android | |
---|---|---|
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 | ✅ | ✅ |
<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>
On Android
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;
...
}
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>
This Effect add NumberPicker function to a view.
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.
and more. same with AddCommand.
<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>
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.
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.
This Effect alter LineHeight of Label and Editor.
<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>
This is the effect that alter the color of an element which it cannot change color normally.
iOS | Android | which part | |
---|---|---|---|
Page | ✅ | Statusbar | |
Slider | ✅ | ✅ | Trackbar |
Switch | ✅ | ✅ | Trackbar |
Entry | ✅ | Under line | |
Editor | ✅ | Under line |
<Slider Minimum="0" Maximum="1" Value="0.5"
ef:AlterColor.On="true" ef:AlterColor.Accent="Red" />
** 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.
<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>
I am asking for your donation for continuous development🙇
Your donation will allow me to work harder and harder.
I am asking for sponsors too. This is a subscription.
MIT Licensed.