WPF 实现火炬效果

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

欢迎转发、分享、点赞、在看，谢谢~。

—

效果预览

—

代码如下

一、FireControl.cs 代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;namespace WPFDevelopers.Controls
{public class FireControl : Control{static FireControl(){DefaultStyleKeyProperty.OverrideMetadata(typeof(FireControl), new FrameworkPropertyMetadata(typeof(FireControl)));}public bool IsStart{get { return (bool)GetValue(IsStartProperty); }set { SetValue(IsStartProperty, value); }}// Using a DependencyProperty as the backing store for IsStart.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IsStartProperty =DependencyProperty.Register("IsStart", typeof(bool), typeof(FireControl), new PropertyMetadata(default(bool)));}
}

二、OtherControl.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"><Style TargetType="controls:FireControl"><Setter Property="Background" Value="Transparent"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="controls:FireControl"><ControlTemplate.Resources><Storyboard x:Key="PART_Fire_Storyboard" RepeatBehavior="Forever" Duration="0:0:0.1"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Container" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"><LinearDoubleKeyFrame Value="-1" KeyTime="0:0:0" /><LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.2" /><LinearDoubleKeyFrame Value="-1" KeyTime="0:0:0.4" /><LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.6" /><LinearDoubleKeyFrame Value="-1" KeyTime="0:0:0.8" /><LinearDoubleKeyFrame Value="1" KeyTime="0:0:1" /></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Container" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)"><LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.0" /><LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:0.2" /><LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.4" /><LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:0.5" /><LinearDoubleKeyFrame Value="1" KeyTime="0:0:0.8" /><LinearDoubleKeyFrame Value="1.3" KeyTime="0:0:1" /></DoubleAnimationUsingKeyFrames></Storyboard></ControlTemplate.Resources><Viewbox><Grid x:Name="PART_Container"  Width="50" Height="50" RenderTransformOrigin="0,1"><Grid.RenderTransform><TransformGroup><RotateTransform CenterX="25" CenterY="25"/><ScaleTransform/></TransformGroup></Grid.RenderTransform><Grid VerticalAlignment="Bottom"><Path HorizontalAlignment="Center" VerticalAlignment="Bottom"  Stretch="Uniform" Height="50" Fill="OrangeRed"  Data="M563.308448 313.43188C495.439988 103.734035 591.338282 0 591.338282 0S276.514483 151.316058 183.199572 559.143951c-39.235011-56.442559-73.469923-87.328305-69.571197-77.222249 42.108942 109.060717-53.057357 157.906279-51.793818 272.879275 1.281557 114.954978 199.722422 246.534159 199.722422 246.53416l0.054055-0.164418a291.39766 291.39766 0 0 0 24.716706 16.349423 384.906268 384.906268 0 0 1-20.761672-26.948732c-21.511687-30.70331-36.61559-63.089087-36.964696-94.303668-0.677941-61.589057 26.252772-104.20927 44.982872-147.2867 16.23906-37.311549 26.345116-74.972205 6.810946-125.592576-3.076637-7.964122 17.63098 9.630821 45.750906 45.111254 54.850185-148.770963 108.878281-277.676668 108.878281-277.676668s1.391919 202.504009 70.028413 332.270091c64.424699 121.801961 60.56201 184.361758 60.56201 184.361757 117.189257-112.026992 156.385979-290.053039 156.385979-290.053039 42.602195 37.568311 67.098175 85.314752 80.884484 133.263899 29.036611 100.932178-30.95782 202.375628-32.295685 212.188885-0.567579 4.083414-1.610392 7.889796-2.488788 11.790774-4.101433 18.417031-11.479957 34.876817-21.640068 49.359086 11.00247-6.993382 21.439614-14.700741 31.489362-22.8473l0.054055 0.164418s182.895512-131.579181 184.159051-246.552178c1.263539-114.954978-93.900507-163.80054-51.793818-272.879275 3.644216-9.446133-24.185163 16.842676-57.724115 66.440504-33.210117-102.432208-54.485313-185.222135-165.46724-283.113712 0 0 20.522929 222.680084-97.434361 383.917509 0.020271 0.047298 41.451271-125.984476-26.435208-335.702591z" ><Path.Effect><DropShadowEffect BlurRadius="6" Color="OrangeRed" ShadowDepth="0"/></Path.Effect></Path><Path HorizontalAlignment="Center" VerticalAlignment="Bottom"  Stretch="Uniform" Margin="0,0,3,0" Height="44" Fill="Orange"  Data="M563.308448 313.43188C495.439988 103.734035 591.338282 0 591.338282 0S276.514483 151.316058 183.199572 559.143951c-39.235011-56.442559-73.469923-87.328305-69.571197-77.222249 42.108942 109.060717-53.057357 157.906279-51.793818 272.879275 1.281557 114.954978 199.722422 246.534159 199.722422 246.53416l0.054055-0.164418a291.39766 291.39766 0 0 0 24.716706 16.349423 384.906268 384.906268 0 0 1-20.761672-26.948732c-21.511687-30.70331-36.61559-63.089087-36.964696-94.303668-0.677941-61.589057 26.252772-104.20927 44.982872-147.2867 16.23906-37.311549 26.345116-74.972205 6.810946-125.592576-3.076637-7.964122 17.63098 9.630821 45.750906 45.111254 54.850185-148.770963 108.878281-277.676668 108.878281-277.676668s1.391919 202.504009 70.028413 332.270091c64.424699 121.801961 60.56201 184.361758 60.56201 184.361757 117.189257-112.026992 156.385979-290.053039 156.385979-290.053039 42.602195 37.568311 67.098175 85.314752 80.884484 133.263899 29.036611 100.932178-30.95782 202.375628-32.295685 212.188885-0.567579 4.083414-1.610392 7.889796-2.488788 11.790774-4.101433 18.417031-11.479957 34.876817-21.640068 49.359086 11.00247-6.993382 21.439614-14.700741 31.489362-22.8473l0.054055 0.164418s182.895512-131.579181 184.159051-246.552178c1.263539-114.954978-93.900507-163.80054-51.793818-272.879275 3.644216-9.446133-24.185163 16.842676-57.724115 66.440504-33.210117-102.432208-54.485313-185.222135-165.46724-283.113712 0 0 20.522929 222.680084-97.434361 383.917509 0.020271 0.047298 41.451271-125.984476-26.435208-335.702591z"><Path.Effect><DropShadowEffect BlurRadius="10" Color="Orange" ShadowDepth="0"/></Path.Effect></Path><Path HorizontalAlignment="Center" VerticalAlignment="Bottom"  Stretch="Uniform" Margin="0,0,3,0" Height="38" Fill="Gold"  Data="M563.308448 313.43188C495.439988 103.734035 591.338282 0 591.338282 0S276.514483 151.316058 183.199572 559.143951c-39.235011-56.442559-73.469923-87.328305-69.571197-77.222249 42.108942 109.060717-53.057357 157.906279-51.793818 272.879275 1.281557 114.954978 199.722422 246.534159 199.722422 246.53416l0.054055-0.164418a291.39766 291.39766 0 0 0 24.716706 16.349423 384.906268 384.906268 0 0 1-20.761672-26.948732c-21.511687-30.70331-36.61559-63.089087-36.964696-94.303668-0.677941-61.589057 26.252772-104.20927 44.982872-147.2867 16.23906-37.311549 26.345116-74.972205 6.810946-125.592576-3.076637-7.964122 17.63098 9.630821 45.750906 45.111254 54.850185-148.770963 108.878281-277.676668 108.878281-277.676668s1.391919 202.504009 70.028413 332.270091c64.424699 121.801961 60.56201 184.361758 60.56201 184.361757 117.189257-112.026992 156.385979-290.053039 156.385979-290.053039 42.602195 37.568311 67.098175 85.314752 80.884484 133.263899 29.036611 100.932178-30.95782 202.375628-32.295685 212.188885-0.567579 4.083414-1.610392 7.889796-2.488788 11.790774-4.101433 18.417031-11.479957 34.876817-21.640068 49.359086 11.00247-6.993382 21.439614-14.700741 31.489362-22.8473l0.054055 0.164418s182.895512-131.579181 184.159051-246.552178c1.263539-114.954978-93.900507-163.80054-51.793818-272.879275 3.644216-9.446133-24.185163 16.842676-57.724115 66.440504-33.210117-102.432208-54.485313-185.222135-165.46724-283.113712 0 0 20.522929 222.680084-97.434361 383.917509 0.020271 0.047298 41.451271-125.984476-26.435208-335.702591z"><Path.Effect><DropShadowEffect BlurRadius="10" Color="Gold" ShadowDepth="0"/></Path.Effect></Path><Path HorizontalAlignment="Center" VerticalAlignment="Bottom"  Stretch="Uniform" Height="32" Margin="0,0,3,0" Fill="LightYellow"  Data="M563.308448 313.43188C495.439988 103.734035 591.338282 0 591.338282 0S276.514483 151.316058 183.199572 559.143951c-39.235011-56.442559-73.469923-87.328305-69.571197-77.222249 42.108942 109.060717-53.057357 157.906279-51.793818 272.879275 1.281557 114.954978 199.722422 246.534159 199.722422 246.53416l0.054055-0.164418a291.39766 291.39766 0 0 0 24.716706 16.349423 384.906268 384.906268 0 0 1-20.761672-26.948732c-21.511687-30.70331-36.61559-63.089087-36.964696-94.303668-0.677941-61.589057 26.252772-104.20927 44.982872-147.2867 16.23906-37.311549 26.345116-74.972205 6.810946-125.592576-3.076637-7.964122 17.63098 9.630821 45.750906 45.111254 54.850185-148.770963 108.878281-277.676668 108.878281-277.676668s1.391919 202.504009 70.028413 332.270091c64.424699 121.801961 60.56201 184.361758 60.56201 184.361757 117.189257-112.026992 156.385979-290.053039 156.385979-290.053039 42.602195 37.568311 67.098175 85.314752 80.884484 133.263899 29.036611 100.932178-30.95782 202.375628-32.295685 212.188885-0.567579 4.083414-1.610392 7.889796-2.488788 11.790774-4.101433 18.417031-11.479957 34.876817-21.640068 49.359086 11.00247-6.993382 21.439614-14.700741 31.489362-22.8473l0.054055 0.164418s182.895512-131.579181 184.159051-246.552178c1.263539-114.954978-93.900507-163.80054-51.793818-272.879275 3.644216-9.446133-24.185163 16.842676-57.724115 66.440504-33.210117-102.432208-54.485313-185.222135-165.46724-283.113712 0 0 20.522929 222.680084-97.434361 383.917509 0.020271 0.047298 41.451271-125.984476-26.435208-335.702591z"><Path.Effect><DropShadowEffect BlurRadius="10" Color="LightYellow" ShadowDepth="0"/></Path.Effect></Path></Grid></Grid></Viewbox><ControlTemplate.Triggers><Trigger Property="IsStart" Value="True"><Trigger.EnterActions><BeginStoryboard Storyboard="{StaticResource PART_Fire_Storyboard}" x:Name="part_fire_storyboard"/></Trigger.EnterActions><Trigger.ExitActions><StopStoryboard BeginStoryboardName="part_fire_storyboard"/></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>
</ResourceDictionary>

