How to customize PointHover visualize in SfButton

Hi,

I have some button with background is BLACK. How can I customize background, text color of the SFbutton when the point hover.

Thanks and regards,

TH


3 Replies 1 reply marked as answer

KP Kamalesh Periyasamy Syncfusion Team March 21, 2024 02:18 PM UTC

Hi Thanh Hai Dang,

 

We have validated the reported query at our end and to achieve your requirement in SfButton control, we recommend utilizing VisualStateManager for the Button's Hovered state at the sample level, as demonstrated in the provided code snippet, to attain your desired functionality. When customizing the VSM at the sample level, ensure to configure the Normal, Disabled, Hovered and Pressed states according to your requirements. We have also created the sample based on this approach and attached the sample for your convenience. Please review the attached file and let us know if you have any concerns. If you need further assistance or clarification, please don't hesitate to reach out. We are here to help!

 

For more information, please refer the UG documentation link: VisualStateManager for SfButton

 

Code snippet:

<VisualStateGroup x:Name="CommonStates">

    <VisualState x:Name="Normal">

        <VisualState.Setters>

            <Setter Property="Background" Value="Black"/>

            <Setter Property="TextColor" Value="Blue"/>

        </VisualState.Setters>

    </VisualState>

    <VisualState x:Name="Hovered">

        <VisualState.Setters>

            <Setter Property="Background" Value="Blue"/>

            <Setter Property="TextColor" Value="White"/>

        </VisualState.Setters>

    </VisualState>

</VisualStateGroup>

 

Regards,

Kamalesh P


Attachment: ButtonSample_3093ebf5.zip

Marked as answer

TH Thanh Hai Dang March 25, 2024 07:15 AM UTC

Hi  Kamalesh ,

Thanks for your suggestion. It's worked properly with me



PR Preethi Rajakandham Syncfusion Team March 26, 2024 06:37 AM UTC

Hi Thanh Hai Dang,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.

Regards,

Preethi R


Loader.
Up arrow icon