视频地址：https://www.bilibili.com/video/BV1T94y1X7cn?p=5&vd_source=a4e06be300e655612460fd5149552558
动画比较重要
<UserControl x:Class="WpfComponetLibrary.CoolingPanic" 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:WpfComponetLibrary" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Border BorderThickness="1" Name="frame"> <!--动画--> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState Name="RunState"> <Storyboard> <!--添加风扇旋转动画--> <DoubleAnimation Duration="0:0:1" From="0" To="-360" RepeatBehavior="Forever" Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle"/> <ColorAnimationUsingKeyFrames Storyboard.TargetName="gsGreen" Storyboard.TargetProperty="Color"> <DiscreteColorKeyFrame Value="Green" KeyTime="0" /> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState Name="StopState" /> </VisualStateGroup> <VisualStateGroup> <VisualState Name="FaultState"> <Storyboard> <!--错误指示灯--> <ColorAnimationUsingKeyFrames Storyboard.TargetName="gsRed" Storyboard.TargetProperty="Color" RepeatBehavior="Forever"> <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:0.5" /> <DiscreteColorKeyFrame Value="Gray" KeyTime="0:0:1" /> </ColorAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState Name="NormalState" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Viewbox VerticalAlignment="Center" HorizontalAlignment="Center"> <Canvas Width="205" Height="245" Margin="5"> <!--顶部多边形--> <Polygon Points="0,70 40,10 205,10 180,70" Fill="#fff"></Polygon> <!--弧线--> <Path Canvas.Left="50" Canvas.Top="20" Data="M0 0A60 15 0 0 0 120 0L120 25A60 15 0 0 1 0 25"> <Path.Fill> <LinearGradientBrush EndPoint="1,0" StartPoint="0,0"> <GradientStop Color="#FFD6D6D6" Offset="0" /> <GradientStop Color="#FFFFFF" Offset="0.5" /> <GradientStop Color="#FFD6D6D6" Offset="1" /> </LinearGradientBrush> </Path.Fill> </Path> <!--封顶弧线--> <Ellipse Width="120" Height="30" Fill="#CCC" Canvas.Top="10" Canvas.Left="50" /> <!--扇叶--> <Border Canvas.Left="54" Canvas.Top="-30"> <Viewbox Width="110" Height="110" RenderTransformOrigin="0.5,0.5"> <Viewbox.RenderTransform> <TransformGroup> <!--旋转角度--> <RotateTransform Angle="0" x:Name="rt" /> <!--缩放角度--> <ScaleTransform ScaleY="0.25" /> </TransformGroup> </Viewbox.RenderTransform> <Path Fill="White" Data="M728.822857 476.4c73.074286 8.342857 105.965714 48.8 164.571429 48.8 116.411429 0 154.662857-131.097143 116.148571-247.394286C977.142857 179.931429 876.457143 87.302857 790.731429 102.571429 647.782857 128 543.931429 251.828571 518.205714 425.782857a6 6 0 0 1-5.988571 5.108572h-0.331429a80.582857 80.582857 0 0 0-13.165714 1.142857 5.988571 5.988571 0 0 1-6.662857-4.24c-11.428571-38.4-21.942857-77.462857-15.657143-132.571429 8.342857-73.074286 48.8-105.965714 48.8-164.571428C525.2 14.205714 394.102857-24 277.805714 14.468571 179.931429 46.857143 87.302857 147.542857 102.571429 233.268571 128 376.205714 251.805714 480.057143 425.725714 505.794286a6.057143 6.057143 0 0 1 5.2 5.988571v0.068572a80.72 80.72 0 0 0 1.142857 13.382857 5.954286 5.954286 0 0 1-4.182857 6.674285c-38.445714 11.428571-77.531429 21.988571-132.685714 15.691429-73.074286-8.342857-105.965714-48.8-164.571429-48.8-116.422857 0-154.628571 131.097143-116.16 247.394286C46.857143 844.068571 147.542857 936.697143 233.268571 921.428571c143.005714-25.485714 246.857143-149.36 272.56-323.428571a6.08 6.08 0 0 1 6-5.211429 80.72 80.72 0 0 0 13.28-1.142857 5.942857 5.942857 0 0 1 6.662858 4.182857c11.497143 38.525714 22.08 77.714286 15.771428 132.937143-8.342857 73.074286-48.8 105.965714-48.8 164.571429 0 116.411429 131.097143 154.662857 247.394286 116.148571 97.931429-32.342857 190.56-133.028571 175.291428-218.754285-25.485714-143.028571-149.382857-246.857143-323.428571-272.571429a5.988571 5.988571 0 0 1-5.12-5.988571v-0.32a79.611429 79.611429 0 0 0-1.074286-13.085715 5.965714 5.965714 0 0 1 4.228572-6.628571c38.445714-11.474286 77.565714-22.034286 132.788571-15.737143z m-203.325714 73.702857c-29.028571 9.508571-55.782857-12.868571-54.011429-40.88a40.651429 40.651429 0 0 1 37.771429-37.771428c28.011429-1.771429 50.388571 24.982857 40.88 54.011428a38.64 38.64 0 0 1-24.64 24.64z"></Path> </Viewbox> </Border> <!--外壳正面矩形--> <Grid Width="180" Height="180" Background="LightGray" Canvas.Top="70"> <Border VerticalAlignment="Top" Height="140" BorderThickness="10"> <Border.Background> <DrawingBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="1 0 25 1"> <!--画笔--> <DrawingBrush.Drawing> <GeometryDrawing> <GeometryDrawing.Pen> <Pen Brush="#EEE" /> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathFigure> <LineSegment Point="10,0" /> <LineSegment Point="10,10" /> </PathFigure> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Border.Background> </Border> <Grid VerticalAlignment="Bottom" Height="45" Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Border Background="#AAA" Margin="2" CornerRadius="8" /> <Border Background="#AAA" Margin="2" CornerRadius="8" Grid.Column="1" /> </Grid> </Grid> <!--指示灯点--> <Border Width="18" Height="18" CornerRadius="10" Canvas.Left="155" Canvas.Top="85"> <Border.Background> <!--渐变--> <RadialGradientBrush> <GradientStop Color="gray" Offset="0.5" x:Name="gsGreen" /> <GradientStop Color="White" /> </RadialGradientBrush> </Border.Background> </Border> <Border Width="18" Height="18" CornerRadius="10" Canvas.Left="155" Canvas.Top="110"> <Border.Background> <RadialGradientBrush> <GradientStop Color="gray" Offset="0.5" x:Name="gsRed" /> <GradientStop Color="White" /> </RadialGradientBrush> </Border.Background> </Border> <!--外壳斜切矩形--> <Grid Width="180" Height="180" Background="LightGray" Canvas.Top="70" Canvas.Left="180"> <Grid.ColumnDefinitions> <ColumnDefinition Width="29*"/> <ColumnDefinition Width="7*"/> </Grid.ColumnDefinitions> <Grid.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="0.139" /> <SkewTransform AngleY="-67.4"/> </TransformGroup> </Grid.RenderTransform> <Border VerticalAlignment="Top" Height="140" BorderThickness="10" Grid.ColumnSpan="2"> <Border.Background> <DrawingBrush TileMode="Tile" ViewportUnits="Absolute" Viewport="1 0 25 1"> <!--画笔--> <DrawingBrush.Drawing> <GeometryDrawing> <GeometryDrawing.Pen> <Pen Brush="#EEE" /> </GeometryDrawing.Pen> <GeometryDrawing.Geometry> <PathGeometry> <PathFigure> <LineSegment Point="10,0" /> <LineSegment Point="10,10" /> </PathFigure> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingBrush.Drawing> </DrawingBrush> </Border.Background> </Border> <Grid VerticalAlignment="Bottom" Height="45" Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Border Background="#AAA" Margin="2" CornerRadius="8" /> <Border Background="#AAA" Margin="2" CornerRadius="8" Grid.Column="1" /> </Grid> </Grid> </Canvas> </Viewbox> </Border> </UserControl>
后台代码
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.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfComponetLibrary { /// <summary> /// CoolingTower.xaml 的交互逻辑 /// </summary> public partial class CoolingPanic : UserControl { public CoolingPanic() { InitializeComponent(); } public bool IsRunning { get { return (bool)GetValue(IsRunningProperty); } set { SetValue(IsRunningProperty, value); } } public static readonly DependencyProperty IsRunningProperty = DependencyProperty.Register("IsRunning", typeof(bool), typeof(CoolingPanic), new PropertyMetadata(default(bool), new PropertyChangedCallback(OnRunStateChanged))); private static void OnRunStateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { bool state = (bool)e.NewValue; VisualStateManager.GoToState(d as CoolingPanic, state ? "RunState" : "StopState", false); } public bool IsFault { get { return (bool)GetValue(IsFaultProperty); } set { SetValue(IsFaultProperty, value); } } // Using a DependencyProperty as the backing store for IsRunning. This enables animation, styling, binding, etc... public static readonly DependencyProperty IsFaultProperty = DependencyProperty.Register("IsFault", typeof(bool), typeof(CoolingPanic), new PropertyMetadata(default(bool), new PropertyChangedCallback(OnFaultStateChanged))); private static void OnFaultStateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { bool state = (bool)e.NewValue; VisualStateManager.GoToState(d as CoolingPanic, state ? "FaultState" : "NormalState", false); } } }
界面引用
<Window x:Class="WpfApp2.MainWindow" 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:WpfApp2" xmlns:componet="clr-namespace:WpfComponetLibrary;assembly=WpfComponetLibrary" mc:Ignorable="d" Title="MainWindow" Height="450" Width="1260"> <Grid Background="Black"> <Canvas Background="Transparent" MouseWheel="Canvas_Mousewheel" MouseLeftButtonDown="Canvas_MouseleftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseMove="Canvas_MouseMove"> <Viewbox Canvas.Left="30" Canvas.Top="120" Name="mainView"> <Grid> <Polygon VerticalAlignment="Center" Fill="LightGray" Points="0,200 150,0 1000,0 1200 200 0,200" Stroke="LightGray" StrokeThickness="2"> </Polygon> <componet:CoolingPanic Width="90" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="125,0,0,100" IsRunning="True" /> <componet:CoolingPanic Width="90" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="100,0,0,60" IsFault="True"/> <componet:CoolingPanic Width="90" Height="100" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="75,0,0,10" /> </Grid> </Viewbox> </Canvas> </Grid> </Window>
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.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApp2 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } /// <summary> /// 视图缩放 /// </summary> /// <param name="sender"></param)// /// <param name="e"></param> private void Canvas_Mousewheel(object sender, MouseWheelEventArgs e) { //获取实际渲染的高度和宽度 var w = this.mainView.ActualHeight + e.Delta; var h = this.mainView.ActualHeight + e.Delta; if (w < 100) w = 500; if (h < 100) h = 100; this.mainView.Height = h; this.mainView.Width = w; //设置画板缩放的左边位置 this.mainView.SetValue(Canvas.LeftProperty, (this.RenderSize.Width - this.mainView.Width) / 2); } bool _isMoving = false; System.Windows.Point _point = new System.Windows.Point(0, 0); double _left = 0, _top = 0; private void Canvas_MouseleftButtonDown(object sender, MouseButtonEventArgs e) { _isMoving = true; _point = e.GetPosition(sender as Canvas); _left = double.Parse(this.mainView.GetValue(Canvas.LeftProperty).ToString()!); _top = double.Parse(this.mainView.GetValue(Canvas.TopProperty).ToString()!); } private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { _isMoving = false; } private void Canvas_MouseMove(object sender, MouseEventArgs e) { if (_isMoving) { System.Windows.Point currentPoint = e.GetPosition(sender as Canvas); this.mainView.SetValue(LeftProperty, _left + (currentPoint.X - _point.X)); this.mainView.SetValue(TopProperty, _top + (currentPoint.Y - _point.Y)); } } } }
效果
