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>

本文Silverlightbutton图片切换样式实例代码到此结束。拥有的，要珍惜，要知足；做人必须要有一颗平常心，肤浅的羡慕，无聊的攀比，笨拙的效仿，只会让自我整天活在他人的影子里面。我们应当认清自我，找到属于自我的位置，走自我的道路，过自我的生活。小编再次感谢大家对我们的支持！