How to change Xamarin.Forms button style using its visual states?
This article example How to show different styles in the Xamarin.Forms button when state changed
Let’s have a use case to keep default styles
with having different background color which is varying based on its visual states if
then Xamarin.Forms
SfButton allows
to do that with the help of BaseResourceKey in
Style as per in below code
snippet.
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseButtonStyle" TargetType="buttons:SfButton">
<Setter Property="FontSize" Value="15" />
<Setter Property="CornerRadius" Value="30" />
<Setter Property="FontAttributes" Value="Italic" />
<Setter Property="HorizontalTextAlignment" Value="End" />
</Style>
<Style x:Key="normalButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
<Setter Property="TextColor" Value="Red" />
<Setter Property="BackgroundColor" Value="Cyan" />
</Style>
<Style x:Key="disabledButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
<Setter Property="TextColor" Value="Yellow" />
<Setter Property="BackgroundColor" Value="LightBlue" />
</Style>
<Style x:Key="pressedButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
<Setter Property="TextColor" Value="Green" />
<Setter Property="BackgroundColor" Value="Yellow" />
</Style>
<Style x:Key="mouseOverButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
<Setter Property="TextColor" Value="Blue" />
<Setter Property="BackgroundColor" Value="Pink" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<buttons:SfButton Text="Button">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Style" Value="{StaticResource disabledButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Style" Value="{StaticResource normalButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="MouseOver">
<VisualState.Setters>
<Setter Property="Style" Value="{StaticResource mouseOverButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Style" Value="{StaticResource pressedButtonStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</buttons:SfButton>
</StackLayout>
Screenshot:
Normal State:
Pressed State:
Disabled State:
Mouse Over State: [UWP alone]
See Also,
What are the available visual states in Xamarin.Forms Button?
How to customize the
Xamarin.Forms Button?
Conclusion
I hope you enjoyed learning about how to change Xamarin.Forms button style using its visual states.
You can refer to our Xamarin.Forms Button feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
