在Silverlight自定义验证效果(带动画)

最新推荐文章于 2017-11-30 15:58:46 发布
最新推荐文章于 2017-11-30 15:58:46 发布
阅读量4.1k 收藏
点赞数
分类专栏： Silverlight
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lijun7788/article/details/8495813
版权

效果图:

思路很简单，就是对现有控件进行扩充，在验证时加上一个动画效果，然后使用Popup弹出来

核心是一个用户控件(动画效果)HelpTip:

HelpTip.Xaml代码如下:

<UserControl x:Class="HahaMan.SLTools.Controls.HelpTip"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="20" Height="20">
    <UserControl.Resources>
        <Storyboard x:Name="sbProliferation" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="haloFrame" Storyboard.TargetProperty="Width">
                <LinearDoubleKeyFrame Value="35" KeyTime="0:0:0.7" />
                <LinearDoubleKeyFrame Value="35" KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="haloFrame" Storyboard.TargetProperty="Height">
                <LinearDoubleKeyFrame Value="35" KeyTime="0:0:0.7" />
                <LinearDoubleKeyFrame Value="35" KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="haloFrame" Storyboard.TargetProperty="Opacity">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.7" />
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="haloFrame" Storyboard.TargetProperty="StrokeThickness">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.7" />
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="sbLoaded">
            <DoubleAnimation
                Storyboard.TargetName="buttonTransform"
                Storyboard.TargetProperty="ScaleX"
                From="2"
                To="1"
                Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetName="buttonTransform"
                Storyboard.TargetProperty="ScaleY"
                From="2"
                To="1"
                Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation
                Storyboard.TargetName="LayoutRoot"
                Storyboard.TargetProperty="Opacity"
                To="1"
                Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="sbMsg">
            <DoubleAnimation
                x:Name="aniOpacityMsgBackground"
                Storyboard.TargetName="canvasMessage"
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:0.2" />
            <DoubleAnimation
                x:Name="aniOpacityBlackLine"
                Storyboard.TargetName="blackLine"
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:0.2" />
        </Storyboard>
    </UserControl.Resources>
    <Canvas x:Name="LayoutRoot">
        <Canvas.RenderTransform>
            <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
        </Canvas.RenderTransform>
        <TextBlock x:Name="txt1" Text="" Margin="20,-10"/>
        <TextBlock x:Name="txt2" Text="" Margin="20,5"/>
        <TextBlock x:Name="txt3" Text="" Margin="20,20"/>
        <Popup x:Name="popup">
            <Canvas x:Name="canvasMessage" Opacity="0">
                <Border x:Name="borderMessage" Background="#FFFFFF" BorderBrush="#515151" BorderThickness="1" CornerRadius="5">
                    <Grid x:Name="helpGrid" Margin="22 4 8 4">
                        <TextBlock x:Name="tbMessage" FontSize="12" LineStackingStrategy="BlockLineHeight" LineHeight="16" TextWrapping="Wrap" TextAlignment="Left" />
                    </Grid>
                    <Border.RenderTransform>
                        <TranslateTransform x:Name="translate" />
                    </Border.RenderTransform>
                </Border>
                <Grid Width="12" Height="12" Canvas.Left="5" Canvas.Top="5">
                    <Ellipse>
                        <Ellipse.Fill>
                            <RadialGradientBrush Center="0.5,0" GradientOrigin="0.5,0">
                                <GradientStop Color="#FFAA73" Offset="0" />
                                <GradientStop Color="#FF7012" Offset="0.6" />
                                <GradientStop Color="#F06405" Offset="1" />
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                        <Ellipse.Effect>
                            <DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5" Opacity="0.5" />
                        </Ellipse.Effect>
                    </Ellipse>
                </Grid>
            </Canvas>
        </Popup>
        <Canvas x:Name="elementContainer">           
            <Grid Width="35" Height="35" Canvas.Left="-7" Canvas.Top="-7">
                <Ellipse x:Name="haloFrame" Width="12" Height="12" Stroke="#F06405" StrokeThickness="3">
                    <Ellipse.Effect>
                        <DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="2" Opacity="0.2" />
                    </Ellipse.Effect>
                </Ellipse>
            </Grid>
            <Grid x:Name="ellipse" Width="12" Height="12" Canvas.Left="5" Canvas.Top="5">
                <Ellipse>
                    <Ellipse.Fill>
                        <RadialGradientBrush Center="0.5,0" GradientOrigin="0.5,0">
                            <GradientStop Color="#FFAA73" Offset="0" />
                            <GradientStop Color="#FF7012" Offset="0.6" />
                            <GradientStop Color="#F06405" Offset="1" />
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                    <Ellipse.Effect>
                        <DropShadowEffect Direction="0" ShadowDepth="0" BlurRadius="5" Opacity="0.5" />
                    </Ellipse.Effect>
                </Ellipse>
                <Grid x:Name="blackLine">
                    <Rectangle Width="6" Height="2" Fill="#000000" />
                    <Rectangle Width="2" Height="6" Fill="#000000" />
                </Grid>
                <Grid.RenderTransform>
                    <ScaleTransform x:Name="buttonTransform" CenterX="6" CenterY="6" />
                </Grid.RenderTransform>
            </Grid>
        </Canvas>
    </Canvas>
