Articles in this section
Category / Section

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

4 mins read

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:

 

Normal state of Xamarin.Forms Button

 

Pressed State:

 

Pressed state of Xamarin.Forms Button

 

Disabled State:

 

Disabled state of Xamarin.Forms Button

 

Mouse Over State: [UWP alone]

 

Mouse over state of Xamarin.Forms Button

 

 

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied