WPF边学边做，图片浏览器（一）

目录：

引言

程序原型界面

WPF简介

新建一个WPF程序

WPF中标签和类的对应关系

载入图片

结语

引言

.Net体系有3个很重要的Foundation：WPF、WF、WCF，最近希望创建一个使用WPF的图像查看器，遂学习了相关知识，在实现该程序的过程中琢磨了大量的WPF知识，不敢独享。故写于此供各位大大参考和指点。

程序原型界面

初始想法就是这样，然后让我们开始做起来把，别看它貌似功能较少，但是用到的方法技巧可不简单。接下来我准备做一个系列，记录自己在做这个程序的时候的心得和学习历程，算是一个总结，也是抛砖引玉。

对于想学习WPF的朋友也可以跟着做，这样一来有了成果，二来也学到了知识，一举两得。本教程仅针对改图片浏览程序所用到的WPF知识进行了整理，挂一漏万，还请各位大大海涵和指教。

 WPF简介

Windows的UI基础是User32和GDI/GDI+。然后有了C++向的MFC，C#向的WinForm，使用此API创建用户界面。DirectX的出现使得程序员可以使用各大厂商显卡的GPU创建更加Rich的应用程序界面。DirectX的API比较繁琐，一般程序的前端工程师不使用，且也用不着这么厉害的表示方式，除非是游戏界面，一般应用程序不需要用到。WPF（Windows Presentation Foundation）即能使用DirectX的丰富显示方式又能较容易的编码，它通过XAML代码实现而不是直接在cs文件里编辑，使得熟悉Html/Xml格式的开发人员更容易上手，而且WPF中的3D绘图和WebPage支持是一个很大的特色。

 新建一个WPF程序

使用.Net4.0新建一个工程

App.xaml

<Application x:Class="WpfImage1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>         
    </Application.Resources>
</Application>

App文件是程序的开始文件，注意App.xaml中的StartupUri="MainWindow.xaml"，此属性表示程序会New一个MainWindow.xaml表示的窗口，作为起始窗口。

MainWindow.Xaml

<Window x:Class="WpfImage1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

WPF和类的对应关系

一般地，一个WPF的标签表示一个类（class），标签里面的属性表示该类的属性（Property），比如上面的代码就表示一个Window类，其中属性Title=””MainWindow” Height=”350” Width=”525”,这些属性不一定非要在Xaml设置，在CS文件中也能直接对这些属性赋值。

就像这样

Window wd=new Window();
wd.Title=””MainWindow2”;
wd.Height=”350”;
wd.Width=”525”;
wd.Show();

把这段代码加入MainWindow的构造函数中就能创建一个标题为””MainWindow2”的窗口了。

 

其中Window标签中的<Grid>也是一个类，不过作为Window的子元素只能有一个。Window类继承自ContentControl类，ContentControl.Content约束只能有一个Content。

 载入图片

既然是图片浏览器，那么就需要可以载入图片。我们使用标签<Image>,像这样加入MainWindow.xaml的Grid标签中

<Grid>
   <Image Source="..."></Image>
</Grid>

Image标签可以设置图片的Width/Height和拉伸方式Stretch。重要的是其中的Source属性，在此属性中放入图片路径比如”C:\1.jpg”就可以显示一张图片了。

 结语

首先提出了课程目标，然后讲解了WPF的相关知识，并学会使用<Image>标签显示图片。

下一节我们将开始WPF的Panel类型的讲解，并选择合适的Panel作为图片处理程序的载体。

谢谢 :-)