| 📝 | This is a MAUI version of my Xamarin NuGet |
|---|
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 -
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();| 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. |
| 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 |
| 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 |
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
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.Descriptionproperty 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.Hintproperty. 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'
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#)