| :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

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 <br/> <br/> 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 <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 app | Complex example | |------|------| || <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> |

License