WPF ImageButton升级版

Style

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageButtonTest01.Control">

<SolidColorBrush x:Key="ImageButton.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="ImageButton.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="ImageButton.Static.Foreground" Color="#FF808080"/>
<SolidColorBrush x:Key="ImageButton.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="ImageButton.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="ImageButton.MouseOver.Foreground" Color="#FFaaaaaa"/>
<SolidColorBrush x:Key="ImageButton.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="ImageButton.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="ImageButton.Pressed.Foreground" Color="#FF222222"/>
<SolidColorBrush x:Key="ImageButton.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="ImageButton.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="ImageButton.Disabled.Foreground" Color="#FF838383"/>

<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type local:ImageButton}">
<Border x:Name="border" Margin="0"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
UseLayoutRounding="True"
CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource Mode=TemplatedParent}}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{Binding ContentMargin, RelativeSource={RelativeSource TemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Image x:Name="image" Grid.Row="0" Grid.Column="0" Focusable="False"
Margin="{Binding BorderThickness, ElementName=BD_PART}"
Source="{Binding NormalImage, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>

<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="LeftToRight">
<Setter TargetName="contentPresenter" Property="Margin" Value="{Binding TextLeftMargin, RelativeSource={RelativeSource TemplatedParent}}"/>
</DataTrigger>

<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="LeftToRight"/>
<Condition Binding="{Binding Path=Content, RelativeSource={RelativeSource Mode=Self}}" Value="{x:Null}"/>
</MultiDataTrigger.Conditions>

<Setter TargetName="contentPresenter" Property="Margin" Value="0"/>
</MultiDataTrigger>

<DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="OutSideToInSide">
<Setter TargetName="contentPresenter" Property="Grid.Column" Value="0"/>
</DataTrigger>

<DataTrigger Binding="{Binding Path=LayoutModel, RelativeSource={RelativeSource Mode=Self}}" Value="TopToBottom">
<Setter TargetName="image" Property="Grid.Row" Value="0"/>
<Setter TargetName="contentPresenter" Property="Grid.Column" Value="0"/>
<Setter TargetName="contentPresenter" Property="Grid.Row" Value="1"/>
</DataTrigger>

<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="image" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.MouseOver.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.MouseOver.Border}"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.MouseOver.Foreground}"/>
</Trigger>

<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
<Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
</MultiDataTrigger.Conditions>

<Setter TargetName="image" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="Transparent"/>
<Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.MouseOver.Foreground}"/>
</MultiDataTrigger>

<Trigger Property="IsPressed" Value="true">
<Setter TargetName="image" Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.Pressed.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.Pressed.Border}"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Pressed.Foreground}"/>
</Trigger>

<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsPressed, RelativeSource={RelativeSource Mode=Self}}" Value="true"/>
<Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
</MultiDataTrigger.Conditions>

<Setter TargetName="image" Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="Transparent"/>
<Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Pressed.Foreground}"/>
</MultiDataTrigger>

<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="image" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="{StaticResource ImageButton.Disabled.Background}"/>
<Setter TargetName="border" Property="BorderBrush" Value="{StaticResource ImageButton.Disabled.Border}"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Disabled.Foreground}"/>
</Trigger>

<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=Self}}" Value="false"/>
<Condition Binding="{Binding Path=Background, RelativeSource={RelativeSource Mode=Self}}" Value="Transparent"/>
</MultiDataTrigger.Conditions>

<Setter TargetName="image" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="border" Property="Background" Value="Transparent"/>
<Setter TargetName="border" Property="BorderBrush" Value="Transparent"/>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource ImageButton.Disabled.Foreground}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

<Style TargetType="{x:Type local:ImageButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource ImageButton.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ImageButton.Static.Border}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
</Style>

<Style x:Key="ImageButtonTransparent" TargetType="{x:Type local:ImageButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="TextLeftMargin" Value="0"/>
<Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
</Style>
</ResourceDictionary>


CS

public class ImageButton : Button
{
private const double CONTENT_MARGIN = 2.0;

static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}

public ImageButton()
{

}

#region Properties

