Awesome
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 |