Silverlightbutton图片切换样式实例代码

之前一直做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
{
    ///

    /// build by lp
    ///

    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

复制代码 代码如下:
    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">

   
       
           
               
                   
                       
                           

                               
                               
                                   
                                       
                                           
                                               
                                                    Visible
                                               
                                           
                                       
                                       
                                           
                                               
                                                    Collapsed
                                               
                                           
                                       
                                   
                               
                               
                               
                           
                       
                       
                       
                   
               
           
       
   

这样就可以用了

我们在页面上调用一下

复制代码 代码如下:
    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">