基于WPF实现控件轮廓跑马灯动画效果
作者:驚鏵 时间:2022-05-03 20:10:08
代码如下
一、创建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>
效果预览
来源:https://mp.weixin.qq.com/s/_OPUZAR3CiNp8WSkZU7kog
标签:WPF,控件,轮廓,跑马灯,动画
0
投稿
猜你喜欢
springcloud-gateway整合jwt+jcasbin实现权限控制的详细过程
2023-11-20 12:57:09
Java类之间的关系图_动力节点Java学院整理
2022-07-31 23:03:46
SpringMVC RESTFul实战案例访问首页
2022-03-12 00:21:01
C#配置文件Section节点处理总结
2022-09-21 06:29:08
SpringCloud Finchley+Spring Boot 2.0 集成Consul的方法示例(1.2版本)
2023-09-02 13:07:36
浅谈Java中Lambda表达式的相关操作
2023-09-17 12:00:58
C#实现SMTP邮件附件发送功能详解
2022-08-14 10:09:38
mybatis日志打印的两款IDEA插件推荐
2022-01-12 07:55:52
java多次嵌套循环查询数据库导致代码中数据处理慢的解决
2023-10-28 22:17:50
SSH框架网上商城项目第22战之银行图标以及支付页面显示
2022-02-18 19:34:03
Spring Security实现基于RBAC的权限表达式动态访问控制的操作方法
2023-11-29 16:03:25
JVM代码缓存区CodeCache原理及用法解析
2023-08-09 06:02:29
冒泡排序算法原理及JAVA实现代码
2022-08-13 10:30:40
Java 动态数组的实现示例
2022-02-27 07:05:25
java基础的详细了解第六天
2021-11-05 16:18:49
C# 异步多线程入门基础
2022-01-19 05:23:05
Java Maven settings.xml中私有仓库配置详解
2022-02-19 15:36:50
springboot2.2 集成 activity6实现请假流程(示例详解)
2022-09-18 08:54:21
在项目中直接使用hystrix的流程分析
2021-10-22 01:55:21
Maven中央仓库发布的实现方法
2023-12-09 07:15:06