• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Silverlightbutton图片切换样式实例代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

之前一直做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>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
IIS7的应用程序池详细解析发布时间:2022-02-05
下一篇:
C#获取当前页面的URL示例代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap