WPF|基于WPF的桌面宠物开发(一) （WPF简介+环境搭建+简单界面） xml|c#|wpf

- 一、WPF简介
- - 1、什么是WPF？
- 二、WPF环境搭建
- - 1、Visual Studio安装
  - 2、安装 “.Net桌面开发” 工具包
  - 3、新建WPF项目
  - 4、导入WpfAnimatedGif包
  - 5、制作Gif动画
- 三、简单界面
- - 1、窗口背景透明化
  - 2、扔进Gif图

隔离这么无聊，不如让我们来做一个桌面小宠物叭...好！阿巴阿巴

一、WPF简介 1、什么是WPF？
（以下介绍均来源于百度百科）
??WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架。属于.NET Framework 3.0+的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。您可以使用任何一种.Net编程语言（C#，VB NET等开发语言）进行开发。
??Microsoft 在引入 Windows Presentation Foundation 的同时，还引入了 XAML，这是一种公开表示 Windows应用程序用户界面的标记语言，可使开发人员和设计人员用来构建和重用 UI 的工具更加丰富。对于 Web 开发人员，XAML 提供了熟悉的 UI 说明模式。XAML 还使 UI 设计从基础代码中分离出来，从而使开发人员和设计人员之间的合作更加紧密。

1、谈及WPF，一定会考虑到的一个问题就是，它和Winform的区别是什么呢？关于这个问题，可以参考博客：
? WPF和WinForm的区别，理解数据驱动与事件驱动的优势对比

2、此处推荐一个WPF的教程合集！是我看到现在讲得最清楚的教程了！请吃了这波安利！
? https://www.bilibili.com/video/BV1mT4y177BM?p=1

二、WPF环境搭建 1、Visual Studio安装

官网下载地址：Visual Studio官网下载（Community免费，足够使用）

??新版的Visual Studio安装时会默认下载Visual Studio installer，这个东西建议下载，因为它很好用，在VS的版本管理、软件装卸、以及开发工具包、开发组件的后续安装卸载中都起到了非常重要的作用…当然了…既然说是建议下载了，那其实就是必须下载了，因为Installer卸载以后，VS也会没有哦…或者会遇到卸不掉且装不上的麻烦问题…哈哈哈…令人想起了Adobe…（不是
我安装的版本是Visual Studio2019。
2、安装 “.Net桌面开发” 工具包
??在下载完Visual Studio后，需要安装“.Net桌面开发”工具包，如下图：

文章图片

PS: 不建议下载在C盘哦！在下载完毕后，可能会出现下载的盘里出现大量的文件夹，大概有几百个吧，这些都是下载时的缓存文件，在安装完成后是可以删除的哦，不会影响到后续使用！
3、新建WPF项目
文件 —> 新建 —> 项目 —> 直接搜索WPF —>选择WPF应用(.Net Framework) —> 取个名字、选个项目地址 —> 创建完成。

文章图片

4、导入WpfAnimatedGif包
??由于这个项目会使用到Gif动图，因此需要导入一个可以读取该文件类型的扩展包WpfanimatedGif。
导入方法：
（1）打开 “NuGet包管理器” 中的 “程序包管理控制台”；

文章图片

（2）输入命令：Install-Package WpfAnimatedGif

文章图片

??包安装完成后如图：

文章图片

（3）关闭该窗口，并添加引用：
??? xmlns:wpfanimated=“http://wpfanimatedgif.codeplex.com”

文章图片

??至此，环境配置完毕。
5、制作Gif动画
??在这个桌宠的开发中使用到了Gif动图，也可以使用网上已有的Gif动图，但如果想要做自己喜欢的类型，也可以自己画。我使用到的画图工具是一款马赛克绘图工具“Piskel”。直接百度，可以找到官网，进入官网会发现，这款绘图软件的官网已经停止新用户注册，同时也把老用户账号移除了，也就是说画的图是不能保存在线上的，因此建议下载桌面版。（怎么用的东西都是快停更的…手动滑稽）

此处给出官网网址和网盘下载地址：
Piskel官网下载地址：https://www.piskelapp.com/download
百度网盘：https://pan.baidu.com/s/1TQwLz_xk36L46JRCCswuSw?pwd=cf1i 提取码：cf1i

??绘图界面如下图，可以修改面板马赛克图的总体像素大小，可以调整图片的播放速度（右上角FPS），也可以导出Gif、PNG等格式的图象。

文章图片

三、简单界面 【WPF|基于WPF的桌面宠物开发(一) （WPF简介+环境搭建+简单界面）】??当新建完项目后，可以看到项目的文件目录下包含了两个.xaml文件，其中App.xaml文件中的资源是针对全局的，而MainWindow.xaml中的资源针对的是MainWindow这一窗口。在打开App.xaml文件后，可以看到默认代码（如下），其中有一条“StartupUri”，它的地址是MainWindow文件，由此也可以看出这一点。

1、窗口背景透明化
??这是新建项目后的界面，这个主窗口带有初始的背景和边界样式，这样不大行…

文章图片

??在主窗口.xaml文件的Window栏中添加以下语句，将背景设为透明，并取消窗口样式。需要注意的是，仅设置 Background 为 Transparent 还不能够使窗口透明，必须使 AllowsTransparency 为 True 才行。

Background="Transparent" AllowsTransparency="True" WindowStyle="None"

??如前所述，这一设置放在MainWindow中，针对的只是当前窗口，而我们的桌宠不管几个窗口都不需要用到默认的背景和边界，故而可以将这一设置扔进App.xaml中。在App.xaml中添加静态资源代码：

x:Key="stlWindow" TargetType="Window"> "Background" Value="https://www.it610.com/article/Transparent"> "AllowsTransparency" Value="https://www.it610.com/article/True"> "WindowStyle" Value="https://www.it610.com/article/None">

然后在MainWindow中引用就好了：

Style="{StaticResource stlWindow}">

2、扔进Gif图
??在项目下创建一个用于放各种图片资源的文件夹，然后把Gif图拖进去。由于我们使用的是WpfAnimatedGif包，因此在写xaml语言时，要调用这个包，代码如下：

其中包含一些命令：

命令	意义	栗子	作用
AnimatedSource	图片地址（相对路径、绝对路径皆可）
RepeatBehavior	动画播放次数	1x	：播放一次（以此类推）
		Forever	永久播放
		0:0:5	（时:秒:分）播放5秒
AutoStart	是否自动播放	True/False	自动播放/不自动播放
AnimateInDesignMode	是否在设计框中可见	True/False	可见/不可见