How to change background of a buttonadv when mouseover

Hello,

I have created a buttonadv mit transparent background:

<syncfusion:ButtonAdv Grid.Column="1" x:Name="ButtonBold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MouseDown="ButtonBold_MouseDown" Background="{x:Null}" BorderBrush="{x:Null}" IconHeight="32" IconWidth="32" Label="" LargeIcon="/images/font_bold_32.png" SmallIcon="/images/font_bold_32.png" BorderThickness="0,0,0,0" IsCheckable="True" IsMultiLine="False" />

When the move goes over the buttonadv I want to change background color to this:

SolidColorBrush(Color.FromArgb(50, 192, 173, 168))

Is there a sample how to do this.

Thanks and


5 Replies

MS Mahalakshmi Sugumar Syncfusion Team March 11, 2022 04:10 PM UTC

Hi Uwe Porsch,

You can change the background while hovering the mouse on ButtonAdv by overriding the ButtonAdv style. Please refer to the attached sample and code snippet below to change the background.

Code snippet:

<MultiTrigger>

             <MultiTrigger.Conditions>

<Condition Property="IsMouseOver" Value="True"/>

                        <Condition Property="syncfusion:SkinStorage.EnableTouch" Value="False"/>

</MultiTrigger.Conditions>


<!--Use this code to set the Background while hover the mouse on buttonadv-->

             <Setter Property="Background" TargetName="ItemBorder" Value="Yellow"/>

             <Setter Property="BorderBrush" TargetName="ItemBorder" Value="#FF3C7FB1"/>

<Setter Property="Foreground" TargetName="PART_NormalText" Value="Black"/>

              <Setter Property="BorderBrush" TargetName="InnerBorder">

                        <Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                            <GradientStop Color="#FFFEFFFF" Offset="0"/>

                                            <GradientStop Color="#FFD6EDFA" Offset="1"/>

</LinearGradientBrush>

                        </Setter.Value>

               </Setter>

</MultiTrigger>



If we misunderstood the query, please provide more details about the requirement, or modify our sample and revert to us.

Regards,
Mahalakshmi S


Attachment: ButtonAdvstylesample_a40ac525.zip


UP Uwe Porsch March 11, 2022 06:52 PM UTC

Thanks Mahalakshmi ,

the sample is realy good.

Is there also a way only to add the IsMouseOver event and keep the rest all like defined within the properties ?

As sample I want to set the icon height /Width and the images via the properties and only the color of the IsMouseOver about the trigger-


 Thanks and regarsd




MS Mahalakshmi Sugumar Syncfusion Team March 14, 2022 05:00 PM UTC

Hi Uwe Porsch,


We don't have support to change the ButtonAdv background using an event or API. It is only possible to achieve the requirement by overriding its style.

Please let us know if you need any other assistance. We are happy to assist you.


Regards,
Mahalakshmi S



UP Uwe Porsch March 14, 2022 05:05 PM UTC

Hi Mahalakshmi ,

Thanks for the feedback.

What I meant, was is it only possible to change the style for the ismouseover. In the sample all styles were changed.

Thanks and regards

Uwe



SM Subashini Mahendran Syncfusion Team March 15, 2022 01:12 PM UTC

Hi Uwe Porsch,

We did not have a direct API for customizing the ButtonAdv MouseOver Background as like IconHeight and IconWidth properties. Also, we can achieve this only by overriding style and changing the respective IsMouseOver condition in ControlTemplate.Triggers at the application level.


Also, in the provided sample we have only modified the color of ButtonAdv Background in IsMouseOver control template trigger condition at line 82, and the rest are default control style.


Note: We have provided a customization sample for the ButtonAdv default theme on March 11 update.


Please let us know if you need any other assistance on this.


Regards,
Subashini M.


Loader.
Up arrow icon