三、OtherControlExample.xaml 代码如下

<UserControl x:Class="WPFDevelopers.Samples.ExampleViews.OtherControlExample"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><Border HorizontalAlignment="Center" VerticalAlignment="Center"Background="{StaticResource BlackSolidColorBrush}"Height="200" Width="200"><StackPanel Orientation="Vertical" VerticalAlignment="Bottom"Margin="0,10"><wpfdev:FireControl IsStart="True" Width="100" Height="100" Opacity="0.8"/><Grid Width="100" Height="60"><Path Data="M495.746032 859.654321l-7.223986-169.763668c-3.611993 0-7.223986-1.805996-12.641975-3.611993l10.835978 155.315696c0 7.223986 3.611993 14.447972 9.029983 18.059965zM530.059965 691.696649c-1.805996-1.805996-12.641975 1.805996-32.507937 0l5.41799 171.569665c3.611993 1.805996 5.417989 1.805996 9.029982 1.805996 5.417989 0 9.029982-1.805996 14.447972-3.611993 5.417989-111.971781 5.417989-167.957672 3.611993-169.763668z" Fill="#FFB938" Stretch="Fill"></Path><Path Data="M502.970018 863.266314l-5.41799-171.569665c-1.805996 0-5.417989 0-9.029982-1.805996l7.223986 169.763668c1.805996 1.805996 3.611993 3.611993 7.223986 3.611993z" Fill="#FFEA8B" Stretch="Fill"></Path><Path Data="M362.102293 572.500882h281.73545c-14.447972 77.657848-61.40388 115.583774-140.867725 115.583774s-126.419753-37.925926-140.867725-111.971781" Fill="#F49B1E" Stretch="Fill"></Path><Path Data="M358.4903 572.500882H573.40388c0 81.269841-30.70194 119.195767-93.911817 117.389771s-102.941799-43.343915-121.001763-117.389771z" Fill="#FFB938" Stretch="Fill"></Path><Path Data="M398.222222 572.500882c5.417989 36.119929 10.835979 59.597884 18.059965 72.239859 10.835979 18.059965 28.895944 37.925926 66.821869 43.343915h1.805997c0-1.805996-10.835979-7.223986-21.671958-16.253968-7.223986-7.223986-12.641975-18.059965-18.059964-30.70194-7.223986-12.641975-10.835979-34.313933-12.641976-68.627866h-34.313933z" Fill="#FFEA8B" Stretch="Fill"></Path></Grid></StackPanel></Border></Grid>
</UserControl>

源码地址

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857

Github：https://github.com/yanjinhuagood

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者出处 https://github.com/yanjinhuagood