基于WPF實現(xiàn)控件輪廓跑馬燈動畫效果
更新時間：2022年08月08日 15:37:48 作者：驚鏵
這篇文章主要介紹了如何利用WPF實現(xiàn)控件輪廓跑馬燈動畫效果，文中的示例代碼講解詳細(xì)，對我們學(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ù)覽
到此這篇關(guān)于基于WPF實現(xiàn)控件輪廓跑馬燈動畫效果的文章就介紹到這了,更多相關(guān)WPF跑馬燈動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
C#結(jié)合JavaScript實現(xiàn)多文件上傳功能
在許多應(yīng)用場景里,多文件上傳是一項比較實用的功能,本文主要為大家詳細(xì)介紹了C#如何結(jié)合JavaScript實現(xiàn)多文件上傳功能,感興趣的小伙伴可以了解下2023-12-12
這篇文章主要介紹了C#實現(xiàn)獲取文件夾大小的方法,實例分析了兩種獲取方法,涉及C#針對文件夾操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
索引器允許類或者結(jié)構(gòu)的實例按照與數(shù)組相同的方式進(jìn)行索引。索引器類似于屬性，不同之處在于他們的訪問采用參數(shù)。本文講解了c#的具體使用方法，感興趣的朋友可以了解下2021-05-05
C#使用遠(yuǎn)程服務(wù)調(diào)用框架Apache Thrift
這篇文章介紹了C#使用遠(yuǎn)程服務(wù)調(diào)用框架Apache Thrift的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
關(guān)于C#中yield關(guān)鍵字的深入解析
這篇文章主要給大家介紹了關(guān)于C#中yield關(guān)鍵字的深入解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用C#具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了C#設(shè)計模式之觀察者模式實例講解,本文詳細(xì)講解了觀察者模式的定義、優(yōu)缺點、代碼實例等,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了c#轉(zhuǎn)義字符串中的所有正則特殊字符，大家可以參考使用2013-12-12
本文主要介紹了C#?WPF調(diào)用QT窗口的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了c#實現(xiàn)的操作oracle通用類,用來操作oracle數(shù)據(jù)庫十分的方便,需要的朋友可以參考下2014-08-08
在unity腳本中控制Inspector面板的參數(shù)操作
這篇文章主要介紹了在unity腳本中控制Inspector面板的參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-04-04