Home

Awesome

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

Xamarin.Forms.StateButton Nuget Nuget

License: MIT FOSSA Status

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

PropertyWhat it doesExtra info
StateThis changes based on the button state. i.e. Pressed, NotPressedDefault state is NotPressed <br/> <br/> The binding mode is OneWayToSource so it can only be controlled via this control.

Events

EventWhat it does
ClickedTriggerd when the button is pressed and released
PressedTriggerd when the button is pressed
ReleasedTriggerd when the button is released

Commands

CommandWhat it does
ClickedCommandTriggerd when the button is pressed and released
PressedCommandTriggerd when the button is pressed
ReleasedCommandTriggerd when the button is released

How to style the button for different states

There are 2 ways to style the button -

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 <strong>NOT RECOMENDED</strong> due to a bug in Xamarin.forms that causes a NullReferenceException when TargetName property is used, heres a link to the bug - https://github.com/xamarin/Xamarin.Forms/issues/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 appComplex example
Production example of control<p>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.</p> <p> The card also shakes when clicked, this shows that it works with the AnimationBehaviours from XamarinCommunityToolkit. </p><p> It also shows that it works with nested TapGestureRecognizer, XF native button and nested StateButton - </p> Complex example of control

License

FOSSA Status