dineshbala1 / flexbutton

Flexible button control for 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

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