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
{
    /// <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="0">
                                                <discreteobjectkeyframe.value>
                                                    <visibility>visible</visibility>
                                                </discreteobjectkeyframe.value>
                                            </discreteobjectkeyframe>
                                        </objectanimationusingkeyframes>
                                        <objectanimationusingkeyframes storyboard.targetproperty="(uielement.visibility)" storyboard.targetname="normalimage">
                                            <discreteobjectkeyframe keytime="0">
                                                <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="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>