</UserControl>

 

HelpTip.cs代码如下:

namespace HahaMan.SLTools.Controls
{
     partial class HelpTip : UserControl
    {
        private TimeSpan _loadDelay;
        [Category("HahaData")]
        public Thickness Text1Margin
        {
            get { return txt1.Margin; }
            set { txt1.Margin = value; }
        }
        [Category("HahaData")]
        public Thickness Text2Margin
        {
            get { return txt2.Margin; }
            set { txt2.Margin = value; }
        }
        [Category("HahaData")]
        public Thickness Text3Margin
        {
            get { return txt3.Margin; }
            set { txt3.Margin = value; }
        }
        [Category("HahaData")]
        public double Scale
        {
            get
            {
                return (LayoutRoot.RenderTransform as ScaleTransform).ScaleX;
            }
            set
            {
                var scale = (LayoutRoot.RenderTransform as ScaleTransform);
                scale.ScaleX = scale.ScaleY = value;
            }
        }
        [Category("HahaData")]
        public string Text1
        {
            get{return txt1.Text;}
            set{txt1.Text = value;}
        }
        [Category("HahaData")]
        public string Text2
        {
            get { return txt2.Text; }
            set { txt2.Text = value; }
        }
        [Category("HahaData")]
        public string Text3
        {
            get { return txt3.Text; }
            set { txt3.Text = value; }
        }
        [Category("HahaData")]
        public double Text3FontSize
        {
            get { return txt3.FontSize; }
            set { txt3.FontSize = value; }
        }
        [Category("HahaData")]
        public double Text2FontSize
        {
            get { return txt2.FontSize; }
            set { txt2.FontSize = value; }
        }
        [Category("HahaData")]
        public double Text1FontSize
        {
            get { return txt1.FontSize; }
            set { txt1.FontSize = value; }
        }
        [Category("HahaData")]
        public Brush Text3Foreground
        {
            get { return txt3.Foreground; }
            set { txt3.Foreground = value; }
        }
        [Category("HahaData")]
        public Brush Text2Foreground
        {
            get { return txt2.Foreground; }
            set { txt2.Foreground = value; }
        }
        [Category("HahaData")]
        public Brush Text1Foreground
        {
            get { return txt1.Foreground; }
            set { txt1.Foreground = value; }
        }

       [Category("HahaData")]
        public string Message
        {
            get
            {
                return tbMessage.Text;
            }
            set
            {
                tbMessage.Text = value;
            }
        }
 

 

        public HelpTip()
        {
            this._loadDelay = TimeSpan.FromSeconds(0.0);
            this.InitializeComponent();
            this.ellipse.MouseEnter += new MouseEventHandler(this.ellipse_MouseEnter);
            this.ellipse.MouseLeave += new MouseEventHandler(ellipse_MouseLeave);
            this.canvasMessage.MouseLeave += new MouseEventHandler(this.canvasMessage_MouseLeave);
            this.sbMsg.Completed += new EventHandler(this.sbMsg_Completed);
            this.sbLoaded.Completed += new EventHandler(this.sbLoaded_Completed);

            InitializeComponent();
            sbLoaded.Begin();
            
        }

