SilverLight学习笔记--建立Silverlight自定义控件(5)--绑定动画效果

   有了上述的基础，我们进一步完善我们的自定义控件，在此我们将创建Storyboard和前面的添加事件处理方法为我们的自定义控件加上动画效果。
  1、首先，在MyDesignButton项目中进一步完善我们的generic.xaml文件。为其加入storyboard,其中，我们可以自己利用Expression blend来帮助我们生成任何我们想要的动画效果，然后截取动画代码到generic.xaml文件中，只是要注意其放置的位置，这样便于我们在代码操作中定位。两段storyboard代码如下:

                            <Storyboard x:Name="MouseEnterAnimation">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFA52A2A"/>
                                    <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF49A52A"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Name="MouseLeaveAnimation">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5AA52A"/>
                                    <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFA52A2A"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>

此两段代码(两段storyboard分别命名为:MouseEnterAnimation和 MouseLeaveAnimation)用于定义当我们的鼠标移入和移出我们的自定义控件时的外观动画表现。 在此，我们只是定义了其不同的颜色变化。到此generic.xaml的完整代码如下:

 <ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:custom="clr-namespace:MyDesignButton">

    <Style TargetType="custom:MySilverButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="custom:MySilverButton">
                    <Grid x:Name="RootElement">
                        <Grid.Resources>
                            <Storyboard x:Name="MouseEnterAnimation">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFA52A2A"/>
                                    <SplineColorKeyFrame KeyTime="00:00:01" Value="#FF49A52A"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Name="MouseLeaveAnimation">
                                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                    <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5AA52A"/>
                                    <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFA52A2A"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>
                        <Rectangle x:Name="BodyElement" Width="200" Height="100"   Fill="Brown"  Stroke="Purple" RadiusX="16" RadiusY="16" />
                        <TextBlock x:Name="ButtonCaption"  HorizontalAlignment="Center"  VerticalAlignment="Center" FontSize="26"  />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

2、在C#代码中定义和绑定我们的动画事件
 （1）、首先在MySilverButton.cs中定义一系列的变量，这些变量将用于我们对自定义控件内部进行操作

        private const string RootElement = "RootElement";
        private const string BodyElement = "BodyElement";
        private const string MouseEnterAnimation = "MouseEnterAnimation";
        private const string MouseLeaveAnimation = "MouseLeaveAnimation";

        private FrameworkElement _root;
        private FrameworkElement _body;
        private Storyboard _enter;
        private Storyboard _leave;

 

（2）、定义MouseEnter和MouseLeave事件的委托处理函数

        void SimpleButton_MouseEnter(object sender, MouseEventArgs e)
        {
            try
            {
                Rectangle BgRect = GetTemplateChild("BodyElement") as Rectangle;
                BgRect.Fill = new SolidColorBrush(Colors.Blue);
                if (_enter != null)
                    _enter.Begin();

            }
            catch
            {  }
        }

        void SimpleButton_MouseLeave(object sender, MouseEventArgs e)
        {
            try
            {
                Rectangle BgRect = GetTemplateChild("BodyElement") as Rectangle;
                BgRect.Fill = new SolidColorBrush(Colors.Brown);

                if (_leave != null)
                    _leave.Begin();
            }
            catch
            { }
        }

