Awesome
:memo: | This is a MAUI version of my Xamarin NuGet |
---|
Maui.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.
It's also 100% accessible with each platform seeing/ treating the control as a native button.
Check out the examples, for a bunch of different designs -
How to use it?
Install the NuGet package into your shared project project
Install-Package IeuanWalker.Maui.StateButton
Then in the MauiProgram.cs, and the StateButton configuration method -
using IeuanWalker.Maui.StateButton;
builder
.UseMauiApp<App>()
.UseStateButton();
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. Not triggered when using screenreader or keyboard navigation |
Released | Triggerd when the button is released. Not triggered when using screenreader or keyboard navigation |
Commands
Command | What it does |
---|---|
ClickedCommand | Triggerd when the button is pressed and released |
PressedCommand | Triggerd when the button is pressed. Not triggered when using screenreader or keyboard navigation |
ReleasedCommand | Triggerd when the button is released. Not triggered when using screenreader or keyboard navigation |
How to style the button for different states
Simply add a Trigger to any element and bind it to the State
property of the button -
<stateButton:StateButton Padding="20,10" BackgroundColor="Red">
<stateButton:StateButton.StrokeShape>
<RoundRectangle CornerRadius="10" />
</stateButton:StateButton.StrokeShape>
<stateButton:StateButton.Triggers>
<Trigger TargetType="stateButton:StateButton" Property="State" Value="Pressed">
<Setter Property="BackgroundColor" Value="Green" />
</Trigger>
</stateButton:StateButton.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>
</stateButton:StateButton>
More examples can be found in the demo app - https://github.com/IeuanWalker/Maui.StateButton/tree/master/Demo/Controls/Examples
Accessibility
The control itself is seen as a native button on both platforms, so inherits the same accessbility attributes. So from a screenreader and keyboard POV it is a native button.
There are a few things you can do to improve the accessibility -
-
Set the
SemanticProperties.Description
property on the button. Android is smart enough, that if you dont set this property it will try and find a label within the control to read the text from, iOS does not do this, so if you dont set this property, iOS screenreader will just announce that there is a button, but no name or context is given. -
Optionally you can also set the
SemanticProperties.Hint
property. Using this property you can give more context to what the button is for/ will do.
For example, setting the SemanticProperties.Description
to 'Reload', and SemanticProperties.Hint
to 'Reload list of contacts'. The user using a screen reader will here something like - 'Reload button, Reload list of contacts, double tap to activate'
Recomended usage
I recommend creating a ControlTemplate
so you can easily re-use the control. You can see how i do this in the Example6
example button (xaml/ c#)