如何在 XAML 鼠标悬停时更改 Button 的图像？

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

当 IsMouseOver 属性为真时更改图像源的简单样式触发器应该可以工作。尝试这样的事情：

<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>

如何在 XAML 鼠标悬停时更改 Button 的图像？

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

wpf

xaml

visual-studio-2012