（3）、在OnApplyTemplate函数中加入下述代码。

 

            _root = (FrameworkElement)GetTemplateChild("RootElement");
            _body = (FrameworkElement)GetTemplateChild(MySilverButton.BodyElement);

            if (_root != null)
            {
                 
                _enter = (Storyboard)_root.Resources[MySilverButton.MouseEnterAnimation];
                _leave = (Storyboard)_root.Resources[MySilverButton.MouseLeaveAnimation];
            } 

 

 修改后，完整的MySilverButton.cs代码如下:

 using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyDesignButton
{
    public class MySilverButton : ContentControl
    {
        private const string RootElement = "RootElement";
        private const string BodyElement = "BodyElement";
        private const string MouseEnterAnimation = "MouseEnterAnimation";
        private const string MouseLeaveAnimation = "MouseLeaveAnimation";

        private FrameworkElement _root;
        private FrameworkElement _body;
        private Storyboard _enter;
        private Storyboard _leave;

       public event RoutedEventHandler Click; //添加Click事件      

        public MySilverButton()
        {
            this.DefaultStyleKey = typeof(MySilverButton);

            this.MouseLeftButtonUp += new MouseButtonEventHandler(SimpleButton_MouseLeftButtonUp); //添加Click事件
            this.MouseEnter += new MouseEventHandler(SimpleButton_MouseEnter);
            this.MouseLeave += new MouseEventHandler(SimpleButton_MouseLeave);

        }
        //添加Click事件
        void SimpleButton_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (Click != null)
            {
                Click(this, new RoutedEventArgs());
                Click(this, new RoutedEventArgs());
                TextBlock BgTextBlock = (sender as MySilverButton).GetTemplateChild("ButtonCaption") as TextBlock;
                BgTextBlock.Text = "修改显示文本";
            }
        }
        添加自定义控件属性#region 添加自定义控件属性
        public static DependencyProperty TextProperty;

        此控件的C#属性#region 此控件的C#属性
        public string MyText
        {
            get
            {
                return (string)base.GetValue(TextProperty);
            }
            set
            {
                base.SetValue(TextProperty, value);
            }
        }
        #endregion

        静态构造函数#region  静态构造函数
        static MySilverButton()
        {

            TextProperty = DependencyProperty.Register("MyText",
                                           typeof(string),
                                           typeof(MySilverButton),
                                           new PropertyMetadata("默认值", new PropertyChangedCallback(MySilverButton.OnTextPropertyChanged)));
        }
        #endregion

        private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            (d as MySilverButton).OnTextPropertyChanged(e);
        }

        void OnTextPropertyChanged(DependencyPropertyChangedEventArgs e)
        {
            try
            {
                TextBlock BgTextBlock = this.GetTemplateChild("ButtonCaption") as TextBlock;
                BgTextBlock.Text = e.NewValue as string;
            }
            catch (Exception ex)
            {
                string ks = ex.ToString();
            }
        }


        #endregion
        void SimpleButton_MouseEnter(object sender, MouseEventArgs e)
        {
            try
            {
                Rectangle BgRect = GetTemplateChild("BodyElement") as Rectangle;
                BgRect.Fill = new SolidColorBrush(Colors.Blue);
                if (_enter != null)
                    _enter.Begin();

            }
            catch
            {

            }
        }

        void SimpleButton_MouseLeave(object sender, MouseEventArgs e)
        {
            try
            {
                Rectangle BgRect = GetTemplateChild("BodyElement") as Rectangle;
                BgRect.Fill = new SolidColorBrush(Colors.Brown);

                if (_leave != null)
                    _leave.Begin();
            }
            catch
            { }
        }

        //有些时候，我们希望在模板生效的时候就对某些模板成员进行操作,如绑定事件，
        //调整属性等，就需要一个事件OnApplyTemplate，我们只能通过override父类的OnApplyTemplate来响应模板生效
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            //我们在属性MyText变化的时候直接GetTemplateChild，并没有考虑到这时TextBlock是否已经创建，
            //在SL中，MyText属性设置其实是发生在Template生效之前的，所以设置MyText的时候取不到ButtonCaption元素。
            //那么，我们就需要考虑在加载模板完成的时候，取出MyText属性并且设置到ButtonCaption上
            try
            {
                var tb = GetTemplateChild("ButtonCaption") as TextBlock;
                (GetTemplateChild("ButtonCaption") as TextBlock).Text = this.MyText;
            }
            catch (Exception ex)
            {
                string ke = ex.ToString();
            }


            _root = (FrameworkElement)GetTemplateChild("RootElement");

            _body = (FrameworkElement)GetTemplateChild(MySilverButton.BodyElement);

            if (_root != null)
            {

                _enter = (Storyboard)_root.Resources[MySilverButton.MouseEnterAnimation];
                _leave = (Storyboard)_root.Resources[MySilverButton.MouseLeaveAnimation];
            }

        }
    }
}

 

回到MySLbutton项目，测试结果，可以看到我们加入的动画效果。
前往：Silverlight学习笔记清单