WPF 制作便携小空调

今天看到群里一个小页面挺有意思的，就是这个：

https://ac.yunyoujun.cn/

于是想着用wpf也模仿一下嘿嘿，为了方便，也顾不上什么代码结构了。。。

看看效果吧：

代码不多，只有一个窗口，下面就直接看看代码：

窗体xaml:

<Window x:Class="AirCond.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:AirCond"ResizeMode="NoResize"WindowStyle="None"Topmost="True"AllowsTransparency="True"Background="Transparent"Width="300"SizeToContent="Height"mc:Ignorable="d"Title="MainWindow"><StackPanel><Border Height="120" MouseDown="Border_MouseDown" VerticalAlignment="Top" Background="#F8F8F8" Margin="10" CornerRadius="15 15 30 30"><Border.Effect><DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="#66ffffff"/></Border.Effect><Grid><local:IconFontButton x:Name="shutDownButton" Click="ShutDownClick" Geometry="{StaticResource ShutDownIcon}" HorizontalAlignment="Right" VerticalAlignment="Top" IconWidth="16" IconHeight="16" Margin="3" Foreground="Red"/><Image Width="40" Height="70" Source="/info.png" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top"/><Image x:Name="snow" Width="26" Height="32" Source="/snow.png" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 15 66 0"/><TextBlock x:Name="tempText" Text="{Binding Temp,StringFormat={}{0}°C}" HorizontalAlignment="Right" Margin="0 40 30 0" FontSize="33" FontWeight="Bold" FontFamily="{StaticResource Digital}" Foreground="Red"/><Border Height="1" Background="Gray" Margin="0 56 0 0" /><TextBlock Text="Powered by WPF"  Foreground="{StaticResource LinearBrush}" FontFamily="微软雅黑" FontSize="10" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0 0 0 35"/><TextBlock Text="新能源空调，靠爱发电" Foreground="{StaticResource LinearBrush}" Opacity="0.5" Padding="6" FontSize="14" TextAlignment="Center" FontFamily="微软雅黑" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></TextBlock></Grid></Border><Grid x:Name="windGrid" Height="60" Width="200" Visibility="Visible"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Border Grid.Column="0" Width="6" Height="50" RenderTransformOrigin="0.5,0.5" Background="#0BE8EB"><Border.RenderTransform><RotateTransform Angle="15"/></Border.RenderTransform></Border><Border Grid.Column="1" Width="6" Height="50" Background="#0BE8EB"/><Border Grid.Column="2" Width="6" Height="50" RenderTransformOrigin="0.5,0.5" Background="#0BE8EB"><Border.RenderTransform><RotateTransform Angle="-15"/></Border.RenderTransform></Border></Grid></StackPanel>
</Window>

窗体后台代码：

using System;
using System.ComponentModel;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;namespace AirCond
{public partial class MainWindow : Window,INotifyPropertyChanged{public MainWindow(){InitializeComponent();DataContext = this;MouseWheel += MainWindow_MouseWheel;}private void MainWindow_MouseWheel(object sender, MouseWheelEventArgs e){Temp += (e.Delta > 0 ? 1 : -1);}private int _temp=16;public int Temp{get { return _temp; }set { _temp = value;_temp = Math.Min(31, _temp);_temp = Math.Max(16, _temp);OnPropertyChanged(nameof(Temp)); }}private bool _isOpen=true;public bool IsOpen{get { return _isOpen; }set { _isOpen = value;OnPropertyChanged(nameof(IsOpen));SetUI();}}private void SetUI(){shutDownButton.Foreground = _isOpen ? Brushes.Red : Brushes.Gray;if (_isOpen){StartAnimationIn(snow);StartAnimationIn(windGrid);StartAnimationIn(tempText);}else{StartAnimationOut(snow);StartAnimationOut(windGrid);StartAnimationOut(tempText);}}private async void StartAnimationIn(FrameworkElement element, float seconds=0.5f){var sb = new Storyboard();var fadeIn = new DoubleAnimation{Duration = new Duration(TimeSpan.FromSeconds(seconds)),To = 1,};Storyboard.SetTargetProperty(fadeIn, new PropertyPath("Opacity"));sb.Children.Add(fadeIn);sb.Begin(element);await Task.Delay((int)(seconds * 1000));}private async void StartAnimationOut(FrameworkElement element, float seconds = 0.5f){var sb = new Storyboard();var fadeIn = new DoubleAnimation{Duration = new Duration(TimeSpan.FromSeconds(seconds)),To = 0,};Storyboard.SetTargetProperty(fadeIn, new PropertyPath("Opacity"));sb.Children.Add(fadeIn);sb.Begin(element);await Task.Delay((int)(seconds * 1000));}public event PropertyChangedEventHandler PropertyChanged;public void OnPropertyChanged(string name){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));}private void Border_MouseDown(object sender, MouseButtonEventArgs e){if(e.LeftButton==MouseButtonState.Pressed)this.DragMove();}private void ShutDownClick(object sender, RoutedEventArgs e){IsOpen = !IsOpen;}}
}

