由于项目需要用Silverlight开发一个ImageButton控件，效果如下图所示：
如上图所示：ImageButton分为正常、鼠标划过、单击、不可用等四个状态。
ImageButton由ImageButton.cs和Generic.xaml组成，如下图所示：
以下是ImageButton.cs文件的代码：
public
class
ImageButton : Button
{
public ImageButton()
{
this.DefaultStyleKey = typeof(ImageButton);
}
public
static
readonly
DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(ImageButton), null);
///
<summary>
///
获取或设置标题
///
</summary>
public
string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public
static
readonly
DependencyProperty TitleIconProperty =
DependencyProperty.Register("TitleIcon", typeof(BitmapImage), typeof(ImageButton), null);
///
<summary>
///
获取或设置标题图标
///
</summary>
public
BitmapImage TitleIcon
{
get { return (BitmapImage)GetValue(TitleIconProperty); }
set { SetValue(TitleIconProperty, value); }
}
}
以下是Generic.xaml文件的代码：
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:local="clr-namespace:ImgBtnTest"
>
<Style TargetType="local:ImageButton">
<Setter Property="Background" Value="#359CE7"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#359CE7"/>
<Setter Property="FontFamily" Value="Arial,SimSun"></Setter>
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ImageButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF69C7ED"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFA0DCF6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFB9E6FD"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#142EEF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF359CE7"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FF69C7ED"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFA0DCF6"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#FFB9E6FD"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="BackgroundBorder" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Grid>
<Rectangle x:Name="BackgroundGradient">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,1" StartPoint="0.7,0.2">
<GradientStop Color="#359CE7" Offset="0"/>
<GradientStop Color="#359CE7" Offset="0.33"/>
<GradientStop Color="#359CE7" Offset="0.66"/>
<GradientStop Color="#359CE7" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{TemplateBinding TitleIcon}"
Grid.Row="0" Margin="2,2,2,0" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="None"/>
<TextBlock Text="{TemplateBinding Title}" Grid.Row="1" Margin="5,5,5,2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
<Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF"/>
<Rectangle Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" RadiusX="2" RadiusY="2" Stroke="Transparent" StrokeThickness="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
以下是使用控件的代码：
<UserControl
xmlns:local="clr-namespace:ImgBtnTest" x:Class="ImgBtnTest.MainPage"
<Grid x:Name="LayoutRoot" Background="White">
<local:ImageButton x:Name="imgBtn1"
Width="80" Height="70"
Title="提交" TitleIcon="/ImgBtnTest;component/Images/提交.png" HorizontalAlignment="Left" Margin="71,82,0,0" VerticalAlignment="Top" Click="ImageButton_Click"/>
</Grid>
</UserControl>
