用Silverlight开发ImageButton控件

由于项目需要用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>

 

转载于:https://www.cnblogs.com/lyf681888/p/3638177.html