• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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>

    您可能感兴趣的文章:
    • Silverlight实现星星闪烁动画
    • Silverlight实现跑马灯动画
    上一篇:IIS7的应用程序池详细解析
    下一篇:C#获取当前页面的URL示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Silverlightbutton图片切换样式实例代码 Silverlightbutton,图片,切换,