WPF & Silverlight Object data binding

网上很多介绍关于设计期绑定的文章, 但是Coding动态创建binding方式基本没有, 在项目开发过程中经常会用到的,在此做个简单的笔记,以做参考.

binding的好处网上介绍的一堆, 不重复了,Binding 理解INotifyPropertyChanged, ObservableCollection, BindingMode 是基础

几种控件和组件的绑定方式如下:

/*WinBindObject .cs*/

  1using System;
  2using System.Collections.Generic;
  3using System.Collections.ObjectModel;
  4using System.Linq;
  5using System.Text;
  6using System.Windows;
  7using System.Windows.Controls;
  8using System.Windows.Data;
  9using System.Windows.Documents;
 10using System.Windows.Input;
 11using System.Windows.Media;
 12using System.Windows.Media.Imaging;
 13using System.Windows.Shapes;
 14using System.ComponentModel; 
 15
 16namespace Exio.NR.WPF.Test
 17{
 18    /**//// <summary>
 19    /// Interaction logic for WinBindObject.xaml
 20    /// </summary>
 21    public partial class WinBindObject : Window
 22    {
 23        Entity ent1, ent2;
 24        public WinBindObject()
 25        {
 26            InitializeComponent();
 27            this.btnShowContent.Click +=new RoutedEventHandler(btnShowContent_Click);
 28            InitData();
 29        }
 30        void btnShowContent_Click(object sender, RoutedEventArgs e)
 31        {
 32            MessageBox.Show(ent1.ToString(),"Red Canvas");
 33            MessageBox.Show(ent2.ToString(), "Blue Canvas");
 34        }
 35        void InitData()
 36        {
 37            //初始化数据
 38            ent1 = new Entity()
 39            {
 40                Name="Knife",
 41                Angle = 10,
 42                Top = 30,
 43                Left =30,
 44                Height = 72,
 45                Width = 80,
 46                Bacground = Colors.Red,
 47                Target = TargetPerson.Man
 48            };
 49            Canvas c1 = InitElement(ent1);
 50            canvContainer.Children.Add(c1);
 51
 52            ent2 = new Entity()
 53            {
 54                Name = "Robot",
 55                Angle = -60,
 56                Top = 160,
 57                Left = 90,
 58                Height =42,
 59                Width = 80,
 60                Bacground = Colors.Blue,
 61                Target = TargetPerson.Child
 62            };
 63            Canvas c2 = InitElement(ent2);
 64            canvContainer.Children.Add(c2);
 65        }
 66
 67        Canvas InitElement(Entity ent)
 68        {
 69            //绑定
 70            Canvas c1 = new Canvas();
 71
 72            TextBox t = new TextBox();
 73            t.SetBinding(TextBox.TextProperty, new Binding("Name") { Mode = BindingMode.OneWay });
 74            t.Width = 60;
 75            t.DataContext = ent;
 76            c1.Children.Add(t);
 77
 78            TextBox tH = new TextBox();
 79            tH.SetBinding(TextBox.TextProperty, new Binding("Top") { Mode = BindingMode.TwoWay });
 80            tH.Width = 60;
 81            tH.SetValue(Canvas.TopProperty, 25.0);
 82            tH.DataContext = ent;
 83            c1.Children.Add(tH);
 84
 85
 86
 87            ObservableCollection<ListItemData> data = new ObservableCollection<ListItemData>();
 88            data.Add(new ListItemData() { Text = "Child", Value = TargetPerson.Child });
 89            data.Add(new ListItemData() { Text = "Man", Value = TargetPerson.Man });
 90            data.Add(new ListItemData() { Text = "Woman", Value = TargetPerson.Woman });
 91
 92            ComboBox cb = new ComboBox();
 93            cb.Width = 50;
 94            cb.SetValue(Canvas.TopProperty, 50.0);
 95            cb.SetBinding(ComboBox.SelectedValueProperty, new Binding("Target") { Mode = BindingMode.TwoWay });
 96            cb.DisplayMemberPath = "Text";
 97            cb.SelectedValuePath = "Value";
 98            c1.SetBinding(Canvas.TopProperty, new Binding("Top") { Mode = BindingMode.OneWay });
 99            c1.SetBinding(Canvas.LeftProperty, new Binding("Left") { Mode = BindingMode.OneTime });
            c1.SetBinding(Canvas.WidthProperty, new Binding("Width") { Mode = BindingMode.OneTime });
            c1.SetBinding(Canvas.HeightProperty, new Binding("Height") { Mode = BindingMode.OneTime });
            cb.ItemsSource = data;
            cb.DataContext = ent;
            c1.Children.Add(cb);

            TransformGroup tg = new TransformGroup();
            c1.RenderTransform = tg;
            //旋转角度, 注意这个绑定(因为RotateTransform 不是 FrameworkElement,没有SetBinding方法)
            RotateTransform rt = new RotateTransform();
            BindingOperations.SetBinding(rt, RotateTransform.AngleProperty, new Binding("Angle") { Mode = BindingMode.OneTime });
            tg.Children.Add(rt);
            c1.Background = new SolidColorBrush(ent.Bacground);
            c1.DataContext = ent;
            return c1;
        }
    }

    public class ListItemData{
        public string Text { get; set; }
        public TargetPerson Value { get; set; }
    }
    /**//// <summary>
    /// 使用群体
    /// </summary>
    public enum TargetPerson
    {
        Child,
        Man,
        Woman
    }
    public class Entity:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void Notify(string propName)
        {
            if (this.PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
        string _name;

        public string Name
        {
            get { return _name; }
            set { 
                if (this._name == value) { return; }
                this._name = value;
                Notify("Name"); }
        }
        //旋转角度 
        double _angle;

        public double Angle
        {
            get { return _angle; }
            set
            {
                if (this._angle == value) { return; }
                this._angle = value;
                Notify("Angle");
            }
        }
        double _top;

        public double Top
        {
            get { return _top; }
            set
            {
                if (this._top == value) { return; }
                this._top = value;
                Notify("Top");
            }
        }
        double _left;

        public double Left
        {
            get { return _left; }
            set { _left = value; }
        }
        double _width;

        public double Width
        {
            get { return _width; }
            set
            {
                if (this._width == value) { return; }
                this._width = value;
                Notify("Width");
            }
        }
        double _height;

        public double Height
        {
            get { return _height; }
            set
            {
                if (this._height == value) { return; }
                this._height = value;
                Notify("Height");
            }
        }
        Color _bg;

        public Color Bacground
        {
            get { return _bg; }
            set
            {
                if (this._bg == value) { return; }
                this._bg = value;
                Notify("Bacground");
            }
        }
        //所属类别
        TargetPerson _target;

        public TargetPerson Target
        {
            get { return _target; }
            set
            {
                if (this._target == value) { return; }
                this._target = value;
                Notify("Target");
            }
        }
        public string ToString()
        {
            return string.Format(@"
        Name    :{0}
        Angle   :{1}
        Top     :{2}
        Left    :{3}
        Width   :{4}
        Height  :{5}
        Bacground:{6}
        Target  :{7}",
                  Name    ,
                  Angle   ,
                  Top     ,
                  Left    ,
                  Width   ,
                  Height  ,
                  Bacground,
                  Target);
        }
    }
}

 修改所有属性后点击按钮, 体会BindingMode

<Window x:Class="Exio.NR.WPF.Test.WinBindObject"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WinBindObject" Height="300" Width="300">
    <Canvas x:Name="canvContainer">
    </Canvas>
</Window>