        void ellipse_MouseLeave(object sender, MouseEventArgs e)
        {
            if (this.Message.Length == 0)
            {
                this.HideMessage();
            }
        }
        private void ellipse_MouseEnter(object sender, MouseEventArgs e)
        {   
           
            this.ShowMessage();           
        }
        private void sbMsg_Completed(object sender, EventArgs e)
        {
            if (this.aniOpacityMsgBackground.To <= 0.0)
            {
                this.tbMessage.Visibility = Visibility.Collapsed;
                this.canvasMessage.Visibility = Visibility.Collapsed;
                this.popup.IsOpen = false;
            }
        }

        private void canvasMessage_MouseLeave(object sender, MouseEventArgs e)
        {
            sbLoaded.Begin();
            this.HideMessage();           
            
        }
        private void HideMessage()
        {
           
            sbProliferation.Resume();            
            base.SetValue(Canvas.ZIndexProperty, 0);
            this.aniOpacityMsgBackground.To = 0.0;
            this.aniOpacityBlackLine.To = 1.0;
            this.sbMsg.Begin();
            
        }



        public void BeginHalo()
        {
            if (this.sbProliferation.GetCurrentState() == ClockState.Stopped)
            {
                this.haloFrame.Visibility = Visibility.Visible;
                this.sbProliferation.Begin();
            }
        }

      
        private void sbLoaded_Completed(object sender, EventArgs e)
        {
            sbLoaded.Stop();
            this.BeginHalo();            
        }

        private void ShowMessage()
        {
            sbLoaded.Begin();
            sbProliferation.Pause();
            this.aniOpacityMsgBackground.To = 0.9;
            this.aniOpacityBlackLine.To = 0.0;
            this.sbMsg.Begin();

            if (Message.Length == 0) return;
            this.popup.IsOpen = true;
            base.SetValue(Canvas.ZIndexProperty, 1);
            this.tbMessage.Visibility = Visibility.Visible;
            this.canvasMessage.Visibility = Visibility.Visible;
           
            this.SetPostion();
        }
        private Position _haloPosition;

        public Position Position
        {
            get
            {
                return _haloPosition;
            }
            set
            {
                _haloPosition = value;
            }
        }
        private void SetPostion()
        {
            this.borderMessage.UpdateLayout();
            switch (this._haloPosition)
            {
                case Position.LeftTop:
                    this.translate.X = 0.0;
                    this.translate.Y = 0.0;
                    this.helpGrid.Margin = new Thickness(22.0, 4.0, 8.0, 4.0);
                    return;

                case Position.RightTop:
                    this.translate.X = -this.borderMessage.ActualWidth + 22.0;
                    this.helpGrid.Margin = new Thickness(8.0, 4.0, 22.0, 4.0);
                    return;

                case Position.RightBottom:
                    this.helpGrid.Margin = new Thickness(8.0, 4.0, 22.0, 4.0);
                    return;

                case Position.LeftBottom:
                    this.helpGrid.Margin = new Thickness(22.0, 4.0, 8.0, 4.0);
                    return;
            }
        }

 

 

 


 


    }

    public enum Position
    {
        LeftTop,
        RightTop,
        RightBottom,
        LeftBottom
    }
}


 

ValidTextBox.cs代码如下:

namespace HahaMan.SLTools.Controls
{
    public class ValidTextBox : TextBox
    {
        public static string EmptyString = "不为空!";
        public static string NotIsInt = "请输入整数!";
        public static string NotIsDouble = "请输入有效数字!";
        public HelpTip help;
        public bool IsEmpty
        {
            get
            {
                if (this.Text.Length == 0)
                {
                    this.Message = EmptyString;
                    this.Focus();
                    return true;
                }
                this.Message = "";
                return false;
            }
        }
        public int? ToInt
        {
            get
            {
                try
                {
                    return int.Parse(this.Text);
                }
                catch 
                {
                    return null;
                }
            }
        }
        public double? ToDouble
        {
            get
            {
                try
                {
                    return double.Parse(this.Text);
                }
                catch
                {
                    return null;
                }
            }
        }
        public decimal? ToDecimal
        {
            get
            {
                try
                {
                    return decimal.Parse(this.Text);
                }
                catch
                {
                    return null;
                }
            }
        }
        public bool IsInt
        {
            get
            {
                try
                {
                    if (IsEmpty) return false;
                    int.Parse(this.Text);
                    Message = "";
                    return true;
                }
                catch 
                {

                    Message = NotIsInt;
                    return false;
                }
            }
        }
        public bool IsDouble
        {
            get
            {
                try
                {
                    if (IsEmpty) return false;
                    double.Parse(this.Text);
                    Message = "";
                    return true;
                }
                catch
                {

                    Message = NotIsDouble;
                    return false;
                }
            }
        }

