之前一直做WPF现在开始接触Slilverlight感触很多。
今天做一个Button要求
有两个图片，button默认有一个图片，鼠标over时用另一个图片，
用wpf做的时候写一个template很简单，但silverlight和wpf写起来不一样
记录一下。大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed
写的是一个自定义控件，代码和皮肤分离，很简单的一个demo
代码下载：ImageButtonTest.rar
先写一个继承自button的imagebutton类
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Documents; 8 using System.Windows.Input; 9 using System.Windows.Media; 10 using System.Windows.Media.Animation; 11 using System.Windows.Shapes; 12 13 namespace ImageButtonTest 14 { 15 /// <summary> 16 /// build by lp 17 /// </summary> 18 public class MyImageButton : Button 19 { 20 21 public static readonly DependencyProperty ImageNormalProperty = 22 DependencyProperty.Register("ImageNormal", 23 typeof(ImageSource), 24 typeof(MyImageButton), 25 new PropertyMetadata(null)); 26 27 public static readonly DependencyProperty ImageHoverProperty = 28 DependencyProperty.Register("ImageHover", 29 typeof(ImageSource), 30 typeof(MyImageButton), 31 new PropertyMetadata(null)); 32 //鼠标移到上面 33 public ImageSource ImageHover 34 { 35 get { return (ImageSource)GetValue(ImageHoverProperty); } 36 set { SetValue(ImageHoverProperty, value); } 37 } 38 //默认图片 39 public ImageSource ImageNormal 40 { 41 get { return (ImageSource)GetValue(ImageNormalProperty); } 42 set { SetValue(ImageNormalProperty, value); } 43 } 44 45 public MyImageButton() 46 { 47 this.DefaultStyleKey = typeof(MyImageButton); 48 } 49 } 50 }
一个是鼠标移到上面的imageSource一个是默认的source
看一下它的样式 用sotryboard控制
鼠标MouseOver的时候一个Visible一个Collapsed
1 <ResourceDictionary 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:local="clr-namespace:ImageButtonTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> 5 6 7 <Style TargetType="local:MyImageButton"> 8 <Setter Property="Template"> 9 <Setter.Value> 10 <ControlTemplate TargetType="local:MyImageButton"> 11 <Grid Background="{TemplateBinding Background}"> 12 <VisualStateManager.VisualStateGroups> 13 <VisualStateGroup x:Name="CommonStates"> 14 15 <VisualState x:Name="Normal"/> 16 <VisualState x:Name="MouseOver"> 17 <Storyboard> 18 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage"> 19 <DiscreteObjectKeyFrame KeyTime="0"> 20 <DiscreteObjectKeyFrame.Value> 21 <Visibility>Visible</Visibility> 22 </DiscreteObjectKeyFrame.Value> 23 </DiscreteObjectKeyFrame> 24 </ObjectAnimationUsingKeyFrames> 25 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage"> 26 <DiscreteObjectKeyFrame KeyTime="0"> 27 <DiscreteObjectKeyFrame.Value> 28 <Visibility>Collapsed</Visibility> 29 </DiscreteObjectKeyFrame.Value> 30 </DiscreteObjectKeyFrame> 31 </ObjectAnimationUsingKeyFrames> 32 </Storyboard> 33 </VisualState> 34 <VisualState x:Name="Pressed"/> 35 <VisualState x:Name="Disabled"/> 36 </VisualStateGroup> 37 </VisualStateManager.VisualStateGroups> 38 <Image x:Name="normalImage" Source="{TemplateBinding ImageNormal}" Stretch="Fill"/> 39 <Image x:Name="mouseOverImage" Source="{TemplateBinding ImageHover}" Stretch="Fill" Visibility="Collapsed"/> 40 </Grid> 41 </ControlTemplate> 42 </Setter.Value> 43 </Setter> 44 </Style> 45 </ResourceDictionary>
这样就可以用了
我们在页面上调用一下
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ImageButtonTest" x:Class="ImageButtonTest.MainPage" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <local:MyImageButton Margin="0" ImageHover="Images/全屏鼠标移上.png" ImageNormal="Images/全屏.png" Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center"> </local:MyImageButton> </Grid> </UserControl>
