WPF实现聚光灯效果
WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织
欢迎转发、分享、点赞、在看,谢谢~。
前言
效果仿照 CSS聚光灯效果
https://www.jianshu.com/p/6eae322e8e38
01
—
效果预览
更多效果请下载源码体验
一、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();}}
}
二、SpotLight.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:SpotLight}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Background" Value="#222222"/><Setter Property="FontSize" Value="60"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type controls:SpotLight}"><Canvas x:Name="PART_Canvas" Background="{TemplateBinding Background}"><TextBlock x:Name="PART_TextBlockBottom" Text="{TemplateBinding Text}"FontSize="{TemplateBinding FontSize}" FontFamily="Arial Black"FontWeight="Bold" Foreground="#323232"/><TextBlock x:Name="PART_TextBlockTop" Text="{TemplateBinding Text}"FontSize="{TemplateBinding FontSize}" FontFamily="Arial Black"FontWeight="Bold"><TextBlock.Foreground><LinearGradientBrush EndPoint="1,1" MappingMode="RelativeToBoundingBox" StartPoint="0,0"><GradientStop Color="#FF9C1031" Offset="0.1"/><GradientStop Color="#FFBE0E20" Offset="0.2"/><GradientStop Color="#FF9C12AC" Offset="0.7"/><GradientStop Color="#FF0A8DC3" Offset="0.8"/><GradientStop Color="#FF1AEBCC" Offset="1"/></LinearGradientBrush></TextBlock.Foreground><TextBlock.Clip><EllipseGeometry x:Name="PART_EllipseGeometry"><EllipseGeometry.Transform><TranslateTransform/></EllipseGeometry.Transform></EllipseGeometry></TextBlock.Clip></TextBlock></Canvas></ControlTemplate></Setter.Value></Setter>
</Style></ResourceDictionary>
三、SpotLightExample.Xaml 代码如下
<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.SpotLightExample"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"><UniformGrid Rows="2"><wpfdev:SpotLight FontSize="50" Text="YanJinHua"/><wpfdev:SpotLight/></UniformGrid>
</UserControl>
源码地址
github:https://github.com/yanjinhuagood/WPFDevelopers.git
gitee:https://gitee.com/yanjinhua/WPFDevelopers.git
WPF开发者QQ群: 340500857
blogs: https://www.cnblogs.com/yanjinhua
Github:https://github.com/yanjinhuagood
出处:https://www.cnblogs.com/yanjinhua
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
转载请著名作者 出处 https://github.com/yanjinhuagood
WPF实现聚光灯效果相关推荐
- element selection选中变颜色_Excel | 聚光灯效果(阅读模式)——改变当前行和列的颜色...
问题来源: 一位朋友说他经常做一些数据量很大的表格,问我能不能把工作表做成阅读模式,即鼠标点到哪个单元格,该单元格对应的行和列都同时变成一种颜色.这种模式能帮他快速准确定位和修改相应数据. 这种阅读模 ...
- WPF实现物理效果 拉一个小球
原文:WPF实现物理效果 拉一个小球 一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客:http://www.cnblogs.com/zhouyinhui/ar ...
- WPF 实现水纹效果
WPF 实现水纹效果 原文:WPF 实现水纹效果 鼠标滑过产生水纹,效果图如下: XMAL就放置了一个img标签 后台主要代码 窗体加载: private void Window_Loaded(obj ...
- cdr 表格自动填充文字_长期伏案于表格,查看数据时你需要一个聚光灯效果
[温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力! 天天与电脑.表格打交道的小伙伴们,对眼睛是个考验,尤其是看那种数据行.列非常多的表格,想要查看某个数据时,眼睛一盯不上,出 ...
- 聚光灯效果(css+html)
最终效果: 实现code: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
- 基于GLSL的聚光灯效果的绘制
体积光的绘制 写在前面的话: 这是基于openGL可编程管线的一次绘制实践,具体版本:openGL 3.3. 贴在前面的最终效果图: 对于上述图片的简述: 1. 被光束照到的墙面的漫反射与镜面反射都得 ...
- HTML+CSS实现聚光灯效果
聚光灯效果 HTML CSS 关于兼容 知识点 1.content 2.linear-gradient 3.background-clip 4.clip-path HTML <!DOCTYPE ...
- jQuery背景墙聚光灯效果
jQuery背景墙聚光灯效果 dreamweaver免费视频教程: 51RGB Dreamweaver板块 加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货! ...
- html聚光灯特效,jquery实现聚光灯效果的方法
本文实例讲述了jquery实现聚光灯效果的方法.分享给大家供大家参考.具体分析如下: 有时网站需要用jquery实现一种图片聚光灯特效,当鼠标滑过单组中的单个图标时,当前高亮,其它图标变暗的这种类似图 ...
最新文章
- 机房布线的最高境界……
- java Serializable 详解
- .Net+MySQL组合开发(二) 数据访问篇
- C++, ID、指针、handle (void *)的区别
- 几个功能强大的系统源码(机票分销、机票预订、OA、手机充值、wifi营销、网络超市、体检平台)...
- JQUERY解析XML IE8的兼容问题
- mysql将俩个SQL查询出来的不一样的结果横向拼接成一行数据
- linearlayout之margin和peddling
- 计算机管理说文件缺失lnk,Win10系统右键管理打不开提示Windows找不到文件Server manager.lnk如何解决...
- HTML基础知识点(二)
- 手工查杀威金病毒,完全恢复exe程序
- 民航订票管理系统设计
- 计算机专业ib选课,IB 课程里,总算发现一个貌似容易的学科了!
- STM32CubeMX全部版本下载地址
- Linux系统轻量级监控工具Linux dash的安装方法
- 动态内存分配(详解)
- appium-desktop Capability
- nant_NAnt和FxCopCmd今天我在NAnt和
- 套索回归 岭回归_使用kydavra套索选择器进行回归特征选择
- HKEY_LOCAL_MACHINE\Software\WOW6432Node