Silverlight button的图片切换样式

Silverlight button的图片切换样式2014-12-08之前一直做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

<ResourceDictionaryxmlns="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>

这样就可以用了

我们在页面上调用一下

<UserControlxmlns="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>

作者：李鹏

出处：http://www.cnblogs.com/li-peng/

代码下载：