潜移默化学会WPF（炫丽篇<一>）简单易用动画错误提示

1. 定位 在目标元素下渐变滑出，过几秒后自动滑动消失

   

<Storyboard x:Key="StatusTip">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tbStatusTip">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="1"/>

                <EasingDoubleKeyFrame KeyTime="0:0:3.2" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="tbStatusTip">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="21"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="21"/>

                <EasingDoubleKeyFrame KeyTime="0:0:3.2" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

 

请在Canvas中放控件

   

 <Canvas x:Name="docCenter" DockPanel.Dock="Left" Background="White">

            <TextBlock x:Name="tbStatusTip" Height="26" SnapsToDevicePixels="True" Text="" Foreground="#DB3D32" Opacity="0" RenderTransformOrigin="0.5,0.5"  FontSize="18" >

                <TextBlock.RenderTransform>

                    <TransformGroup>

                        <ScaleTransform/>

                        <SkewTransform/>

                        <RotateTransform/>

                        <TranslateTransform/>

                    </TransformGroup>

                </TextBlock.RenderTransform>

            </TextBlock>

 

            <Label Content="新职位："  Canvas.Left="128"  Canvas.Top="138" Height="35"  Name="lblName"  VerticalAlignment="Top" FontSize="20" Width="92" />

            <TextBox MaxLength="25"  Height="35" Padding="2" Canvas.Left="246" Canvas.Top="138"  Name="txtEmployeeName" Width="427" BorderBrush="#D1D1D1"

                      Text="" FontSize="18" BorderThickness="1" Template="{StaticResource TextBoxTemplate}" />

            <Button Background="{x:Null}" Canvas.Left="291" Canvas.Top="311" Content="保  存" FontSize="19" Height="40" Name="button1" Width="120" Click="btnAddRole_Click" />

                   </Canvas>

本例中在文本框下  txtEmployeeName下出现，主要后台设置

 

 

后台写个方法供调用地方调用

       

 /// <summary>

        /// 开始提示信息动画

        /// </summary>

        /// <param name="message"></param>

        private void BeginStatusWrong(string message, UIElement framew, double height)

        {

            double tLeft = Canvas.GetLeft(framew);

            double tTop = Canvas.GetTop(framew);

            Canvas.SetLeft(tbStatusTip, tLeft);

            Canvas.SetTop(tbStatusTip, tTop + height / 2);

            tbStatusTip.Text = message;

            if (messageStatus != null) messageStatus.Begin();

        }

 

这样调用

 

      if (string.IsNullOrEmpty(txtEmployeeName.Text))

            {

                txtEmployeeName.Focus();

                BeginStatusWrong("职位不能为空",txtEmployeeName,txtEmployeeName.Height);

            }

 

 

后台请先实例化messageStatus

        /// <summary>

        /// 提示信息动画

        /// </summary>

        Storyboard messageStatus = null;

在构造函数中实例化

    messageStatus = this.FindResource("StatusTip") as Storyboard;

 

 

 

 

 

 

2.这是一个  从右往左  渐现到中间   停留一会   然后  往左  渐隐出去 一个提示

 <Storyboard x:Key="StatusTip">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tbStatusTip">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="tbStatusTip">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-55"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="-55"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3.1" Value="-110"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>