        public String Message
        {
            get
            {
                if (help == null)
                    return "";
                return help.Message;
            }
            set
            {
                if (help == null)
                {
                    help = new HelpTip();
                    Panel fe = this.Parent as Panel;
                    fe.Children.Add(help);
                    help.Width = 20; help.Height = 20;
                    help.HorizontalAlignment = this.HorizontalAlignment;
                    help.VerticalAlignment = this.VerticalAlignment;
                    help.Margin = new Thickness(this.Margin.Left + this.Width, this.Margin.Top, 0, 0);

                }
                help.Message = value;
                if (value.Length > 0)
                {
                    help.Visibility = Visibility.Visible;
                }
                else
                {
                    help.Visibility = Visibility.Collapsed;
                }
            }
        }
    }
}


 

ValidComboBox.cs代码如下:

namespace HahaMan.SLTools.Controls
{
    public class ValidCombox:ComboBox
    {
        public HelpTip help;
        public String Message
        {
            get
            {
                if (help == null)
                    return "";
                return help.Message;
            }
            set
            {
                if (help == null)
                {
                    help = new HelpTip();
                    Panel fe = this.Parent as Panel;
                    fe.Children.Add(help);
                    help.Width = 20; help.Height = 20;
                    help.HorizontalAlignment = this.HorizontalAlignment;
                    help.VerticalAlignment = this.VerticalAlignment;
                    help.Margin = new Thickness(this.Margin.Left + this.Width, this.Margin.Top, 0, 0);

                }
                help.Message = value;
                if (value.Length > 0)
                {
                    help.Visibility = Visibility.Visible;
                }
                else
                {
                    help.Visibility = Visibility.Collapsed;
                }
            }
        }
    }
}

 

 测试按钮代码如下:

 private void ibAdd_Click(object sender, RoutedEventArgs e)
        {
            if (txtName.IsEmpty) return;
            if (cbxSex.SelectedIndex == -1)
            {
                cbxSex.Message = "请选择...";
                return;
            }
            else
            {
                cbxSex.Message = "";
            }
            if (txtAge.IsEmpty || txtAge.IsInt == false) return;
            if (txtMoney.IsEmpty || txtMoney.IsDouble == false) return;
        }


代码路径:http://download.csdn.net/detail/lijun7788/4987454

 

