WPF+MVVM案例实战（九）- 霓虹灯字效果控件封装实现

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1、运行效果

2、主菜单与界面实现

1、主菜单

打开 Wpf_Examples 项目，在 MainWindow.xaml 中添加 霓虹灯字特效 按钮 ，在Views 文件夹下创建 NeonTextWindow.xaml 文件。菜单功能实现如下所示：

   <Button Width="120" Height="30" FontSize="18" Content="霓虹灯字特效" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=Content}" Margin="8"/>

 private void FunMenu(string obj){switch (obj){case "霓虹灯字特效":PopWindow(new NeonTextWindow());break;}}

2、霓虹灯字界面实现

NeonTextWindow.xaml 代码如下所示

<Window x:Class="Wpf_Examples.Views.NeonTextWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Wpf_Examples.Views"mc:Ignorable="d"Title="NeonTextWindow" Height="450" Width="800" Background="#2B2B2B"><Window.Resources><Style TargetType="{x:Type TextBlock}"><Setter Property="Text" Value="CSDN 程序员"/><Setter Property="FontSize" Value="90"/><Setter Property="FontFamily" Value="/Assets/Fonts/#方正兰亭黑Pro 简"/><Setter Property="Foreground" Value="White"/><Style.Triggers><EventTrigger RoutedEvent="Loaded"><EventTrigger.Actions><BeginStoryboard x:Name="textAnimate"><Storyboard><DoubleAnimation From="0.3" To="1.0" Storyboard.TargetProperty="(Effect).Opacity"Duration="00:00:02" RepeatBehavior="Forever"AutoReverse="True"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><EventTrigger RoutedEvent="Unloaded"><EventTrigger.Actions><StopStoryboard BeginStoryboardName="textAnimate"/></EventTrigger.Actions></EventTrigger></Style.Triggers></Style></Window.Resources><Grid HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="35" Color="Red" ShadowDepth="0"/></TextBlock.Effect></TextBlock><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="15" Color="Red" ShadowDepth="0"/></TextBlock.Effect></TextBlock><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="5" Color="White" ShadowDepth="0"/></TextBlock.Effect></TextBlock></Grid>
</Window>

3、字体资源获取

其实任意字体均可实现霓虹灯效果，只是效果的好与坏,本案例字体可最后的源代码中获取。

3、控件封装

1.创建自定义控件

在 UserControlLib 用户控件库中新增 NeonText.xaml 文件，代码实现如下：

代码如下（示例）：

<UserControl x:Class="UserControlLib.NeonText"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:UserControlLib"mc:Ignorable="d" x:Name="userControl"d:DesignHeight="450" d:DesignWidth="800"><UserControl.Resources><Style TargetType="{x:Type TextBlock}"><Setter Property="Text" Value="{Binding Text,ElementName=userControl}"/><Setter Property="FontSize" Value="{Binding FontSize,ElementName=userControl}"/><Setter Property="FontFamily" Value="{Binding FontFamily,ElementName=userControl}"/><Setter Property="Foreground" Value="{Binding Foreground,ElementName=userControl}"/><Style.Triggers><EventTrigger RoutedEvent="Loaded"><EventTrigger.Actions><BeginStoryboard x:Name="textAnimate"><Storyboard><DoubleAnimation From="0.3" To="1.0" Storyboard.TargetProperty="(Effect).Opacity"Duration="00:00:02" RepeatBehavior="Forever"AutoReverse="True"/></Storyboard></BeginStoryboard></EventTrigger.Actions></EventTrigger><EventTrigger RoutedEvent="Unloaded"><EventTrigger.Actions><StopStoryboard BeginStoryboardName="textAnimate"/></EventTrigger.Actions></EventTrigger></Style.Triggers></Style></UserControl.Resources><Grid HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="35" Color="{Binding GlowedColor,ElementName=userControl}" ShadowDepth="0"/></TextBlock.Effect></TextBlock><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="15" Color="{Binding GlowedColor,ElementName=userControl}" ShadowDepth="0"/></TextBlock.Effect></TextBlock><TextBlock><TextBlock.Effect><DropShadowEffect BlurRadius="5" Color="{Binding Foreground,ElementName=userControl}" ShadowDepth="0"/></TextBlock.Effect></TextBlock></Grid>
</UserControl>

2、依赖属性实现

这里，我们只要实现文本的依赖属性和霓虹灯的依赖属性实现即可，NeonText.cs 代码实现如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Navigation;namespace UserControlLib
{/// <summary>/// NeonText.xaml 的交互逻辑/// </summary>public partial class NeonText : UserControl{public NeonText(){InitializeComponent();}/// <summary>/// 文本信息/// </summary>public string Text{get { return (string)GetValue(TextProperty); }set { SetValue(TextProperty, value); }}public static readonly DependencyProperty TextProperty =DependencyProperty.Register("Text", typeof(string), typeof(NeonText), new PropertyMetadata(""));/// <summary>/// 霓虹灯颜色/// </summary>public Color GlowedColor{get { return (Color)GetValue(GlowedColorProperty); }set { SetValue(GlowedColorProperty, value); }}public static readonly DependencyProperty GlowedColorProperty =DependencyProperty.Register("GlowedColor", typeof(Color), typeof(NeonText), new PropertyMetadata(Colors.Red));}
}

3、封装控件使用

在 NeonTextWindow.xaml 中直接调用用户控件即可，代码如下：

<Window x:Class="Wpf_Examples.Views.NeonTextWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:uc="clr-namespace:UserControlLib;assembly=UserControlLib"xmlns:local="clr-namespace:Wpf_Examples.Views"mc:Ignorable="d"Title="NeonTextWindow" Height="450" Width="800" Background="#2B2B2B"><Grid><uc:NeonText Text="CSDN 程序员" FontSize="120" FontFamily="/Assets/Fonts/#方正兰亭黑Pro 简" Foreground="White" GlowedColor="Red"/></Grid>
</Window>

4、运行效果

4、源代码获取

CSDN下载链接：霓虹灯字效果控件封装实现