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

更新時(shí)間：2022年08月08日 15:37:48 作者：驚鏵

這篇文章主要介紹了如何利用WPF實(shí)現(xiàn)控件輪廓跑馬燈動(dòng)畫效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，需要的可以參考一下

代碼如下

一、創(chuàng)建EdgeLight.xaml代碼如下。

<ResourceDictionary?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????????????????xmlns:x="http://schemas.microsoft.com/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.Generic;
using?System.Linq;
using?System.Text;
using?System.Windows;
using?System.Windows.Controls;
using?System.Windows.Media;
using?System.Windows.Media.Animation;

namespace?WPFDevelopers.Controls
{
????public?class?EdgeLight:ContentControl
????{
????????public?bool?IsAnimation
????????{
????????????get?{?return?(bool)GetValue(IsAnimationProperty);?}
????????????set?{?SetValue(IsAnimationProperty,?value);?}
????????}

????????public?static?readonly?DependencyProperty?IsAnimationProperty?=
????????????DependencyProperty.Register("IsAnimation",?typeof(bool),?typeof(EdgeLight),?new?PropertyMetadata(false));



????????public?double?LineSize
????????{
????????????get?{?return?(double)GetValue(LineSizeProperty);?}
????????????set?{?SetValue(LineSizeProperty,?value);?}
????????}

????????public?static?readonly?DependencyProperty?LineSizeProperty?=
????????????DependencyProperty.Register("LineSize",?typeof(double),?typeof(EdgeLight),?new?PropertyMetadata(1.0d));


????????static?EdgeLight()
????????{
????????????DefaultStyleKeyProperty.OverrideMetadata(typeof(EdgeLight),?new?FrameworkPropertyMetadata(typeof(EdgeLight)));
????????}

???????

????}
}

三、新建EdgeLightExample.cs代碼如下。

<UserControl?x:Class="WPFDevelopers.Samples.ExampleViews.EdgeLightExample"
?????????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
?????????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
?????????????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"?
?????????????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"?
?????????????xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews"
?????????????xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"
?????????????mc:Ignorable="d"?
?????????????d:DesignHeight="450"?d:DesignWidth="800">
????<Grid>
????????<UniformGrid?Columns="2">
????????????<wpfdev:EdgeLight?IsAnimation="{Binding?ElementName=myCheckBox,Path=IsChecked}"?Margin="10"?LineSize="2">
????????????????<CheckBox?Content="EdgeLight"?x:Name="myCheckBox"/>
????????????</wpfdev:EdgeLight>
????????????<wpfdev:EdgeLight?IsAnimation="{Binding?ElementName=myToggleButton,Path=IsChecked}"?Margin="10"?
??????????????????????????????BorderBrush="OrangeRed"?LineSize="4">
????????????????<ToggleButton?Content="EdgeLight2"?x:Name="myToggleButton"/>
????????????</wpfdev:EdgeLight>
????????</UniformGrid>
????</Grid>
</UserControl>

效果預(yù)覽