How to change Button's Image when mouse is over in XAML? - wpf

Question

I have a button contained two ellipse (Outer ellipse and Inner
ellipse) and center of these ellipes is an image i want to make this
button like rounded button,and i want to change image when mouse in
over the button and below is my xaml code I'm new in WPF and XAML and
i know it's not perfect way but any tips can help me to improve my
knowledge
<Style x:Key ="roundButton" TargetType ="{x:Type Button}">
<Setter Property ="Foreground" Value ="Black"/>
<Setter Property ="FontWeight" Value ="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<ImageBrush ImageSource="/Images/505050.png"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property ="Template">
<Setter.Value>
<ControlTemplate TargetType ="{x:Type Button}">
<Grid>
<Ellipse Name ="OuterRing" Width ="30" Height ="30" Fill ="Black"/>
<Ellipse Name ="InnerRing" Width ="27" Height ="27" Fill ="WhiteSmoke"/>
<Image Name="im"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property ="IsMouseOver" Value ="True">
<Setter TargetName ="OuterRing" Property ="Fill" Value ="black"/>
<Setter TargetName ="InnerRing" Property ="Fill" Value ="black"/>
</Trigger>
<Trigger Property ="IsPressed" Value ="True">
<Setter TargetName ="OuterRing" Property ="Height" Value ="33"/>
<Setter TargetName ="OuterRing" Property ="Width" Value ="33"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It's not working,when mouse is over only ellipses color and size
changed but image stay as it beside even if it's work it's not really
useful because i want to use this style on many button so in previous
code i already gave it image source so it's not helpful, below is my
Design XAML code
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="WhiteSmoke" Margin="10,10,10,0" CornerRadius="5">
<StackPanel Orientation="Horizontal">
<Button x:Name="btnDataBase" Margin="20,0,0,0" Style="{DynamicResource roundButton}">
<Image Source="/Images/5050.png" Width="20" Height="20"/>
</Button>
</StackPanel>
</Border>
</Grid>
As i said I'm new in XAML and WPF and all above codes got from many
searching on google so i don't know what's the better way to do this
button,help me please
this image for the rounded button when mouse is not over
and this image for the rounded button when mouse is over

Answer 1

A simple Style Trigger to change the Image source when the IsMouseOver property is true should work. Try something like this:
<Button Style="{DynamicResource roundButton}">
<Image Style="{StaticResource btnImageStyle}" Width="20" Height="20"/>
</Button>
<Style TargetType="{x:Type Image}" x:Key="btnImageStyle">
<Setter Property="Source" Value="Image1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Source" Value="Image2"/>
</Trigger>
</Style.Triggers>
</Style>