-
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.
-
< Label Text = " Text " ef:AddCommand.On= " true " ef:AddCommand.Command= " {Binding GoCommand} " />
< Label Text = " Text " ef:AddCommand.Command= " {Binding GoCommand} " />
AiForms . Effects . EffectConfig . EnableTriggerProperty = false ;
Install-Package AiForms.Effects
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 ) ;
}
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 .. .
}
-
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.
-
< ContentView ef:Gradient.Colors= " Red,Yellow,#800000FF " ef:Gradient.Orientation= " RightLeft " > < Label Text = " Abc " /> </ ContentView >
< 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 = " twenty-eight " WidthRequest = " fifty-six " HeightRequest = " fifty-six "
Text = " + " FontSize = " twenty-four "
TextColor = " White " Padding = " zero " /> </ ef : FloatingView > </ ef : FloatingLayout > </ ef : Floating .Content> < StackLayout > < Label Text = " MainContents " /> </ StackLayout > </ ContentPage >
-
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.
-
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.
-
-
EffectColor (trigger) -
Touch feedback color. (default: transparent)
-
-
EnableSound (trigger) -
Touch feedback system sound. (default: false)
-
-
On -
Effect On / Off
-
Since this effect hasn't any trriger property, control by On property.
-
TouchBegin -
TouchMove -
TouchEnd -
TouchCancel
<? xml version = " one " encoding = " UTF-8 " ?> < ContentPage ... xmlns : ef = " clr-namespace:AiForms.Effects;assembly=AiForms.Effects " > < StackLayout HeightRequest = " three hundred " ef:AddTouch.On= " true " x : Name = " container " /> </ ContentPage >
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 " ) ;
} ;
-
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.
< 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= " fifty " Width = " two hundred " /> </ ContentPage >
-
On -
Effect On/Off (true is On)
-
-
Width (trigger) -
Border width (default null)
-
-
Color -
Border color (default transparent)
-
-
Radius (trigger) -
Border radius (default 0)
-
< 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 = " four " ef:Border.Width= " two " ef:Border.Radius= " six " ef:Border.Color= " Red " > < Label Text = " hoge " /> < Label Text = " fuga " /> </ StackLayout > </ ContentPage >
-
On Android Entry, Picker, DatePicker, TimePicker's input underline is hidden if this effect attached. -
On Android, Button is not displayed correctly. Use ToFlatButton for button. -
On Android WebView, Frame, ScrollView are not supported. -
On Android ListView and TableView overflow background from border. -
Using AddCommand simultaneously is not supported.
-
Button (Android)
-
On -
Effect On/Off (true is On)
-
-
RippleColor (trigger) -
Ripple effect color.(default none)
-
< Button Text = " ButtonText " ef:ToFlatButton.On= " true " ef:ToFlatButton.RippleColor= " Red " BorderWidth= " four " BorderColor = " Green " BorderRadius = " ten " />
-
Label -
Entry -
Editor -
StackLayout -
AbsoluteLayout
-
On -
Effect On/Off (true is On)
-
-
Text (trigger) -
added text
-
-
TextColor -
Default Red
-
-
BackgroundColor -
BackgroundColor of inner text view. -
Default Transparent
-
-
FontSize -
Default 8
-
-
Margin -
Distance from a side of target view to inner text view. -
Default 0,0,0,0
-
-
Padding -
Padding of inner text view. -
Default 0,0,0,0
-
-
HorizontalAlign -
horizontal text position(Start or End). Default End.
-
-
VerticalAlign -
vertical text position(Start or End). Default Start.
-
< 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 = " four " > < Entry HorizontalOptions = " FillAndExpand " Text = " {Binding Title} " ef:AddText.On= " true " ef:AddText.TextColor= " Red " ef:AddText.FontSize= " ten " 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 >
|
|
|
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
On -
Effect On/Off (true is On)
-
-
Command (trigger) -
Tap Command
-
-
CommandParameter -
Tap Command Parameter
-
-
LongCommand (trigger) -
Long Tap Command
-
-
LongCommandParameter -
Long Tap Command Parameter
-
-
EffectColor -
foreground color when tapped. (default: transparent)
-
EnableRipple Ripple Effect On/Off (default true,android only) If you don't have to use ripple effect, it make EnableRipple false. -
This property is obsolete as of version 1.4.0.
-
EnableSound -
When tapped, whether play system sound effect.(Default false)
-
-
SyncCanExecute -
Whether synchronize Command's CanExecute to xamarin.forms.view's IsEnabled.(Default false) -
If true, a view become opacity when disabled.
-
< 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 >
-
If the version is more than or equal 1.1.0 and RippleEffect is applied to a Element which is a kind of Layout, the InputTransparent of the children become not to work.
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 = one thousand one hundred and four ; .. .
}
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 ; .. .
}
< StackLayout ef:AddCommand.On= " {Binding EffectOn} " ef:AddCommand.EffectColor= " {Binding EffectColor} " > < Image Source = " image " /> </ StackLayout >
-
Label -
BoxView -
Button -
Image -
StackLayout -
AbsoluteLayout
-
On -
Effect On/Off (true is On)
-
-
Min -
minimum number(positive integer)
-
-
Max -
maximum number(positive integer)
-
-
Number (trigger) -
current number(default twoway binding)
-
-
Title -
Picker Title(optional) -
In case iOS, if this is so long, it will be not beautiful.
-
-
Command -
command invoked when a number was picked(optional)
-
< 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= " ten " ef:AddNumberPicker.Max= " nine hundred and ninety-nine " ef:AddNumberPicker.Number= " {Binding Number} " ef:AddNumberPicker.Title= " Select your number " ef:AddNumberPicker.Command= " {Binding SomeCommand} " /> </ StackLayout > </ ContentPage >
-
On -
Effect On/Off (true is On)
-
-
Time (trigger) -
current time(default twoway binding)
-
-
Title -
Picker Title(optional) -
In case iOS, if this is so long, it will be not beautiful.
-
-
Command -
command invoked when a time was picked(optional)
-
-
On -
Effect On/Off (true is On)
-
-
MinDate -
minimum date(optional)
-
-
MaxDate -
maximum date(optional)
-
-
Date (trigger) -
current date(default twoway binding)
-
-
TodayText -
button text to select today(optional / only iOS) -
If this property is set, today's button will be shown. If that button is tapped, today will be selected.
-
-
Command -
command invoked when a date was picked(optional)
-
-
Label -
Editor
-
On -
Effect On/Off (true is On)
-
-
Multiple (trigger) -
Multiple to the font height. -
The font height * this multiple will become line height.
-
< 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 = " four " > < Label Text = " {Binding LabelText} " VerticalOptions = " Start " FontSize = " twelve " ef:AlterLineHeight.On= " true " ef:AlterLineHeight.Multiple= " one point five " /> </ StackLayout > </ ContentPage >
|
|
|
|
---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
On -
Effect On/Off (true is On)
-
-
Accent (trigger) -
changed color.
-
< Slider Minimum = " zero " Maximum = " one " Value = " zero point five " ef:AlterColor.On= " true " ef:AlterColor.Accent= " Red " />
In case you use version less than 3.2.0, this effect can be made use of.
-
On -
Effect On/Off (true is On)
-
-
Text (trigger) -
Placeholder text.
-
-
Color -
Placeholder color.
-
< 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 = " one hundred and fifty " ef:Placeholder.On= " true " ef:Placeholder.Text= " placeholder text " ef:Placeholder.Color= " #E0E0E0 " /> </ ContentPage >