在App.xaml里面定义资源：

<Application x:Class="AirCond.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:AirCond"StartupUri="MainWindow.xaml"><Application.Resources><FontFamily x:Key="Digital">pack://application;,,,/Fonts/#Digital-7 Mono</FontFamily><PathGeometry x:Key="ShutDownIcon" Figures="M209.664 813.696a426.666667 426.666667 0 0 1 0-603.392 42.666667 42.666667 0 0 1 60.330667 60.330667 341.333333 341.333333 0 1 0 482.474666 0 42.666667 42.666667 0 0 1 60.330667-60.330667A426.666667 426.666667 0 0 1 209.664 813.696zM511.36 85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v384a42.666667 42.666667 0 0 1-85.333334 0V128a42.666667 42.666667 0 0 1 42.666667-42.666667z"/><LinearGradientBrush x:Key="LinearBrush"><GradientStop Offset="0" Color="Red"/><GradientStop Offset="0.5" Color="Blue"/><GradientStop Offset="1" Color="Green"/></LinearGradientBrush><Style TargetType="local:IconFontButton"><Setter Property="CornerRadius" Value="0"/><Setter Property="Padding" Value="5"/><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="Gray"/><Setter Property="BorderBrush" Value="Transparent"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="local:IconFontButton"><Border CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}" BorderThickness="0"><Path x:Name="path" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Foreground}"Width="{TemplateBinding IconWidth}"Height="{TemplateBinding IconHeight}"SnapsToDevicePixels="True"Stretch="Uniform"RenderTransformOrigin="0.5,0.5"Margin="{TemplateBinding Padding}"><Path.RenderTransform><TransformGroup><ScaleTransform ScaleX="1" ScaleY="1" /></TransformGroup></Path.RenderTransform></Path></Border><ControlTemplate.Triggers><EventTrigger RoutedEvent="UIElement.MouseEnter"><BeginStoryboard ><Storyboard><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1.2" Duration="0:0:0.1" AutoReverse="False" /><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1.2" Duration="0:0:0.1" AutoReverse="False" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="UIElement.MouseLeave"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.1" AutoReverse="False" /><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.1" AutoReverse="False" /></Storyboard></BeginStoryboard></EventTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style></Application.Resources>
</Application>

创建一个IconFontButton类：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;namespace AirCond
{public class IconFontButton : Button{public Geometry Geometry{get { return (Geometry)GetValue(GeometryProperty); }set { SetValue(GeometryProperty, value); }}public static readonly DependencyProperty GeometryProperty =DependencyProperty.Register("Geometry", typeof(Geometry), typeof(IconFontButton), new PropertyMetadata(default(Geometry)));public CornerRadius CornerRadius{get { return (CornerRadius)GetValue(CornerRadiusProperty); }set { SetValue(CornerRadiusProperty, value); }}public static readonly DependencyProperty CornerRadiusProperty =DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(IconFontButton), new PropertyMetadata(default(CornerRadius)));public double IconWidth{get { return (double)GetValue(IconWidthProperty); }set { SetValue(IconWidthProperty, value); }}public static readonly DependencyProperty IconWidthProperty =DependencyProperty.Register("IconWidth", typeof(double), typeof(IconFontButton), new PropertyMetadata(32.0));public double IconHeight{get { return (double)GetValue(IconHeightProperty); }set { SetValue(IconHeightProperty, value); }}public static readonly DependencyProperty IconHeightProperty =DependencyProperty.Register("IconHeight", typeof(double), typeof(IconFontButton), new PropertyMetadata(32.0));}
}

图片和字体来源于网络，仅用于学习用途，如有侵权，请联系我删除。

如需图片和字体资源，请下载：

项目代码百度云链接：（给白嫖怪的惊喜）

链接：https://pan.baidu.com/s/1R1lxv-rcQI3rytn3epJP6Q

提取码：s5hl

效果图: