wpf之自定义模板-鼠标滑过改变背景图片和字体样式

在项目中遇到一个需求：一个下拉菜单，其结构为一张图片加一个文字描述，鼠标移过时需要改变图片，且改变文字的样式。

这样一个需求在平时项目中经常会遇到，这里记录一下，供大家参考。具体效果如下：

鼠标滑过后效果：

拿到这样一个需求，首先想想有没有现成的控件能满足其要求，很显然没有现成的。所以这里只能考虑自定义模板。

我们可以尝试自定义button的模板，将其结构改为一张图片+一个textblock，然后为其添加trigger方法，当mouseover的时候触发，改变图片sources和文字的颜色。OK就这样开始吧。

这里就直接上代码了：

<UserControl.Resources>
<Style x:Key="OkSty" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20" />
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Name="ImgBtnBg3" Grid.Row="0" Grid.Column="0" Style="{StaticResource feedImageStyle}"  Source="../Images/advise.png" Width="16" Stretch="Uniform"/>
                            <Label Name="label3" Grid.Row="0" Grid.Column="1"  Content="反馈建议" FontSize="12" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Source" Value="../Images/advise_pre.png" TargetName="ImgBtnBg3"/>
                                <Setter Property="Foreground"  Value="White" TargetName="label3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

然后在使用的地方引入样式：

<Button Name="btnSave" Grid.Row="0" Style="{StaticResource OkSty}" Click="btnSave_Click"/>