Home

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.

NuGet Build Status

Features:

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.

Preview

API Reference

PropertyDefaultDescription
IconnullName of the icon file to use
Textstring.EmptyButton text to be displayed
FontSizeDefaultFont size of the button text
ForegroundColorWhiteForeground color overlay for icon and text
BackgroundColorTransparentBackground color of the button
BorderColorTransparentBorder color of the button
HighlightForegroundColorWhiteForeground color overlay for icon and text when pressed down
HighlightBackgroundColorTransparentBackground color of the button when pressed down
HighlightBorderColorTransparentBackground color of the border when pressed down
CornerRadius0Button borner radius
Padding30% of height, 10-30% of widthInside distance from icon to button borders
IconPadding0Additional Padding around the icon to control distance to text
IconOrientationIconOrientation.LeftPositions the icon on a button that has icon and text
BorderThickness0Width of the border in each direction
ToggleModefalseSets the button in Toggle Mode
IsToggledfalseRepresents the Toggle state, when Toggle Mode is enabled
IconTintEnabledtrueEnables tinting of the icon (Set to false, if your icon is colorized)
HasShadowfalseEnables Xamarin.Forms Frame's Shadow around the button
MaxLines1Maximum number of lines for test. Set it to -1 for flexible amount of lines
AccessibleNamestring.EmptyAccessibility Name for Automation
EventDescription
TouchedDownTriggered, when button got pressed down
TouchedUpTriggered, when button got released
TouchCanceledTriggered, when moving the pointer out of the button area
ClickedSame as TouchedUp
ToggledTriggered, when the button got toggled on or off