我要评论之前一直做wpf现在开始接触slilverlight感触很多。
今天做一个button要求
有两个图片，button默认有一个图片，鼠标over时用另一个图片，
用wpf做的时候写一个template很简单，但silverlight和wpf写起来不一样
记录一下。大概思路是两个image鼠标mouseover的时候一个visible一个collapsed
写的是一个自定义控件，代码和皮肤分离，很简单的一个demo
代码下载：
先写一个继承自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>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论