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>
相关文章
详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）
本篇文章主要介绍了免费开源的.NET多类型文件解压缩组件SharpZipLib，这也是一种解压缩组件，具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
asp.net模板引擎Razor中cacheName的问题分析
这篇文章主要介绍了asp.net模板引擎Razor中cacheName的问题,实例分析了cacheName在提高编译效率方面的使用技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了如何在C#中生成与PHP一样的MD5 Hash Code,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了ASP.net中如何实现基于UrlRewrite的防盗链,需要的朋友可以参考下2014-03-03
.Net core Blazor+自定义日志提供器实现实时日志查看器的原理解析
我们经常远程连接服务器去查看日志，比较麻烦，如果直接访问项目的某个页面就能实时查看日志就比较奈斯了，结合blazor实现了基本效果，这篇文章主要介绍了.Net core Blazor+自定义日志提供器实现实时日志查看器,需要的朋友可以参考下2022-10-10
在ASP.NET中提供了加密的解决方法。在名字空间System.Web.Security中包含了类FormsAuthentication，其中有一个方法HashPasswordForStoringInConfigFile。2009-11-11
这些内容是我在学习ASP.Net的时候对Page研究的一些心得，具体的细节没有很详细的探讨，更多的内容请大家参考MSDN，但是我举了一些初学者常犯的错误和出现错误的原因，希望可以给大家带来启发。2009-08-08
这篇文章介绍了Visual Studio 2022智能辅助编码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-12
log4net是.net中常用的一个日志记录工具，下面这篇文章主要给大家介绍了关于.net简单使用Log4net的方法（多个日志配置文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧2018-11-11
asp.net jquery无刷新分页插件(jquery.pagination.js)
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果:本示例Handler中采用StringBuilder的append方法追加HTML，小数据量可以，但是大数据或是布局常变，建议返回JSON格式的数据，性能和灵活性更好,望使用者好好把握2013-01-01
最新评论