Visual States in Xamarin Button (SfButton)

10 Jul 20233 minutes to read

The button visual can be customized through VisualStates. The SfButton control have the following four visual states:

  • Normal
  • Pressed
  • Checked
  • Unchecked
  • Disabled


  • In addition, MouseOver VisualState is available only in the UWP platform.
  • The visual states Checked and Unchecked are only updated when enabling the IsChecked property in SfButton.
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <buttons:SfButton x:Name="SfButton" WidthRequest="100" Text="Button">
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                        <Setter Property="TextColor" Value="White" />

                <VisualState x:Name="Pressed">
                        <Setter Property="TextColor" Value="Black" />
StackLayout stackLayout = new StackLayout
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
SfButton button = new SfButton
    Text = "Button",
    WidthRequest = 100

VisualStateGroupList visualStateGroupList = new VisualStateGroupList();

VisualStateGroup commonStateGroup = new VisualStateGroup();
VisualState normalState = new VisualState
    Name = "Normal"
normalState.Setters.Add(new Setter { Property = SfButton.TextColorProperty, Value = Color.White });

VisualState pressedState = new VisualState
    Name = "Pressed"
pressedState.Setters.Add(new Setter { Property = SfButton.TextColorProperty, Value = Color.Black });


VisualStateManager.SetVisualStateGroups(button, visualStateGroupList);

this.Content = stackLayout;

Pressed visual state:
SfButton with visual state

Normal visual state:
SfButton with visual state

See also

How to change Xamarin.Forms button style using its visual states