public static readonly DependencyProperty NormalImageProperty =
DependencyProperty.Register("NormalImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public ImageSource NormalImage
{
get { return (ImageSource)GetValue(NormalImageProperty); }
set { SetValue(NormalImageProperty, value); }
}

public static readonly DependencyProperty HoverImageProperty =
DependencyProperty.Register("HoverImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public ImageSource HoverImage
{
get { return (ImageSource)GetValue(HoverImageProperty); }
set { SetValue(HoverImageProperty, value); }
}

public static readonly DependencyProperty PressedImageProperty =
DependencyProperty.Register("PressedImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public ImageSource PressedImage
{
get { return (ImageSource)GetValue(PressedImageProperty); }
set { SetValue(PressedImageProperty, value); }
}

public static readonly DependencyProperty DisabledImageProperty =
DependencyProperty.Register("DisabledImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public ImageSource DisabledImage
{
get { return (ImageSource)GetValue(DisabledImageProperty); }
set { SetValue(DisabledImageProperty, value); }
}

public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton),
new PropertyMetadata(new CornerRadius(0,0,0,0), OnCornerRadiusChanged));
public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set {
SetValue(CornerRadiusProperty, value);
}
}

private static void OnCornerRadiusChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ImageButton thisButton = d as ImageButton;

CornerRadius cornerRadius = new CornerRadius();
cornerRadius = (CornerRadius)e.NewValue;

if (LayoutModel.LeftToRight == thisButton.LayoutModel)
{
d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 2.0, CONTENT_MARGIN, cornerRadius.TopLeft / 2.0, CONTENT_MARGIN));
}
else if (LayoutModel.TopToBottom == thisButton.LayoutModel)
{
d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 3.0, CONTENT_MARGIN, cornerRadius.TopLeft / 3.0, CONTENT_MARGIN));
}
else if (LayoutModel.OutSideToInSide == thisButton.LayoutModel)
{
d.SetValue(ContentMarginProperty, new Thickness(cornerRadius.TopLeft / 3.0));
}
else
{
// Nothing to do
}
}

public static readonly DependencyProperty LayoutModelProperty = DependencyProperty.Register("LayoutModel", typeof(LayoutModel), typeof(ImageButton),
new PropertyMetadata(LayoutModel.LeftToRight));
public LayoutModel LayoutModel
{
get { return (LayoutModel)GetValue(LayoutModelProperty); }
set { SetValue(LayoutModelProperty, value); }
}

public static readonly DependencyProperty ContentMarginProperty = DependencyProperty.Register("ContentMargin", typeof(Thickness), typeof(ImageButton),                                                                                           new PropertyMetadata(new Thickness(2,2,2,2)));
Thickness contentMargin = new Thickness(0, 0, 0, 0);
public Thickness ContentMargin
{
get { return (Thickness)GetValue(ContentMarginProperty); }
set { SetValue(ContentMarginProperty, value); }
}

public static readonly DependencyProperty TextLeftMarginProperty = DependencyProperty.Register("TextLeftMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(3, 0, 3, 0)));
public Thickness TextLeftMargin
{
get { return (Thickness)GetValue(TextLeftMarginProperty); }
set { SetValue(TextLeftMarginProperty, value); }
}

#endregion
}

public enum LayoutModel
{
LeftToRight,
TopToBottom,
OutSideToInSide
}

使用：

<StackPanel Orientation="Vertical" Margin="0, 40,0,0">
<control:ImageButton Content="Image Button" FontSize="20" IsEnabled="False"/>

<control:ImageButton Content="Image Button" FontSize="20" CornerRadius="10" Margin="5"
Height="60" Width="200"
LayoutModel="OutSideToInSide"
NormalImage="Resources/Images/MS.png"
HoverImage="Resources/Images/MS.png"
PressedImage="Resources/Images/MS.png"
DisabledImage="Resources/Images/MS.png"
Click="ImageButton_Click"/>
<control:ImageButton Margin="5" Content="Image Button"
Height="60" Width="150"
LayoutModel="LeftToRight"
NormalImage="Resources/Images/MS.png"
HoverImage="Resources/Images/MS.png"
PressedImage="Resources/Images/MS.png"
DisabledImage="Resources/Images/MS.png"/>
<control:ImageButton Margin="5" Content="Image Button"
Height="60" Width="150"
LayoutModel="TopToBottom"
NormalImage="Resources/Images/MS.png"
HoverImage="Resources/Images/MS.png"
PressedImage="Resources/Images/MS.png"
DisabledImage="Resources/Images/MS.png"/>
<control:ImageButton Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
NormalImage="Resources/Images/MS.png"
HoverImage="Resources/Images/MS.png"
PressedImage="Resources/Images/MS.png"
DisabledImage="Resources/Images/MS.png"/>
<control:ImageButton Margin="5"
FontFamily="/ImageButtonTest01;component/Resources/#iconfont"
Content="" FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource ImageButtonTransparent}"/>
<Button x:Name="tbnDefaultButton" Height="60" Width="120"
Content="Default Button" Click="tbnDefaultButton_Click"/>
</StackPanel>

效果