基于WPF实现控件轮廓跑马灯动画效果

代码如下
一、创建EdgeLight.xaml代码如下。
<ResourceDictionaryxmlns="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>
<ResourceDictionarySource="Basic/ControlBasic.xaml"/>
</ResourceDictionary.MergedDictionaries>

<StyleTargetType="{x:Typecontrols:EdgeLight}"BasedOn="{StaticResourceControlBasicStyle}">
<SetterProperty="BorderBrush"Value="{DynamicResourcePrimaryNormalSolidColorBrush}"/>
<SetterProperty="HorizontalContentAlignment"Value="Center"/>
<SetterProperty="VerticalContentAlignment"Value="Center"/>
<SetterProperty="HorizontalAlignment"Value="Center"/>
<SetterProperty="VerticalAlignment"Value="Center"/>
<SetterProperty="Padding"Value="20"/>
<SetterProperty="Template">
<Setter.Value>
<ControlTemplateTargetType="{x:Typecontrols:EdgeLight}">
<ControlTemplate.Resources>
<Storyboardx:Key="EdgeLightStoryboard">
<DoubleAnimationDuration="00:00:0.5"
To="1"
Storyboard.TargetName="PART_Top"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimationDuration="00:00:0.5"
BeginTime="00:00:0.5"
To="1"
Storyboard.TargetName="PART_Right"
Storyboard.TargetProperty="ScaleY"/>
<DoubleAnimationDuration="00:00:.5"
BeginTime="00:00:01"
To="1"
Storyboard.TargetName="PART_Bottom"
Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimationDuration="00:00:.5"
BeginTime="00:00:01.5"
To="1"
Storyboard.TargetName="PART_Left"
Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<DockPanelLastChildFill="False">
<RectangleDockPanel.Dock="Top"Height="{TemplateBindingLineSize}"Fill="{TemplateBindingBorderBrush}">
<Rectangle.RenderTransform>
<ScaleTransformx:Name="PART_Top"ScaleX="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<RectangleDockPanel.Dock="Right"Width="{TemplateBindingLineSize}"Fill="{TemplateBindingBorderBrush}">
<Rectangle.RenderTransform>
<ScaleTransformx:Name="PART_Right"ScaleY="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<RectangleDockPanel.Dock="Bottom"Height="{TemplateBindingLineSize}"Fill="{TemplateBindingBorderBrush}"
RenderTransformOrigin="1,1">
<Rectangle.RenderTransform>
<ScaleTransformx:Name="PART_Bottom"ScaleX="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<RectangleDockPanel.Dock="Left"Width="{TemplateBindingLineSize}"Fill="{TemplateBindingBorderBrush}"
RenderTransformOrigin="1,1">
<Rectangle.RenderTransform>
<ScaleTransformx:Name="PART_Left"ScaleY="0"/>
</Rectangle.RenderTransform>
</Rectangle>
</DockPanel>
<ContentPresenterHorizontalAlignment="{TemplateBindingHorizontalContentAlignment}"
Margin="{TemplateBindingPadding}"
VerticalAlignment="{TemplateBindingVerticalContentAlignment}"/>
</Grid>

<ControlTemplate.Triggers>
<TriggerProperty="IsAnimation"Value="True">
<Trigger.EnterActions>
<BeginStoryboardx:Name="beginAnimation"
Storyboard="{StaticResourceEdgeLightStoryboard}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboardBeginStoryboardName="beginAnimation"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>
二、EdgeLight.cs代码如下。
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Animation;

namespaceWPFDevelopers.Controls
{
publicclassEdgeLight:ContentControl
{
publicboolIsAnimation
{
get{return(bool)GetValue(IsAnimationProperty);}
set{SetValue(IsAnimationProperty,value);}
}

publicstaticreadonlyDependencyPropertyIsAnimationProperty=
DependencyProperty.Register("IsAnimation",typeof(bool),typeof(EdgeLight),newPropertyMetadata(false));

publicdoubleLineSize
{
get{return(double)GetValue(LineSizeProperty);}
set{SetValue(LineSizeProperty,value);}
}

publicstaticreadonlyDependencyPropertyLineSizeProperty=
DependencyProperty.Register("LineSize",typeof(double),typeof(EdgeLight),newPropertyMetadata(1.0d));

staticEdgeLight()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(EdgeLight),newFrameworkPropertyMetadata(typeof(EdgeLight)));
}

}
}
三、新建EdgeLightExample.cs代码如下。
<UserControlx: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>
<UniformGridColumns="2">
<wpfdev:EdgeLightIsAnimation="{BindingElementName=myCheckBox,Path=IsChecked}"Margin="10"LineSize="2">
<CheckBoxContent="EdgeLight"x:Name="myCheckBox"/>
</wpfdev:EdgeLight>
<wpfdev:EdgeLightIsAnimation="{BindingElementName=myToggleButton,Path=IsChecked}"Margin="10"
BorderBrush="OrangeRed"LineSize="4">
<ToggleButtonContent="EdgeLight2"x:Name="myToggleButton"/>
</wpfdev:EdgeLight>
</UniformGrid>
</Grid>
</UserControl>

效果预览

到此这篇关于基于WPF实现控件轮廓跑马灯动画效果的文章就介绍到这了,更多相关WPF跑马灯动画内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！