欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Silverlightbutton图片切换样式实例代码

程序员文章站 2024-02-27 15:22:57
之前一直做wpf现在开始接触slilverlight感触很多。 今天做一个button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用w...

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