Xamarin.Forms FlexButton
Flexible button control for Xamarin.Forms with events for different states, color overlays and adjustable shapes and paddings. Supports iOS, Android and UWP.
Features:
- Adjustable button size and shape
- Icons with adjustable size
- Color overlays for background and icon (normal and pressed state)
- Events for button hold and release
- Round button and Pill button (using corner radius)
- Icon only, text only or mixed mode
- Customizable Borders
- Toggle Mode
How to use
Add the NuGet package to the Xamarin.Forms project and all platform projects
PM> Install-Package Forms.Controls.FlexButton
[iOS only] Initialize the control
In your AppDelegate.cs call this after Forms.Init();
FlexButton.Init();
Add the XML namespace
xmlns:flex="clr-namespace:Flex.Controls;assembly=Flex"
Add the control
<flex:FlexButton
WidthRequest="76"
HeightRequest="76"
CornerRadius="38"
HorizontalOptions="Center"
Icon="lightbulb.png"
ForegroundColor="#ffffff"
HighlightForegroundColor="#49516F"
BackgroundColor="#6279B8"
HighlightBackgroundColor="#8EA4D2" />
Preview
Take a look a the Demo Project in this repository for a full sample.
API Reference
Property | Default | Description |
---|---|---|
Icon |
null |
Name of the icon file to use |
Text |
string.Empty |
Button text to be displayed |
FontSize |
Default | Font size of the button text |
ForegroundColor |
White |
Foreground color overlay for icon and text |
BackgroundColor |
Transparent |
Background color of the button |
BorderColor |
Transparent |
Border color of the button |
HighlightForegroundColor |
White |
Foreground color overlay for icon and text when pressed down |
HighlightBackgroundColor |
Transparent |
Background color of the button when pressed down |
HighlightBorderColor |
Transparent |
Background color of the border when pressed down |
CornerRadius |
0 |
Button borner radius |
Padding |
30% of height, 10-30% of width | Inside distance from icon to button borders |
IconPadding |
0 | Additional Padding around the icon to control distance to text |
IconOrientation |
IconOrientation.Left |
Positions the icon on a button that has icon and text |
BorderThickness |
0 |
Width of the border in each direction |
ToggleMode |
false |
Sets the button in Toggle Mode |
IsToggled |
false |
Represents the Toggle state, when Toggle Mode is enabled |
IconTintEnabled |
true |
Enables tinting of the icon (Set to false, if your icon is colorized) |
HasShadow |
false |
Enables Xamarin.Forms Frame's Shadow around the button |
MaxLines |
1 |
Maximum number of lines for test. Set it to -1 for flexible amount of lines |
AccessibleName |
string.Empty |
Accessibility Name for Automation |
Event | Description |
---|---|
TouchedDown |
Triggered, when button got pressed down |
TouchedUp |
Triggered, when button got released |
TouchCanceled |
Triggered, when moving the pointer out of the button area |
Clicked |
Same as TouchedUp |
Toggled |
Triggered, when the button got toggled on or off |