Silverlight button 图片切换样式

之前一直做WPF现在开始接触Slilverlight感触很多。

今天做一个Button要求

有两个图片，button默认有一个图片，鼠标over时用另一个图片，

用wpf做的时候写一个template很简单，但silverlight和wpf写起来不一样

记录一下。大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed

写的是一个自定义控件，代码和皮肤分离，很简单的一个demo

代码下载：ImageButtonTest.rar

先写一个继承自button的imagebutton类

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;

 namespace ImageButtonTest
 {
     /// <summary>
     /// build by lp
     /// </summary>
     public class MyImageButton : Button
     {

         public static readonly DependencyProperty ImageNormalProperty =
             DependencyProperty.Register("ImageNormal",
                                         typeof(ImageSource),
                                         typeof(MyImageButton),
                                         new PropertyMetadata(null));

         public static readonly DependencyProperty ImageHoverProperty =
             DependencyProperty.Register("ImageHover",
                                         typeof(ImageSource),
                                         typeof(MyImageButton),
                                         new PropertyMetadata(null));
         //鼠标移到上面
         public ImageSource ImageHover
         {
             get { return (ImageSource)GetValue(ImageHoverProperty); }
             set { SetValue(ImageHoverProperty, value); }
         }
         //默认图片
         public ImageSource ImageNormal
         {
             get { return (ImageSource)GetValue(ImageNormalProperty); }
             set { SetValue(ImageNormalProperty, value); }
         }

         public MyImageButton()
         {
             this.DefaultStyleKey = typeof(MyImageButton);
         }
     }
 }

一个是鼠标移到上面的imageSource一个是默认的source

看一下它的样式 用sotryboard控制

鼠标MouseOver的时候一个Visible一个Collapsed

 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     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">

     <Style TargetType="local:MyImageButton">
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:MyImageButton">
                     <Grid Background="{TemplateBinding Background}">
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">

                                 <VisualState x:Name="Normal"/>
                                 <VisualState x:Name="MouseOver">
                                     <Storyboard>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
                                             <DiscreteObjectKeyFrame KeyTime="">
                                                 <DiscreteObjectKeyFrame.Value>
                                                     <Visibility>Visible</Visibility>
                                                 </DiscreteObjectKeyFrame.Value>
                                             </DiscreteObjectKeyFrame>
                                         </ObjectAnimationUsingKeyFrames>
                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage">
                                             <DiscreteObjectKeyFrame KeyTime="">
                                                 <DiscreteObjectKeyFrame.Value>
                                                     <Visibility>Collapsed</Visibility>
                                                 </DiscreteObjectKeyFrame.Value>
                                             </DiscreteObjectKeyFrame>
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Pressed"/>
                                 <VisualState x:Name="Disabled"/>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <Image x:Name="normalImage" Source="{TemplateBinding ImageNormal}" Stretch="Fill"/>
                         <Image x:Name="mouseOverImage" Source="{TemplateBinding ImageHover}" Stretch="Fill" Visibility="Collapsed"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
 </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="" d:DesignWidth="">

    <Grid x:Name="LayoutRoot" Background="White">
        <local:MyImageButton   Margin="" ImageHover="Images/全屏鼠标移上.png" ImageNormal="Images/全屏.png" Width="" Height="" HorizontalAlignment="Center" VerticalAlignment="Center">
        </local:MyImageButton>
    </Grid>
</UserControl>