Silverlight button 图片切换样式

之前一直做WPF现在开始接触Slilverlight感触很多。

今天做一个Button要求

有两个图片,button默认有一个图片,鼠标over时用另一个图片,

用wpf做的时候写一个template很简单,但silverlight和wpf写起来不一样

记录一下。大概思路是两个image鼠标MouseOver的时候一个Visible一个Collapsed

写的是一个自定义控件,代码和皮肤分离,很简单的一个demo

代码下载:ImageButtonTest.rar

先写一个继承自button的imagebutton类

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Net;
 5 using System.Windows;
 6 using System.Windows.Controls;
 7 using System.Windows.Documents;
 8 using System.Windows.Input;
 9 using System.Windows.Media;
10 using System.Windows.Media.Animation;
11 using System.Windows.Shapes;
12 
13 namespace ImageButtonTest
14 {
15     /// <summary>
16     /// build by lp
17     /// </summary>
18     public class MyImageButton : Button
19     {
20         
21         public static readonly DependencyProperty ImageNormalProperty =
22             DependencyProperty.Register("ImageNormal",
23                                         typeof(ImageSource),
24                                         typeof(MyImageButton),
25                                         new PropertyMetadata(null));
26 
27         public static readonly DependencyProperty ImageHoverProperty =
28             DependencyProperty.Register("ImageHover",
29                                         typeof(ImageSource),
30                                         typeof(MyImageButton),
31                                         new PropertyMetadata(null));
32         //鼠标移到上面
33         public ImageSource ImageHover
34         {
35             get { return (ImageSource)GetValue(ImageHoverProperty); }
36             set { SetValue(ImageHoverProperty, value); }
37         }
38         //默认图片
39         public ImageSource ImageNormal
40         {
41             get { return (ImageSource)GetValue(ImageNormalProperty); }
42             set { SetValue(ImageNormalProperty, value); }
43         }
44         
45         public MyImageButton()
46         {
47             this.DefaultStyleKey = typeof(MyImageButton);
48         }
49     }
50 }

 一个是鼠标移到上面的imageSource一个是默认的source

看一下它的样式 用sotryboard控制

鼠标MouseOver的时候一个Visible一个Collapsed

 1 <ResourceDictionary
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     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">
 5 
 6 
 7     <Style TargetType="local:MyImageButton">
 8         <Setter Property="Template">
 9             <Setter.Value>
10                 <ControlTemplate TargetType="local:MyImageButton">
11                     <Grid Background="{TemplateBinding Background}">
12                         <VisualStateManager.VisualStateGroups>
13                             <VisualStateGroup x:Name="CommonStates">
14                                 
15                                 <VisualState x:Name="Normal"/>
16                                 <VisualState x:Name="MouseOver">
17                                     <Storyboard>
18                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="mouseOverImage">
19                                             <DiscreteObjectKeyFrame KeyTime="0">
20                                                 <DiscreteObjectKeyFrame.Value>
21                                                     <Visibility>Visible</Visibility>
22                                                 </DiscreteObjectKeyFrame.Value>
23                                             </DiscreteObjectKeyFrame>
24                                         </ObjectAnimationUsingKeyFrames>
25                                         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="normalImage">
26                                             <DiscreteObjectKeyFrame KeyTime="0">
27                                                 <DiscreteObjectKeyFrame.Value>
28                                                     <Visibility>Collapsed</Visibility>
29                                                 </DiscreteObjectKeyFrame.Value>
30                                             </DiscreteObjectKeyFrame>
31                                         </ObjectAnimationUsingKeyFrames>
32                                     </Storyboard>
33                                 </VisualState>
34                                 <VisualState x:Name="Pressed"/>
35                                 <VisualState x:Name="Disabled"/>
36                             </VisualStateGroup>
37                         </VisualStateManager.VisualStateGroups>
38                         <Image x:Name="normalImage" Source="{TemplateBinding ImageNormal}" Stretch="Fill"/>
39                         <Image x:Name="mouseOverImage" Source="{TemplateBinding ImageHover}" Stretch="Fill" Visibility="Collapsed"/>
40                     </Grid>
41                 </ControlTemplate>
42             </Setter.Value>
43         </Setter>
44     </Style>
45 </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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ShaoYL

NSTimer类的使用

2749
来自专栏懒人开发

CoordinatorLayout使用(二):Behavior流程 和 事件流

上一篇,我们大体理解了 Behavior简单理解 具体代码可以见 https://github.com/2954722256/use_little_demo ...

1596
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

19910
来自专栏林德熙的博客

WPF 如何在 WriteableBitmap 写文字

最近看到WPF 使用不安全代码快速从数组转 WriteableBitmap 可以快速从数组转 WriteableBitmap 所以就让他画一些元素,但是发现元素...

2821
来自专栏GIS讲堂

Arcgis for Javascript之featureLayer图和属性的互操作

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:

3712
来自专栏张戈的专栏

分享两种圣诞节雪花特效JS代码(网站下雪效果)

今天是圣诞节,首先,张戈在这里祝所有朋友节日快乐! 虽然我对圣诞节并不感冒,不过既然是公开的博客,那还是搞搞气氛吧!测试了网上找的几个代码,下面分享一下我个人比...

1.1K8
来自专栏林德熙的博客

win10 uwp 异步进度条 圆形进度条

进度条可以参见:http://edi.wang/post/2016/2/25/windows-10-uwp-modal-progress-dialog

1541
来自专栏别先生

JAVA学习Swing章节标签JLabel中图标的使用

package com.swing; import java.awt.Color; import java.awt.Component; import jav...

2116
来自专栏swag code

双缓冲原理在Awt和Swing中实现消除闪烁方法总结

AWT是抽象窗口工具箱的缩写,它为编写图形用户界面提供了用户接口,通过这个接口就可以继承很多方法,省去了很多工作。AWT还能使应用程序更好地同用户进行交互。

1432
来自专栏Python攻城狮

Markdown-认识与使用1.简介2.使用一级标题3.设置Markdown编辑

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdo...

751

扫码关注云+社区

领取腾讯云代金券