Flexible button control for Xamarin.Forms
Clone or download

README.md

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:

  • 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.

Preview

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
Event Description
TouchedDown Triggered, when button got pressed down
TouchedUp Triggered, when button got released
Clicked Same as TouchedUp
Toggled Triggered, when the button got toggled on or off