WPF入门教程系列三

WPF之Binding的使用（一）

一、  前言

初学WPF经常被Binding搞得苦不堪言，Binding的重用性就不做介绍了，在WPF应用程序开发中Binding是一个非常重要的部分。WPF也是近期才接触，学习WPF也是在网上查资料与微软的MSDN进行学习，写本博客的目为了温故而知新把学习过程记录下来，以备后查。

二、  WPF之Binding

1.)    Binding的一般步骤：准备数据源，数据源需要实现INotifyPropertyChanged接口.如下实例

class Student: INotifyPropertyChanged
{
   public event PropertyChangedEventHandler PropertyChanged;
   private string name;
   public string Name
   {
    get { return name; }
    set{name = value;}
   //触发事件
   if (PropertyChanged != null)
     {
      PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Name"));
     }
   }
}

　　

2.)    Binding对象

Student p = new Student ("曾小贤");
Binding binding = new Binding();
binding.Source = p;
binding.Path = new PropertyPath("Name");

　　

3.)    用Binding对象将数据源和目标连结 假如在XAML处添加了一个TextBlock目标

<TextBlock x:Name="txtName"></TextBlock>

使用BindingOperations.SetBinding()方法将其进行binding了

BindingOperations.SetBinding(txtName, TextBlock.TextProperty, binding);

也可以使用UI元素的基类FramworkElement封装的SetBinding函数

txtName.SetBinding(TextBlock.TextProperty, binding);

两步结合在一起可以这样写

txtName.SetBinding(TextBlock.TextProperty, new Binding("Name") { Source=p});

　　

三、  WPF对比WinForm实例

做这个例子也是上家公司同事想了解WPF,之前公司项目是用WinForm做His系统的，这个例子主要展示同一个需求用WinForm和WPF分别进行实现，通过这个例子，我们可以看到两者之间的区别和联系，同时也可以对我们的项目选型带来一定的参考作用（原型来自于Josh Smith与Knights Warrior的文章，个人觉得讲得非常不错，所以对原有例子进行了改造，进而有了这个案例）。

下面是WinForms版本与WPF版本的截图:

 

程序简介

这个例子非常简单，需求就是展示三大社区的基本信息，同时你可以在输入框对其进行修改，当焦点切换的时候，你就会看到它会自动进行修改，你把鼠标放在图片上面会提示社区的ID等等。我在这里没有用复杂的逻辑和高深的架构，只是想通过这个例子展示WinForm的WPF的差异和联系，所以在程序处理上可能会有很多漏洞，比如没有对输入进行验证，你可以输入空格和任意字符等。如果你编辑了某个社区的中文名称或者英文名称，然后把焦点移到另外一个地方，这些更改就会通过右上角的全名体现出来，因为他们都是通过绑定到公用字段来实现这些操作的。

• 公用代码部分（BusinessObjects）

这两个应用程序都是使用的BusinessObjects作为逻辑类库，BusinessObjects中的Company对UI所使用的数据进行了Mock。所以他们在需求方面都是一样的，由于比较简单，所以请看下面代码：

using System;
using System.ComponentModel;
using System.IO;
using System.Reflection;

namespace BusinessObjects
{
public class Company : INotifyPropertyChanged
{
    #region 创建数据方法

    public static Company[] GetCompanys()
    {
        // 在真正的应用程序中，这可能会调用数据访问层，从数据库中获取记录。
        return new Company[]
        {
            new Company(1, "博客园", "CNBlogs", GetPictureFile(1), new DateTime(2004, 1, 12)),
            new Company(2, "51CTO", "51CTO", GetPictureFile(2), new DateTime(2005, 3, 1)),
            new Company(3, "CSDN", "CSDN", GetPictureFile(3), new DateTime(2000, 1, 20)),
            new Company(4, "开源中国", "开源中国", GetPictureFile(4), new DateTime(2008, 8, 1)),
            new Company(5, "ITEYE", "ItEye", GetPictureFile(5), new DateTime(2011, 4, 1)),
        };
    }

    private static string GetPictureFile(int CompanyID)
    {
        string fileName = String.Format("emp{0}.jpg", CompanyID);
        string folder = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);
        folder = Path.Combine(folder, "Images");
        return Path.Combine(folder, fileName);
    }

    private Company(int id, string chineseName, string EnglishName, string pictureFile, DateTime startDate)
    {
        this.ID = id;
        this.chineseName = chineseName;
        this.EnglishName = EnglishName;
        this.PictureFile = pictureFile;
        this.StartDate = startDate;
    }

    #endregion // 创建数据方法

    #region 实体属性

    public int ID { get; private set; }

    string _chineseName;
    public string chineseName//中文名称
    {
        get { return _chineseName; }
        set
        {
            if (value == _chineseName)
                return;

            _chineseName = value;

            this.OnPropertyChanged("chineseName");
            this.OnPropertyChanged("FullName");
        }
    }

