WPF 自定义 ImageButton

控件源码：

public class ImageButton : Button
{
public ImageButton() {
}

public string NoramlImgPath
{
get { return (string)GetValue(NoramlImgPathProperty); }
set { SetValue(NoramlImgPathProperty, value); }
}

public string HoverImgPath
{
get { return (string)GetValue(HoverImgPathProperty); }
set { SetValue(HoverImgPathProperty, value); }
}

public string DisableImgPath
{
get { return (string)GetValue(DisableImgPathProperty); }
set { SetValue(DisableImgPathProperty, value); }
}

public static readonly DependencyProperty NoramlImgPathProperty =
DependencyProperty.Register(
"NoramlImgPath",
typeof(string),
typeof(ImageButton),
new PropertyMetadata(""));

public static readonly DependencyProperty HoverImgPathProperty =
DependencyProperty.Register(
"HoverImgPath",
typeof(string),
typeof(ImageButton),
new PropertyMetadata(""));

public static readonly DependencyProperty DisableImgPathProperty =
DependencyProperty.Register(
"DisableImgPath",
typeof(string),
typeof(ImageButton),
new PropertyMetadata(""));
}

Style:资源文件里需要引用控件Namespace

xmlns:local="clr-namespace:Shared.Controls;assembly=Shared"
<SolidColorBrush x:Key="MouseOverBorderBrush" Color="#2D2F3D" />
<SolidColorBrush x:Key="buttonDisableBackground" Color="#222732"/>

<Style x:Key="imageButtonStyle" TargetType="local:ImageButton">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate  TargetType="{x:Type local:ImageButton}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"    SnapsToDevicePixels="True">
<Rectangle x:Name="bgrect" Margin="2">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding NoramlImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" />
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#000000"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MouseOverBorderBrush}"/>
<Setter Property="BorderThickness" TargetName="border" Value="1"/>
<Setter Property="Margin" TargetName="border" Value="-1"/>
<Setter TargetName="bgrect" Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="{Binding HoverImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#000000"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MouseOverBorderBrush}"/>
<Setter Property="BorderThickness" TargetName="border" Value="1"/>
<Setter Property="Margin" TargetName="border" Value="1 1 -1 -1"/>
<Setter TargetName="bgrect" Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="{Binding HoverImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="{StaticResource buttonDisableBackground}"/>
<Setter TargetName="bgrect" Property="Fill">
<Setter.Value>
<ImageBrush ImageSource="{Binding DisableImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

使用：

xmlns:shared="clr-namespace:Shared.Controls;assembly=Shared"

<shared:ImageButton   Width="24"  Height="24"  Margin="0 5" Command="{Binding SaveImageCommand}"
NoramlImgPath="../Images/export_image.png"
HoverImgPath="../Images/export_image_hover.png"
Style="{StaticResource imageButtonStyle}" ></shared:ImageButton>

显示：

政常： 鼠标放上： 点击: