how do i change the icon color by hovering or clicking a button?

You can accomplish this with a custom Button Style and a Foreground binding on your icon. Here is an example using a Rectangle as a stand-in for the icon.

The custom style changes the Foreground brush on IsMouseOver and IsPressed.

The custom style also has a stripped down control template since you don’t need to see the button’s visual states.

The icon has a binding to the Foreground property of its parent Button.

Button Style

<Style x:Key="IconButtonStyle" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Height" Value="18" />
    <Setter Property="Width" Value="18" />
    <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type Button}">
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter />
            Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}"
            <Setter Property="Foreground" Value="Green" />
            Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsPressed}"
            <Setter Property="Foreground" Value="Red" />

Button with Icon (using a Rectangle as a stand-in)

<Button Style="{StaticResource IconButtonStyle}">
        Fill="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}}, Path=Foreground}"
        StrokeThickness="0" />

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top