    string _EnglishName;
    public string EnglishName//英文名称
    {
        get { return _EnglishName; }
        set
        {
            if (value == _EnglishName)
                return;

            _EnglishName = value;

            this.OnPropertyChanged("EnglishName");
            this.OnPropertyChanged("FullName");
        }
    }

    public string FullName 
    { 
        get { return String.Format("{0}, {1}", this.EnglishName, this.chineseName); } 
    }

    public string PictureFile { get; private set; }//图片文件地址
    public DateTime StartDate { get; private set; }//开始时间

    #endregion // 实体属性

    #region INotifyPropertyChanged 接口

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)//属性变更通知
        {
        PropertyChangedEventHandler handler = this.PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion
}
}

上面这段代码没有什么不寻常的地方，大家写WinForm和Asp.Net也会写这样的逻辑类，只是要注意Company 实现了INotifyPropertyChanged 接口，大家看到这个接口只有一个OnPropertyChanged的方法，这个方法就是我们要说的属性变更通知方法，就是说当一个属性改变了，我们需要做些什么来响应这些改变。

•  WPF实现介绍

WPF版本我这里就做得很简单了，由于开发WPF程序提供了很多模板和工具，所以我这里基本没写什么代码，全部的代码都是通过XAML实现，并且大部分都是自动生成的，只是我们要根据项目具体情况做一些修改就行。

这个WPF项目同样有一个Window和一个customUserControl, 和 WinForms 版本基本一样. 只是WinForms中用FlowLayoutPanel来承载EmployeeControl控件, 而WPF 用的是ItemsControl来承载这个用户控件.更加可喜的是，WPF通过模板来进行定制，所以我们就不需要像WinForms那样写循环加载控件的代码，下面就是WPF用XAML实现的窗体代码：

<Window 
  x:Class="WpfApp.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfApp"
  xmlns:model="clr-namespace:BusinessObjects;assembly=BusinessObjects"
  Title="WPF App" Height="500" Width="560"
  WindowStartupLocation="CenterScreen"
  >
  <Window.DataContext>
    <ObjectDataProvider ObjectType="{x:Type model:Company}" MethodName="GetCompanys" />
  </Window.DataContext>
  <Grid Width="500">
    <Label  Name="label1" HorizontalContentAlignment="Center" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" Height="36.6" Margin="0,16,0,0">
       .NET 中文社区大比拼
    </Label>
        <WrapPanel Margin="0,57.6,0,0">
            <ScrollViewer VerticalScrollBarVisibility="Auto" Height="536" Width="500" >
                <ItemsControl  ItemsSource="{Binding}" HorizontalContentAlignment="Center"  Focusable="False" Height="783">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:CompanyControl />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </WrapPanel>
    </Grid>
</Window>

 在如下的XAML代码中，这里有几点需要注意，。Window的DataContext赋予了一个ObjectDataProvider的对象，而ObjectDataProvider又会调用GetEmployees这个方法。所以一旦把DataContext设置到Company 对象，并且把ItemsControl的ItemsSource设置为“{Binding}” 就意味着该控件里面会自动显示Company 对象的所有数据。

这里我们并不需要像WinForm一样用循环的方式创建CompanyControl的实例。这是因为ItemsControl中的ItemTemplate属性设置为了一个DataTemplate，同时ItemsControl中的ItemsSource绑定到了Company 的对象数组，那么ItemTemplate就会知道如何创建一个CompanyControl，所以大家看到这里写的代码就相对变少了，这也是XAML的一个优点之一。

该CompanyControl的后台CS文件也是空的（除了必须的InitializeComponent），所以它不像的WinForms应用程序那么累赘，界面和逻辑紧密的耦合在了一起。下面就是CompanyControl的XAML代码， 这个代码相对来说就比较简单了。

