通过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

效果图: