Silverlightbutton圖片切換樣式實(shí)例代碼

更新時(shí)間：2013年11月01日 15:27:22 作者：

這篇文章介紹了Silverlightbutton圖片切換樣式實(shí)例代碼，有需要的朋友可以參考一下

之前一直做WPF現(xiàn)在開始接觸Slilverlight感觸很多。

今天做一個(gè)Button要求

有兩個(gè)圖片，button默認(rèn)有一個(gè)圖片，鼠標(biāo)over時(shí)用另一個(gè)圖片，

用wpf做的時(shí)候?qū)懸粋€(gè)template很簡(jiǎn)單，但silverlight和wpf寫起來不一樣

記錄一下。大概思路是兩個(gè)image鼠標(biāo)MouseOver的時(shí)候一個(gè)Visible一個(gè)Collapsed

寫的是一個(gè)自定義控件，代碼和皮膚分離，很簡(jiǎn)單的一個(gè)demo

代碼下載：ImageButtonTest.rar

先寫一個(gè)繼承自button的imagebutton類

復(fù)制代碼代碼如下:

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));
        //鼠標(biāo)移到上面
        public ImageSource ImageHover
        {
            get { return (ImageSource)GetValue(ImageHoverProperty); }
            set { SetValue(ImageHoverProperty, value); }
        }
        //默認(rèn)圖片
        public ImageSource ImageNormal
        {
            get { return (ImageSource)GetValue(ImageNormalProperty); }
            set { SetValue(ImageNormalProperty, value); }
        }

        public MyImageButton()
        {
            this.DefaultStyleKey = typeof(MyImageButton);
        }
    }
}

一個(gè)是鼠標(biāo)移到上面的imageSource一個(gè)是默認(rèn)的source

看一下它的樣式用sotryboard控制

鼠標(biāo)MouseOver的時(shí)候一個(gè)Visible一個(gè)Collapsed

復(fù)制代碼代碼如下:

    <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>