<UserControl x:Class="WpfApp.CompanyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="137" Width="481">
  <Border BorderBrush="Black"  BorderThickness="1" Margin="2" SnapsToDevicePixels="True" Width="469">
    <Grid Height="129" Width="451">
      <Image Source="{Binding PictureFile}"  Margin="10" Name="image1" Stretch="Fill"  Width="150" Height="80" HorizontalAlignment="Left" >
        <Image.ToolTip>
          <TextBlock>
            <Run TextBlock.FontWeight="Bold">Company ID:</Run>
            <TextBlock Margin="4,0,0,0" Text="{Binding ID}" />
          </TextBlock>
        </Image.ToolTip>
      </Image>
        <Label  Content="{Binding FullName}"  Height="34" Margin="99,2,0,0" Name="中英文名称" VerticalAlignment="Top"  HorizontalContentAlignment="Right" FontSize="16" FontWeight="Bold" />
        <Label Margin="190,34,0,0" Name="chineseNameLabel" FontWeight="Bold" Height="28"  VerticalAlignment="Top" HorizontalAlignment="Left" Width="73">中文名称:</Label>
      <TextBox  Text="{Binding chineseName}"  HorizontalAlignment="Right" Margin="0,39,10,0"  Name="textBox1" Width="172" Height="23"  VerticalAlignment="Top" TextDecorations="None" />

      <Label FontWeight="Bold" Height="28" Margin="190,0,0,34"   Name="EnglishNameLabel" VerticalAlignment="Bottom"  HorizontalAlignment="Left" Width="73">英文名称:</Label>
      <TextBox   Text="{Binding EnglishName}" Height="23" Margin="0,0,10,34" Name="textBox2"  VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="172" />

      <Label Height="28" Margin="190,0,185,2"  Name="startDateLabel" VerticalAlignment="Bottom"  FontWeight="Bold">创建日期:</Label>
      <Label  Content="{Binding StartDate}" Height="28" HorizontalAlignment="Right" Margin="0,0,10,2"  Name="startDateValueLabel" VerticalAlignment="Bottom"  Width="172" />
    </Grid>
  </Border>
</UserControl>

 如上面的代码所示，UI上的很多元素我们都可以通过拖控件进行实现，有个功能需要自己简单的写一写代码，UI上面有一个功能就是你把鼠标放在图片上的时候会提示CompanyID,这个功能通过ToolTip属性进行实现的。ToolTip属性是WPF所有元素的基类FrameworkElement的一个属性，所以我们可以在这些子元素当中直接使用。

那么大家注意到，这个小功能在WinForm中我们要写一些代码，而在WPF就可以直接通过属性定制，所以在很多方面WPF对这些方面都做了封装和简化，也提高了我们的开发效率。

• WinForms实现介绍

WinForms版本就包含一个Form 和一个展示社区信息的custom UserControl, 这个Form 包含了一个FlowLayoutPanel控件, 它主要的作用就是用来承载每个社区的实例. 那么代码就如下所示:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using BusinessObjects;

namespace WinFormsApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // 创建并初始化用户控件
            foreach (Company com in Company.GetCompanys())
            {
                CompanyControl comCtrl = new CompanyControl();
                comCtrl.Company = com;
                this.flowLayoutPanel.Controls.Add(comCtrl);
            }
        }
    }
}

CompanyControl是我们创建的一个UserControl，由于每个CompanyControl都要显示一个Company对象的属性值，我在这里使用了BindingSource控件来进行绑定，这样做也是为了和ＷＰＦ更接近考虑（增强对比性，呵呵）。具体如下截图：

如上图所示，我们用了BindingSource来获取数据，但有一个属性除外，那就是Company ID，请看下面代码：

using System.Drawing;
using System.Windows.Forms;
using BusinessObjects;

namespace WinFormsApp
{
    /// <summary>
    /// 显示社区对象的WinForms控件
    /// </summary>
    public partial class CompanyControl : UserControl
    {
        public CompanyControl()
        {
            InitializeComponent();

            // 将图片文件路径转换为位图。
            Binding binding = this.CompanyPicture.DataBindings[0];
            binding.Format += this.ConvertFilePathToBitmap;
        }

        void ConvertFilePathToBitmap(object sender, ConvertEventArgs e)
        {
            e.Value = Bitmap.FromFile(e.Value as string);
        }

        public Company Company
        {
            get { return this.CompanyBindingSource.DataSource as Company; }
            set 
            { 
                this.CompanyBindingSource.DataSource = value;

                // 该社区的图片显示ID提示。
                if (value != null)
                {
                    string msg = "Company ID:  " + value.ID;
                    this.toolTip.SetToolTip(this.CompanyPicture, msg);
                }
            }
        }
    }
}

这里有几点需要注意.在绑定的时候，我们对PictureFile 字段进行了转换，这个是必须做的. 如果不那样做, 这个图片会绑定失败，因为在绑定的时候它不能自动把string类型直接转化为Image类型.

现在我们已经把Company绑定到了我们的控件上, 这里我需要给PictureBox一个tooltip的效果. 这个tooltip将显示 Company ID, 前缀显示为 "Company ID:". 现在这个是在代码里面写的，没有在窗体中发现有WPF ToolTip等类似的工具，不知道大家用到过没有？

总的来说, 这是一个很简单的例子，我们的大部分功能也是用代码没有写代码，是通过visual designer进行实现的.然后通过一部分代码把它衔接起来， 我们看到Windows Forms是一个非常快速和实用的开发平台.

例子是用Visual Studio 2017编写的，所以大家可以下载下来进行查看.

Demo下载：WinFormsAndWPFCompare.rar