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

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

效果图:

如果喜欢,点个赞呗~

WPF 制作便携小空调相关推荐

  1. 炎炎夏日打造一个属于自己的“便携小空调”吧

    "便携小空调"曾经火遍朋友圈与空间,今天我们就用web来打造一个属于自己的夏日小空调吧! 下面是效果图: 这是点击"独立遥控器"后的效果: 这是空调打开后的效果 ...

  2. 朋友圈便携小空调链接和源码!

    最近 DY 上有很多关于便携小空调的短视频,引起来很大的关注. 我知道后也第一时间体验了,确实挺有意思的.小空调如下图所示 前几年天气热的时候经常见到朋友圈有些人会发空调的图片,静态图没有交互,所以也 ...

  3. 炎炎夏日,小酱送你一个便携小空调

    Tip: 为你的夏日带去[清凉] ​ 最新随着夏天的一步步走近,天气也开始变得非常炎热起来,最近微信朋友圈内开始流行起了便携小空调的梗,出于好奇心小酱率先体验了一下,除了使用过后有种智商被侮辱的感觉, ...

  4. 编码打造属于自己的朋友圈“便携小空调”

    一.背景 今天看到朋友圈里有不少发便携小空调的原始链接,感觉很有意思.应该有不少朋友像我一样,对这块代码比较感兴趣,并且想打造自己的小空调,后来又被运营小哥拉着改成公司运营版,所以就有了这篇文章. 二 ...

  5. 抖音超火的小空调源码

    抖音超火的小空调源码 夏日里的一丝凉风- 源码非常简单,没什么好说的 代码下载: index.html <!DOCTYPE html> <html lang="en&quo ...

  6. WPF制作的一个小功能,智能提示(IntelliSense)

    WPF制作的一个小功能,智能提示(IntelliSense) 原文 http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近 ...

  7. 《wpf专题--基于wpf制作登录页面》

    开发工具与关键技术:wpf 作者:龙文浩 撰写时间:2019年5月11日 Wpf制作登录页面,是借用的qq的动态图来显示,其他按钮可以根据自己的需求来增加,图片也是根据自己的需求来修改即可: 登录页面 ...

  8. WPF制作文字OCR软件(一):本地图片OCR识别

    WPF制作文字OCR软件(一):本地图片OCR识别 一.前言 上一篇文章,我使用python来进行文字OCR,但是python在图形化编程方面并不友好,所以我打算放弃使用python来搭建一款文字OC ...

  9. 都2020年,开发制作微信小程序商城,需要准备什么资料?应该不会不知道吧!

    微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利 从腾讯刚发布的财报看,微信 ...

最新文章

  1. 【机器视觉】 dev_set_tool_geometry算子
  2. 史上最全 yum 入门使用教程和常见错误解决办法
  3. 谈谈头条创作者最近几个月的一些改变吧
  4. mac地址是由多少个bit组成_IPv6系列-详解自动分配IPv6地址
  5. QCIF、CIF、DCIF、D1分辨率是多少
  6. Vue Router 路由(路由守卫)---route
  7. Android 白天黑夜模式切换换肤
  8. ps切图技巧、基础工具,使用方法总结
  9. 使用backdrop-filter部分场景的替代效果
  10. 春招 巨杉数据库面试
  11. 用心去爱那些爱过我们的人
  12. 码工成长手册:刚毕业的程序员如何快速提升自己?
  13. 运行期间动态切换Redis数据库
  14. RN仿微信通讯录列表
  15. 什么是数据库连接池?数据库连接池的机制?
  16. 电子商务系统怎么开发,有哪些流程_OctShop
  17. 51nod1488 帕斯卡小三角形
  18. mysql之sql语法
  19. 3、制定特性迭代计划
  20. 如何能成为一名真正电子工程师【转】

热门文章

  1. squid2.6加速WEB支持虚拟主机配置心得体会 .txt
  2. .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  3. 服务器内存型号与频率,一张图看懂如何选择DDR4内存的频率和容量
  4. office 2007图标_微软Office 365桌面版新图标开始测试
  5. Linux MySQL 5.1.62 source install
  6. LeetCode 77.组合求和
  7. 值得一用的Windows软件
  8. 最详细的排序解析,理解七大排序
  9. yyblog2.0 数据库开发规范
  10. HTTP2和HTTPS来不来了解一下?