lijun7788
关注
专栏目录
Microsoft Silverlight 4 正式发布
心灵的足迹
01-07 470
<br />Silverlight 4 浏览器插件（Silverlight 运行时）下载地址：<br />http://download.microsoft.com/download/2/2/C/22CABA89-3580-4611-8E0D-56749D2120DF/runtime/Silverlight.exe<br />Silverlight 4 Tools：<br />http://download.microsoft.com/download/5/B/4/5B46BF8A-9350-49D5-B1
稳扎稳打 Silverlight 2.0 系列文章索引
zhengxiuchen86的博客
08-09 200
[源码下载] 稳扎稳打 Silverlight 2.0 系列文章索引 作者： webabcd 在线DEMO http://www.cnblogs.com/webabcd/archi
silverlight
XUENIAO的专栏
03-07 1603
百科名片   silverlight标志 Microsoft Silverlight是微软所发展的 Web 前端应用程序开发解决方案，是微软丰富型互联网应用程序（Rich Internet Application）策略的主要应用程序开发平台之一，以浏览器的外挂组件方式，提供 Web 应用程序中多媒体（含影音流与音效流）与高度交互性前端应用程序的解决方案，同时它也是微软
Microsoft SilverLight
Andrewniu的博客
11-30 678
Microsoft Silverlight是一个跨浏览器的、跨平台的插件，为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型，并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递。 Microsoft Silverlight的中文
写在Silverlight 5发布前 - 盘点2010年Silverlight开发书籍
weixin_34166847的博客
11-08 138
距MIX11还有一个月，Silverlight 5即将到来（了解Silverlight 5新特性），为了方便大家学习Silverlight开发技术，本文汇总了2010年较为流行的Silverlight开发书籍列表，希望对大家学习Silverlight开发技术有所帮助。同时我们欢迎各位发表读书心得，相互交流，共同提高；如果您在阅读中遇到问题，欢迎留言，我们...
Silverlight学习笔记--Silverlight初接触
刘军的专栏
10-28 1429
Microsoft Silverlight是微软所发展的 Web 前端应用程序开发解决方案
WindowsPhone控件详解及引用外部控件Silverlight Toolkit
mr_raptor的专栏
02-02 8039
++++++++++++++++++++++++++++++++++++++++++ 本文系本站原创,欢迎转载! 转载请注明出处: http://blog.csdn.net/mr_raptor/article/details/7229618 ++++++++++++++++++++++++++++++++++++++++++   在Silverlight中，基本上所有的控件都在Syste
microsoft silverlight
Boris的专栏
06-07 1198
Microsoft Silverlight是一个跨浏览器的、跨平台的插件，为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型，并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递。 Microsoft Silverlight的
如何在Silverlight 2中实现自定义光标
04-08
在Silverlight 2中实现自定义光标是一个有趣且实用的技术，这允许开发者根据应用程序的特定需求设计并显示个性化的光标形状。光标通常是一个简单的箭头，但在某些情况下，比如用户进行特定操作或者在特定界面上时，...
silverlight数据验证
06-07
在Silverlight中，你可以定义自定义验证规则，这些规则是派生自`System.Windows.Controls.ValidationRule`的类。每个验证规则都有一个`Validate`方法，该方法会在数据绑定更新时被调用，用于检查新值是否有效。如果...
Silverlight 美化ChildWindow效果源
11-23
在本文中，我们将深入探讨如何使用Silverlight技术来美化ChildWindow效果。Silverlight是一种强大的工具，用于构建富互联网应用程序（RIA），它提供了丰富的用户界面和交互性，特别适合开发动态和吸引人的Web应用。 ...
Silverlight拖放 缩放 旋转 自定义控件
07-16
在本文中，我们将深入探讨Silverlight中的拖放、缩放和旋转功能，以及如何自定义控件。Silverlight是微软推出的一种轻量级的插件技术，主要用于开发丰富的网络应用程序，尤其是在多媒体和交互性方面表现出色。 ### ...
Visifire图表应用2-更改图例位置
李君老师的BLOG
11-10 6627
Visifire图表的图例默认在下面如图所示:有时需要将图例改到右边如下图:看帮助手册看了半天没有示例，只有一段说明，试着改属性，改了半天还是不行，最后想到是不是代码编写的时机不对，将代码放在Rendered之后就可以，我这里用的是官方示例中的DateTimeAxis更改的原代码如下:  public void CreateChart() { Cha
Silverlight 中Binding 的使用
李君老师的BLOG
12-07 5428
在Silverlight中Bindig很有用无论是数据显示还是验证都要使用绑定,绑定分为以下几种用法1.绑定属性用法:{Binding Path=属性}2.绑定数据上下文，在DataGrid中就是当前行对象{Binding .}这个一般自己要写一个转换器进行转换处理,例如:{Binding ., Converter={StaticResource MyUIConverter1}, Converte
Silverlight 中给TreeView添加复选框
李君老师的BLOG
12-10 5248
代码如下: List datas; public CWRoleRight() { InitializeComponent(); BLL.SysFunBLL.FindAll(list => { datas = list.ToList();
使用ProjNet.Silverlight进行ArcGis座标转换(有解决出错问题方法)
李君老师的BLOG
01-21 4985
使用ProjNet.Silverlight可以将ArcGis中的从标由大地座标转换为经纬座标，代码如下  public List ConvertTo(List mps) { CoordinateTransformationFactory ctfac = new CoordinateTransformationFactory();
Silverlight 4 操作指南
8. **RIA服务**：结合WCF RIA Services，开发者可以更方便地在客户端和服务器之间交换数据，实现业务逻辑的封装和验证。 9. **Silverlight与.NET Framework**：Silverlight 4基于.NET Framework，因此开发者可以...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值