基于WPF的桌面宠物开发(一) ：WPF简介+环境搭建+简单界面

---

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

一、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等格式的图象。

三、简单界面

  当新建完项目后，可以看到项目的文件目录下包含了两个.xaml文件，其中App.xaml文件中的资源是针对全局的，而MainWindow.xaml中的资源针对的是MainWindow这一窗口。在打开App.xaml文件后，可以看到默认代码（如下），其中有一条“StartupUri”，它的地址是MainWindow文件，由此也可以看出这一点。

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
</Application>

1、窗口背景透明化

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

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

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

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

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="stlWindow" TargetType="Window">
            <Setter Property = "Background" Value="Transparent"></Setter>
            <Setter Property = "AllowsTransparency" Value="True"></Setter>
            <Setter Property = "WindowStyle" Value="None"></Setter>
        </Style>
    </Application.Resources>
</Application>

然后在MainWindow中引用就好了：

   Style="{StaticResource stlWindow}">

2、扔进Gif图

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

<Window x:Class="WpfApp1.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:WpfApp1"
        xmlns:wpfanimated="http://wpfanimatedgif.codeplex.com"
        mc:Ignorable="d"
        Title="MainWindow" Height="130" Width="150" 
        Style="{StaticResource stlWindow}">
    <Grid>
        <Image x:Name="Cat_Daily" Visibility="Visible" 
            wpfanimated:ImageBehavior.AnimatedSource=".\pics\Cat_daily.gif"
            wpfanimated:ImageBehavior.RepeatBehavior="1"
            wpfanimated:ImageBehavior.AutoStart="True"  
            wpfanimated:ImageBehavior.AnimateInDesignMode="True"
            >
        </Image>
    </Grid>
</Window>

其中包含一些命令：

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

---

完成以上操作，这只小宠物就可以被看到啦~

---

阿巴阿巴阿巴...小萌新报道...如有错误，欢迎指正...

---