基于WPF實現(xiàn)控件輪廓跑馬燈動畫效果

第基于WPF實現(xiàn)控件輪廓跑馬燈動畫效果一、創(chuàng)建EdgeLight.xaml代碼如下。

ResourceDictionary

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

xmlns:controls="clr-namespace:WPFDevelopers.Controls"

ResourceDictionary.MergedDictionaries

ResourceDictionary

Source="Basic/ControlBasic.xaml"/

/ResourceDictionary.MergedDictionaries

Style

TargetType="{x:Type

controls:EdgeLight}"

BasedOn="{StaticResource

ControlBasicStyle}"

Setter

Property="BorderBrush"

Value="{DynamicResource

PrimaryNormalSolidColorBrush}"/

Setter

Property="HorizontalContentAlignment"

Value="Center"/

Setter

Property="VerticalContentAlignment"

Value="Center"/

Setter

Property="HorizontalAlignment"

Value="Center"/

Setter

Property="VerticalAlignment"

Value="Center"/

Setter

Property="Padding"

Value="20"/

Setter

Property="Template"

Setter.Value

ControlTemplate

TargetType="{x:Type

controls:EdgeLight}"

ControlTemplate.Resources

Storyboard

x:Key="EdgeLightStoryboard"

DoubleAnimation

Duration="00:00:0.5"

To="1"

Storyboard.TargetName="PART_Top"

Storyboard.TargetProperty="ScaleX"/

DoubleAnimation

Duration="00:00:0.5"

BeginTime="00:00:0.5"

To="1"

Storyboard.TargetName="PART_Right"

Storyboard.TargetProperty="ScaleY"/

DoubleAnimation

Duration="00:00:.5"

BeginTime="00:00:01"

To="1"

Storyboard.TargetName="PART_Bottom"

Storyboard.TargetProperty="ScaleX"/

DoubleAnimation

Duration="00:00:.5"

BeginTime="00:00:01.5"

To="1"

Storyboard.TargetName="PART_Left"

Storyboard.TargetProperty="ScaleY"/

/Storyboard

/ControlTemplate.Resources

Grid

DockPanel

LastChildFill="False"

Rectangle

DockPanel.Dock="Top"

Height="{TemplateBinding

LineSize}"

Fill="{TemplateBinding

BorderBrush}"

Rectangle.RenderTransform

ScaleTransform

x:Name="PART_Top"

ScaleX="0"/

/Rectangle.RenderTransform

/Rectangle

Rectangle

DockPanel.Dock="Right"

Width="{TemplateBinding

LineSize}"

Fill="{TemplateBinding

BorderBrush}"

Rectangle.RenderTransform

ScaleTransform

x:Name="PART_Right"

ScaleY="0"/

/Rectangle.RenderTransform

/Rectangle

Rectangle

DockPanel.Dock="Bottom"

Height="{TemplateBinding

LineSize}"

Fill="{TemplateBinding

BorderBrush}"

RenderTransformOrigin="1,1"

Rectangle.RenderTransform

ScaleTransform

x:Name="PART_Bottom"

ScaleX="0"/

/Rectangle.RenderTransform

/Rectangle

Rectangle

DockPanel.Dock="Left"

Width="{TemplateBinding

LineSize}"

Fill="{TemplateBinding

BorderBrush}"

RenderTransformOrigin="1,1"

Rectangle.RenderTransform

ScaleTransform

x:Name="PART_Left"

ScaleY="0"/

/Rectangle.RenderTransform

/Rectangle

/DockPanel

ContentPresenter

HorizontalAlignment="{TemplateBinding

HorizontalContentAlignment}"

Margin="{TemplateBinding

Padding}"

VerticalAlignment="{TemplateBinding

VerticalContentAlignment}"/

/Grid

ControlTemplate.Triggers

Trigger

Property="IsAnimation"

Value="True"

Trigger.EnterActions

BeginStoryboard

x:Name="beginAnimation"

Storyboard="{StaticResource

EdgeLightStoryboard}"

/

/Trigger.EnterActions

Trigger.ExitActions

StopStoryboard

BeginStoryboardName="beginAnimation"

/

/Trigger.ExitActions

/Trigger

/ControlTemplate.Triggers

/ControlTemplate

/Setter.Value

/Setter

/Style

/ResourceDictionary

二、EdgeLight.cs代碼如下。

using

System;

using

System.Collections.Gener