WPF里實現imageButton的步驟

1、建立一個新的類庫並寫一個類：ImageButton，代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace My.Controls
{
    public class TextButton:Button
    {
        #region 屬性
        /// <summary>
        /// 當鼠標移到按鈕上時，按鈕的前景色
        /// </summary>
        public Brush MouserOverForeground
        {
            get { return (Brush)GetValue(MouserOverForegroundProperty); }
            set { SetValue(MouserOverForegroundProperty, value); }
        }

        /// <summary>
        /// 鼠標移到按鈕上時，按鈕的背景色
        /// </summary>
        public Brush MouseOverBackground
        {
            get { return (Brush)GetValue(MouseOverBackgroundProperty); }
            set { SetValue(MouseOverBackgroundProperty, value); }
        }

        /// <summary>
        /// 當鼠標按下時，按鈕的前景色
        /// </summary>
        public Brush MousedownForeground
        {
            get { return (Brush)GetValue(MousedownForegroundProperty); }
            set { SetValue(MousedownForegroundProperty, value); }
        }

        /// <summary>
        /// 當鼠標按下時，按鈕的背景色
        /// </summary>
        public Brush MousedownBackground
        {
            get { return (Brush)GetValue(MousedownBackgroundProperty); }
            set { SetValue(MousedownBackgroundProperty, value); }
        }

        /// <summary>
        /// 當按鈕不可用時，按鈕的前景色
        /// </summary>
        public Brush DisabledForeground
        {
            get { return (Brush)GetValue(DisabledForegroundProperty); }
            set { SetValue(DisabledForegroundProperty, value); }
        }

        /// <summary>
        /// 當按鈕不可用時，按鈕的背景色
        /// </summary>
        public Brush DisabledBackground
        {
            get { return (Brush)GetValue(DisabledBackgroundProperty); }
            set { SetValue(DisabledBackgroundProperty, value); }
        }
        #endregion

        #region 依賴屬性
        /// <summary>
        /// 當鼠標移到按鈕上時，按鈕的前景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty MouserOverForegroundProperty =
            DependencyProperty.Register("MouserOverForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));

        /// <summary>
        /// 鼠標移到按鈕上時，按鈕的背景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty MouseOverBackgroundProperty =
            DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));

        /// <summary>
        /// 當鼠標按下時，按鈕的前景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty MousedownForegroundProperty =
            DependencyProperty.Register("MousedownForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));

        /// <summary>
        /// 當鼠標按下時，按鈕的背景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty MousedownBackgroundProperty =
            DependencyProperty.Register("MousedownBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));

        /// <summary>
        /// 當按鈕不可用時，按鈕的前景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty DisabledForegroundProperty =
            DependencyProperty.Register(" DisabledForeground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.Black));

        /// <summary>
        /// 當按鈕不可用時，按鈕的背景色（這是依賴屬性）
        /// </summary>
        public static readonly DependencyProperty DisabledBackgroundProperty =
            DependencyProperty.Register("DisabledBackground", typeof(Brush), typeof(TextButton), new PropertyMetadata(Brushes.White));
        #endregion

        #region 構造函數
        public TextButton():base()
        {
            //獲取資源文件信息
            ResourceDictionary rd = new ResourceDictionary();
            rd.Source = new Uri("/Zmy.Wpf.Controls;component/Style.xaml", UriKind.Relative);
            this.Resources.MergedDictionaries.Add(rd);
            //設置樣式
            this.Style = this.FindResource("TextButtonStyle") as Style;
        }
        #endregion
    }
}

2、加一個樣式文件 Style.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:My.Controls">
    <Style x:Key="TextButtonStyle" TargetType="{x:Type local:TextButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:TextButton}">
                    <Border x:Name="buttonBorder"
                            Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Foreground}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouserOverForeground}"/>
                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MouseOverBackground}"/>
            </Trigger>

            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownForeground}"/>
                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=MousedownBackground}"/>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledForeground}"/>
                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=DisabledBackground}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="ImageButtonStyle" TargetType="{x:Type local:ImageButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageButton}">
                    <Border x:Name="buttonBorder">
                        <Border.Background>
                            <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalBackgroundImage}"/>
                        </Border.Background>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="buttonBorder">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseoverBackgroundImage}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="buttonBorder">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousedownBackgroundImage}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="buttonBorder">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledBackgroundImage}"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3、在使用的form里先添加引用，如下：

<UserControl x:Class="Main.UserControls.EvidencePackageList_Error"
             x:Name="EvidencePackageList"
             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:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
             xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
             xmlns:controls="clr-namespace:My.Controls;assembly=My.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" Loaded="UserControl_Loaded">

4、使用方式如下：

<controls:ImageButton Height="20" Width="20" Cursor="Hand" Command="{Binding ElementName=EvidencePackageList,Path=ShowErrorDetailWithButton}" CommandParameter="{Binding ElementName=EvidencePackageList, Path=SelectRowInfo }" NormalBackgroundImage="pack://application:,,,/DataResource;component/Images/Warring.png" MouseoverBackgroundImage="pack://application:,,,/DataResource;component/Images/Warring.png"/>

5、效果如下：