WFP 按钮增加图片背景，并且在按压时切换图片的记录

1、按钮控件的前台

<UserControl x:Class="JapanSubway.UserControls.LeftMenuButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:JapanSubway.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="120" Loaded="UserControl_Loaded">

    <UserControl.Resources>
        <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
            <StackPanel Orientation="Vertical">
                <Image x:Name="img" Stretch="Fill" Source="{Binding CurrentButtonImagePath}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Image>
            </StackPanel>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="img" Property="Source" Value="{Binding PressedButtonImagePath}"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid>
        <Button IsEnabled="{Binding ButtonIsEnable}" x:Name="btn" Background="Transparent" Click="Button_Click" Template="{StaticResource buttonTemplate}"  HorizontalAlignment="Center"  VerticalAlignment="Center" BorderThickness="0"></Button>
    </Grid>
</UserControl>

2、按钮控件的后台

    public partial class LeftMenuButton : UserControl
    {
        public LeftMenuButtonViewModel ViewModel { get; set; }
        public int ImageIndex { get; set; }
        public LeftMenuButton()
        {
            ViewModel = new LeftMenuButtonViewModel();
            this.DataContext = ViewModel;
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            ViewModel.CurrentButtonImagePath = "/Images/LeftMenuButtons/left_menu_1_normal.png";
            ViewModel.PressedButtonImagePath = "/Images/LeftMenuButtons/left_menu_1_pressed.png";
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ViewModel.CurrentButtonImagePath = "/Images/LeftMenuButtons/left_menu_1_selected.png";
            ViewModel.ButtonIsEnable = false;
        }
    }

3、用到的一个类

    public class LeftMenuButtonViewModel : ViewModelBase
    {
        private string currentButtonImagePath;
        private string pressedButtonImagePath;
        private bool buttonIsEnable;
        public LeftMenuButtonViewModel()
        {
            buttonIsEnable = true;
        }
        /// <summary>
        /// 正在显示的图片的路径
        /// </summary>
        public string CurrentButtonImagePath { get => currentButtonImagePath; set { currentButtonImagePath = value; RaisePropertyChanged(); } }
        /// <summary>
        /// 按压后的图片的路径
        /// </summary>
        public string PressedButtonImagePath { get => pressedButtonImagePath; set { pressedButtonImagePath = value; RaisePropertyChanged(); } }

        public bool ButtonIsEnable { get => buttonIsEnable; set { buttonIsEnable = value; RaisePropertyChanged(); } }
    }

4、补充用到的一个组件

　　MvvmLight，用于双向绑定