效果图:
思路很简单，就是对现有控件进行扩充，在验证时加上一个动画效果，然后使用Popup弹出来
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">
<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,22.0,4.0);
return;
case Position.RightBottom:
this.helpGrid.Margin = new Thickness(8.0,4.0);
return;
case Position.LeftBottom:
this.helpGrid.Margin = new Thickness(22.0,4.0);
return;
}
}
}
public enum Position
{
LeftTop,RightTop,RightBottom,LeftBottom
}
}
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);
}
help.Message = value;
if (value.Length > 0)
{
help.Visibility = Visibility.Visible;
}
else
{
help.Visibility = Visibility.Collapsed;
}
}
}
}
}
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,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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。