I have a WPF button as described below. The button has simple image and text. The button is transparent with no borders. When I hover over anywhere on the button I want to
Change the border and background color (working)
Change the text color (working)
Add an effect or transition to change the image color. you can see that I tried to do this with an OpacityMask but have had no luck getting this to work. Any suggestions or ideas?
<Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32"></Image>
<Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
</StackPanel>
<Button.Style>
<Style TargetType="Button">
<!-- Set default border color -->
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#535353"/>
<Style.Triggers>
<!-- Trigger for when the mouse is over the button -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#CDEAF7"/>
<Setter Property="BorderBrush" Value="#98D5ef"/>
<Setter Property="Foreground" Value="Red"/>
<!-- <Setter TargetName="MyImage" Property="OpacityMask">
<Setter.Value>
<SolidColorBrush Color="Green"/>
</Setter.Value>
</Setter> -->
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I believe the OpacityMask should be the same resource as the image and that i should then set the background color of the image. But, this is tricky because i need it to work when i hover over the button as a whole, not just over the image.
You can set this property to the name of any element within the scope of where the setter collection (the collection that this setter is part of) is applied. This is typically a named element that is within the template that contains this setter.
Look at this example:
<Button HorizontalAlignment="Center" VerticalAlignment="Top" Padding="6">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="MyImage" Source="Resources/icon-shape.png" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<!-- Trigger for when the mouse is over the button -->
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}"
Value="True">
<Setter Property="OpacityMask">
<Setter.Value>
<SolidColorBrush Color="Green"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Label Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}">Hello World</Label>
</StackPanel>
<Button.Style>
<Style TargetType="Button">
<!-- Set default border color -->
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#535353"/>
<Style.Triggers>
<!-- Trigger for when the mouse is over the button -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#CDEAF7"/>
<Setter Property="BorderBrush" Value="#98D5ef"/>
<Setter Property="Foreground" Value="Red"/>
<!--<Setter TargetName="MyImage" Property="OpacityMask">
<Setter.Value>
<SolidColorBrush Color="Green"/>
</Setter.Value>
</Setter>-->
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>