来瞧瞧，WPF 炫酷走马灯!

来瞧瞧，WPF 炫酷走马灯!

控件名：SpotLight
作者：WPFDevelopersOrg
原文链接：    https://github.com/WPFDevelopersOrg/WPFDevelopers

• 框架使用大于等于.NET40；
  
• Visual Studio 2022;
  
• 项目使用 MIT 开源许可协议；
  
• 用Canvas做容器方便针对文本TextBlock做裁剪Clip动画操作；
  
• Canvas内部创建两个TextBlock；
  
• 第一个做为背景字体设置字体颜色为浅灰Foreground="#323232"，也可以通过依赖属性设置DefaultForeground；
  
• 第二个字体设置会彩虹色当聚光灯走到某个区域后并显示；
  
• Duration可设置动画的从左到右的时长，默认3秒；
  
• 根据字体的实际宽度ActualWidth做动画展示从左到右并循环Forever播放；
  

1）SpotLight.cs 代码如下；

1. using System;
2. using System.Windows;
3. using System.Windows.Controls;
4. using System.Windows.Media;
5. using System.Windows.Media.Animation;
7. namespace WPFDevelopers.Controls
8. {
9.     [TemplatePart(Name = TextBlockBottomTemplateName, Type = typeof(TextBlock))]
10.     [TemplatePart(Name = TextBlockTopTemplateName, Type = typeof(TextBlock))]
11.     [TemplatePart(Name = EllipseGeometryTemplateName, Type = typeof(EllipseGeometry))]
12.     public class SpotLight : Control
13.     {
14.         private const string TextBlockBottomTemplateName = "PART_TextBlockBottom";
15.         private const string TextBlockTopTemplateName = "PART_TextBlockTop";
16.         private const string EllipseGeometryTemplateName = "PART_EllipseGeometry";
18.         public static readonly DependencyProperty TextProperty =
19.             DependencyProperty.Register("Text", typeof(string), typeof(SpotLight),
20. <UniformGrid Rows="2" Background="#222222">
21.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
22.                           DefaultForeground="Crimson"
23.                           Foreground="Fuchsia"
24.                           Duration="00:00:05" />
25.         <wpfdev:SpotLight/>
26. </UniformGrid>new PropertyMetadata("WPFDevelopers"));
28.         public static readonly DependencyProperty DefaultForegroundProperty =
29.             DependencyProperty.Register("DefaultForeground", typeof(Brush), typeof(SpotLight),
30. <UniformGrid Rows="2" Background="#222222">
31.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
32.                           DefaultForeground="Crimson"
33.                           Foreground="Fuchsia"
34.                           Duration="00:00:05" />
35.         <wpfdev:SpotLight/>
36. </UniformGrid>new PropertyMetadata(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#323232"))));
39.         public static readonly DependencyProperty DurationProperty =
40.             DependencyProperty.Register("Duration", typeof(TimeSpan), typeof(SpotLight),
41. <UniformGrid Rows="2" Background="#222222">
42.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
43.                           DefaultForeground="Crimson"
44.                           Foreground="Fuchsia"
45.                           Duration="00:00:05" />
46.         <wpfdev:SpotLight/>
47. </UniformGrid>new PropertyMetadata(TimeSpan.FromSeconds(3)));
50.         private EllipseGeometry _ellipseGeometry;
51.         private TextBlock _textBlockBottom, _textBlockTop;
53.         static SpotLight()
54.         {
55.             DefaultStyleKeyProperty.OverrideMetadata(typeof(SpotLight),
56. <UniformGrid Rows="2" Background="#222222">
57.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
58.                           DefaultForeground="Crimson"
59.                           Foreground="Fuchsia"
60.                           Duration="00:00:05" />
61.         <wpfdev:SpotLight/>
62. </UniformGrid>new FrameworkPropertyMetadata(typeof(SpotLight)));
63.         }
65.       
66.         public TimeSpan Duration
67.         {
68.             get => (TimeSpan)GetValue(DurationProperty);
69.             set => SetValue(DurationProperty, value);
70.         }
71.         public Brush DefaultForeground
72.         {
73.             get => (Brush)GetValue(DefaultForegroundProperty);
74.             set => SetValue(DefaultForegroundProperty, value);
75.         }
77.         public string Text
78.         {
79.             get => (string)GetValue(TextProperty);
80.             set => SetValue(TextProperty, value);
81.         }
82.         
83.         public override void OnApplyTemplate()
84.         {
85.             base.OnApplyTemplate();
86.             _textBlockBottom = GetTemplateChild(TextBlockBottomTemplateName) as TextBlock;
87.             _textBlockTop = GetTemplateChild(TextBlockTopTemplateName) as TextBlock;
89.             _ellipseGeometry = GetTemplateChild(EllipseGeometryTemplateName) as EllipseGeometry;
90.             var center = new Point(FontSize / 2, FontSize / 2);
91.             _ellipseGeometry.RadiusX = FontSize;
92.             _ellipseGeometry.RadiusY = FontSize;
93.             _ellipseGeometry.Center = center;
94.             if (_textBlockBottom != null && _textBlockTop != null && _ellipseGeometry != null)
95. <UniformGrid Rows="2" Background="#222222">
96.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
97.                           DefaultForeground="Crimson"
98.                           Foreground="Fuchsia"
99.                           Duration="00:00:05" />
100.         <wpfdev:SpotLight/>
101. </UniformGrid>_textBlockTop.Loaded += _textBlockTop_Loaded;
102.         }
105.         private void _textBlockTop_Loaded(object sender, RoutedEventArgs e)
106.         {
107.             var doubleAnimation = new DoubleAnimation
108.             {
109. <UniformGrid Rows="2" Background="#222222">
110.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
111.                           DefaultForeground="Crimson"
112.                           Foreground="Fuchsia"
113.                           Duration="00:00:05" />
114.         <wpfdev:SpotLight/>
115. </UniformGrid>From = 0,
116. <UniformGrid Rows="2" Background="#222222">
117.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
118.                           DefaultForeground="Crimson"
119.                           Foreground="Fuchsia"
120.                           Duration="00:00:05" />
121.         <wpfdev:SpotLight/>
122. </UniformGrid>To = _textBlockTop.ActualWidth,
123. <UniformGrid Rows="2" Background="#222222">
124.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
125.                           DefaultForeground="Crimson"
126.                           Foreground="Fuchsia"
127.                           Duration="00:00:05" />
128.         <wpfdev:SpotLight/>
129. </UniformGrid>Duration = Duration
130.             };
132.             Storyboard.SetTarget(doubleAnimation, _textBlockTop);
133.             Storyboard.SetTargetProperty(doubleAnimation,
134. <UniformGrid Rows="2" Background="#222222">
135.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
136.                           DefaultForeground="Crimson"
137.                           Foreground="Fuchsia"
138.                           Duration="00:00:05" />
139.         <wpfdev:SpotLight/>
140. </UniformGrid>new PropertyPath("(UIElement.Clip).(EllipseGeometry.Transform).(TranslateTransform.X)"));
141.             var storyboard = new Storyboard
142.             {
143. <UniformGrid Rows="2" Background="#222222">
144.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
145.                           DefaultForeground="Crimson"
146.                           Foreground="Fuchsia"
147.                           Duration="00:00:05" />
148.         <wpfdev:SpotLight/>
149. </UniformGrid>RepeatBehavior = RepeatBehavior.Forever,
150. <UniformGrid Rows="2" Background="#222222">
151.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
152.                           DefaultForeground="Crimson"
153.                           Foreground="Fuchsia"
154.                           Duration="00:00:05" />
155.         <wpfdev:SpotLight/>
156. </UniformGrid>AutoReverse = true
157.             };
158.             storyboard.Children.Add(doubleAnimation);
159.             storyboard.Begin();
160.         }
161.     }
162. }

复制代码

2）SpotLight.xaml 代码如下；

1. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2. <UniformGrid Rows="2" Background="#222222">
3.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
4.                           DefaultForeground="Crimson"
5.                           Foreground="Fuchsia"
6.                           Duration="00:00:05" />
7.         <wpfdev:SpotLight/>
8. </UniformGrid>    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
9. <UniformGrid Rows="2" Background="#222222">
10.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
11.                           DefaultForeground="Crimson"
12.                           Foreground="Fuchsia"
13.                           Duration="00:00:05" />
14.         <wpfdev:SpotLight/>
15. </UniformGrid>    xmlns:controls="clr-namespace:WPFDevelopers.Controls">
16.    
17.     <ResourceDictionary.MergedDictionaries>
18.         <ResourceDictionary Source="Basic/ControlBasic.xaml"/>
19.     </ResourceDictionary.MergedDictionaries>
20.     <LinearGradientBrush x:Key="RainbowBrush" EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0">
21.         <GradientStop Color="#FF9C1031" Offset="0.1"/>
22.         <GradientStop Color="#FFBE0E20" Offset="0.2"/>
23.         <GradientStop Color="#FF9C12AC" Offset="0.7"/>
24.         <GradientStop Color="#FF0A8DC3" Offset="0.8"/>
25.         <GradientStop Color="#FF1AEBCC" Offset="1"/>
26.     </LinearGradientBrush>
27.    
29. </ResourceDictionary>

复制代码

3）SpotLightExample.xaml代码如下如何使用；

1. <UniformGrid Rows="2" Background="#222222">
2.         <wpfdev:SpotLight FontSize="50" Text="YanJinHua"
3.                           DefaultForeground="Crimson"
4.                           Foreground="Fuchsia"
5.                           Duration="00:00:05" />
6.         <wpfdev:SpotLight/>
7. </UniformGrid>

复制代码

SpotLight.cs|Github
SpotLight.cs|码云
SpotLight.xaml|Github
SpotLight.xaml|码云

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！