⚠️	This NuGet/ repo is now in maintenance mode and support will end once xamarin.forms is no longer supported. Bug fixes only. MAUI repo - https://github.com/IeuanWalker/Maui.StateButton

Xamarin.Forms.StateButton

With this control you are able to create any style of button. This is possible as it acts as a wrapper to your XAML and provides you the events/ commands and properties to bind too.

How to use it?

Install the NuGet package into your shared project project

Install-Package IeuanWalker.StateButton

For iOS the control needs to be initialised in you AppDelegate.cs before Forms.Init();

using StateButton.iOS;
.............
StateButtonRenderer.Init();

What can I do with it?

Properties

Property	What it does	Extra info
State	This changes based on the button state. i.e. Pressed, NotPressed	Default state is NotPressed The binding mode is OneWayToSource so it can only be controlled via this control.

Events

Event	What it does
Clicked	Triggerd when the button is pressed and released
Pressed	Triggerd when the button is pressed
Released	Triggerd when the button is released

Commands

Command	What it does
ClickedCommand	Triggerd when the button is pressed and released
PressedCommand	Triggerd when the button is pressed
ReleasedCommand	Triggerd when the button is released

How to style the button for different states

There are 2 ways to style the button -

• DataTriggers
• VisualStateManager (not recommended)

DataTriggers

Simply add a DataTrigger to any element and bind it to the State property of the button -

<stateButton:StateButton HorizontalOptions="Center">
    <stateButton:StateButton.Content>
        <Frame Padding="20,10" BackgroundColor="Red">
            <Frame.Triggers>
                <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type stateButton:StateButton}}, Path=State}"
                             TargetType="Frame"
                             Value="Pressed">
                    <Setter Property="BackgroundColor" Value="LightGray" />
                </DataTrigger>
            </Frame.Triggers>
            <Label Text="Test" TextColor="White">
                <Label.Triggers>
                    <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type stateButton:StateButton}}, Path=State}"
                                 TargetType="Label"
                                 Value="Pressed">
                        <Setter Property="TextColor" Value="Blue" />
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </Frame>
    </stateButton:StateButton.Content>
</stateButton:StateButton>

VisualStateManager

You can also use the VisualStateManager, but this is NOT RECOMENDED due to a bug in Xamarin.forms that causes a NullReferenceException when TargetName property is used, heres a link to the bug - xamarin/Xamarin.Forms#10710. If you still want to use it -

<stateButton:StateButton BackgroundColor="Red" HorizontalOptions="Center">
    <stateButton:StateButton.Content>
        <Frame Padding="20,10" BackgroundColor="Transparent">
            <Label Text="Test" TextColor="White" />
        </Frame>
    </stateButton:StateButton.Content>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup Name="ButtonStates">
            <VisualState Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Blue" />
                </VisualState.Setters>
            </VisualState>
            <VisualState Name="NotPressed">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Red" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</stateButton:StateButton>

Examples

Designs from a production app	Complex example
	This shows the StateButton as the wrapper for a card. When the card is pressed or clicked then the title is set to bold and the border goes darker. The card also shakes when clicked, this shows that it works with the AnimationBehaviours from XamarinCommunityToolkit. It also shows that it works with nested TapGestureRecognizer, XF native button and nested StateButton -

License