WPF实现聚光灯效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

WPF开发者QQ群： 340500857 | 微信群 -> 进入公众号主页加入组织

前言

效果仿照 CSS聚光灯效果

实现思路：

1. 设置底部Canvas背景色 #222222 。

2. 准备两个 TextBlock 控件在同一位置。

3. 设置底部 TextBlock 字体颜色Foreground="#323232"。

4. 设置上层 TextBlock 字体颜色为渐变色。

5. 设置上层 TextBlock.Clip 针对 EllipseGeometry 做 TranslateTransform 的X轴移动动画。

6. DoubleAnimation的To值为上层或者下层控件的ActualWidth获取此元素的呈现宽度。

7. 故事板初始化 Storyboard RepeatBehavior =RepeatBehavior.Forever,AutoReverse = true。

效果预览（更多效果请下载源码体验）

一、SpotLight.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
{
[TemplatePart(Name = TextBlockBottomTemplateName, Type = typeof(TextBlock))]
[TemplatePart(Name = TextBlockTopTemplateName, Type = typeof(TextBlock))]
[TemplatePart(Name = EllipseGeometryTemplateName, Type = typeof(EllipseGeometry))]
public class SpotLight : Control
{
private const string TextBlockBottomTemplateName = "PART_TextBlockBottom";
private const string TextBlockTopTemplateName = "PART_TextBlockTop";
private const string EllipseGeometryTemplateName = "PART_EllipseGeometry";
private TextBlock _textBlockBottom, _textBlockTop;
private EllipseGeometry _ellipseGeometry;
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
} public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(SpotLight), new PropertyMetadata("WPFDevelopers"));
static SpotLight()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(SpotLight), new FrameworkPropertyMetadata(typeof(SpotLight)));
}
public SpotLight()
{
this.Loaded += SpotLight_Loaded;
} private void SpotLight_Loaded(object sender, RoutedEventArgs e)
{
Canvas.SetLeft(_textBlockBottom, ActualWidth / 3);
Canvas.SetTop(_textBlockBottom, ActualHeight / 3);
Canvas.SetLeft(_textBlockTop, ActualWidth / 3);
Canvas.SetTop(_textBlockTop, ActualHeight / 3);
} public override void OnApplyTemplate()
{
base.OnApplyTemplate();
_textBlockBottom = GetTemplateChild(TextBlockBottomTemplateName) as TextBlock;
_textBlockTop = GetTemplateChild(TextBlockTopTemplateName) as TextBlock; _ellipseGeometry = GetTemplateChild(EllipseGeometryTemplateName) as EllipseGeometry;
var center = new Point(FontSize/2, FontSize/2);
_ellipseGeometry.RadiusX = FontSize;
_ellipseGeometry.RadiusY = FontSize;
_ellipseGeometry.Center = center;
if (_textBlockBottom != null && _textBlockTop != null && _ellipseGeometry != null)
_textBlockTop.Loaded += _textBlockTop_Loaded;
} private void _textBlockTop_Loaded(object sender, RoutedEventArgs e)
{
var doubleAnimation = new DoubleAnimation
{
To = _textBlockTop.ActualWidth,
Duration = TimeSpan.FromSeconds(3)
}; Storyboard.SetTarget(doubleAnimation, _textBlockTop);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.Clip).(EllipseGeometry.Transform).(TranslateTransform.X)"));
var storyboard = new Storyboard
{
RepeatBehavior = RepeatBehavior.Forever,
AutoReverse = true
};
storyboard.Children.Add(doubleAnimation);
storyboard.Completed += (s, q) =>
{ };
storyboard.Begin();
}
}
}