C# WPF – How to make Button Hover Effect in XAML Code

MiniBytes: In this article we are going to see, how to create button hover effect in C# WPF Application. This tutorial will be helpful for you to create hover effect in WPF buttons with the help of XAML code, which you can use in your C# WPF application. What i am narrating here is the code which was taken from the live projects which i am currently working on.

Microsoft didn’t give us any ready made code for generating the button hover effect while generating WPF application using XAML code. In this article i am going to give the style code for generating the button hover effect.

The style code goes as below:

<Style x:Key="buttonHover" TargetType="Button">
            <Setter Property="Background" Value="#FF1C7BCA"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#FF5397D1" CornerRadius="3">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsPressed" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Transparent" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF5397D1"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Advantage of using this code will give you a transparent border that will be displayed while there is no cursor or keyboard hover over the button. If you place your mouse cursor then it will give you a pressed effect.

You can change the above code as you want that suits your color and transparency.

You can use the above code into a button using the below format in XAML code.

<Button x:Name="btnSubmit" Style="{StaticResource buttonHover}" Content="Submit" />

If you have any doubts you can leave a comment, i would be very delightful to help you. :-)…

 

You may also like...

1 Response

  1. fong says:

    can you give me wpf code for carview which was in android
    Thanks in advance…

Leave a Reply

Your email address will not be published. Required fields are marked *