WPF入门教程(8)之绑定和绑定的各种使用场景

一、绑定:

主要包含元素绑定和非元素绑定两种。

1、元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性。

根据我们之前的知识 ,依赖项属性具有内置的更改通知支持。所以当我们的源对象中改变依赖项属性的值时,会立即更新目标对象中的绑定属性。

以上篇的例子来重写,我们不用额外定义全局公开的属性来支持数据的显示。

如下:

1  
2         
3         
4  

WPF入门教程(8)之绑定和绑定的各种使用场景_第1张图片

 TextBlock 绑定了名称为WelcomeText的元素,并且将Path指向Text属性,所以他的值会跟着 WelcomeText的变化而变化。 

2、非元素类型绑定: 

2.1 Source属性:绑定具体的数据对象:如系统信息跟我们定义的资源数据。

定义Window下的全局资源

1     
2         Red
3     

应用到视图中

1   
2                 
3                 
4   

结果:

WPF入门教程(8)之绑定和绑定的各种使用场景_第2张图片

2.2 RelativeSource 属性:设置该属性 可以根据当前目标对象的相对关系指向源目标。比如获取当前对象的父亲对象、兄弟对象或者自身的其他属性等一些数据。

复制代码

 1            
 2                 
 3                 
 4                     
 5                     
 6                 
 7                 
 8                 
 9                 
10                       
11                     
12                 
13                 
14                                 
15                 
16                     
17                     
18                                                
19 
20             
2.3 DataContext 属性:如果想将一个对象绑定到一个由多个元素组成的视图块或者复合元素中,用DataContext 会更好开发和维护。如下

复制代码

 1             
 2                 
 3                 
 4                     
 5                     
 6                 
 7 
 8                 
 9                     
10                     
11                 
12 
13             

复制代码

二、绑定的各种使用场景:

数据绑定有普通的控件绑定应用:比如 下拉框、单选框、复选框、普通文本框 、日期框等;

复杂的绑定有数据列表绑定,用户控件信息绑定等,比如 ListBox,DataGrid,UserControl绑定等。

1、下拉框:

1)创建一个Model:

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.Model
{
   public class ComplexInfoModel:ObservableObject
    {
        private String key;
        /// 
        /// Key值
        /// 
        public String Key
        {
            get { return key; }
            set { key = value;RaisePropertyChanged(() => Key); }
        }

        private String text;
        /// 
        /// Text值
        /// 
        public String Text
        {
            get { return text; }
            set { text = value;RaisePropertyChanged(() => Text); }
        }
    }
}

 2)创建一个ViewModel

using GalaSoft.MvvmLight;
using MVVMLightDemo.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.ViewModel
{
   public class ComplexInfoViewModel:ViewModelBase
    {

        public ComplexInfoViewModel()
        {
            InitCombbox();
        }

        #region 下拉框相关
        /// 
        /// 下拉框选中信息
        /// 
        private ComplexInfoModel combboxItem;
        public ComplexInfoModel CombboxItem
        {
            get { return combboxItem; }
            set { combboxItem = value;RaisePropertyChanged(() => CombboxItem); }
        }

        /// 
        /// 下拉框列表
        /// 
        private List combboxList;
        public List CombboxList
        {
            get { return combboxList; }
            set { combboxList = value;RaisePropertyChanged(() => CombboxList); }
        }
        #endregion

        private void InitCombbox()
        {
            CombboxList = new List() {
              new ComplexInfoModel(){ Key="1",Text="苹果" },
              new ComplexInfoModel(){ Key="2",Text="香蕉" },
              new ComplexInfoModel(){ Key="3",Text="梨" },
              new ComplexInfoModel(){ Key="4",Text="樱桃" },
            };
        }
    }
}

3)创建一个View


    
        
            
                
                
                
                    
                        
                        
                    
                    
                        
                        
                        
                        
                    
                
            
        
    

说明:CombboxItem是一个全局的属性,作用在当前页面的数据上下文中,结果显示的内容指向下拉框中的选中值,达到共用一个数据的目的。 

这边有四个地方需要注意的:ItemsSource:数据源;SelectedItem:选中的项;DisplayMemberPath:绑定时显示的所属值;SelectedValuePath :绑定时候key的所属值。

结果如下:

WPF入门教程(8)之绑定和绑定的各种使用场景_第3张图片

 WPF入门教程(8)之绑定和绑定的各种使用场景_第4张图片

2、单选框


    
        
            
            
                
                    
                    
                
                
                    
                    
                
            
        
    

说明:注意这边使用到了两个属性: SingleRadio,IsSingleRadioCheck,一个用于显示单选框内容,一个用于表示是否选中

3、组合单选框

我们一般会用单选框做组合表示唯一选项,比如性别包含男女,但是只能选择一个。而更多的场景是包含多个选项,但是只能单选的,这时候就需要做单选框组。


                
                
                    
                        
                            
                                
                                      
                                                                        
                                
                            
                        
                    

                    
                        
                    
                
            

这边使用了ItemsControl,可以根据模板来定义内容,我们在模板中放置我们需要用到的内容。这边需要注意的是:GroupName用一样的,来代表这是一个单选控件组合。

这边有是三个属性进行绑定相关:

RadioButtons:单选框列表数据(循环绑定);Content:单选框显示的内容;IsCheck:单选框的是否选中。 

4、复选框,复选框与单选框的使用情况类似:


                
                
                    
                        
                            
                                
                                    
                                
                            
                        
                    

                    
                        
                    
                
  

5、树形控件

Model代码

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.Model
{
   public class TreeNodeModel:ObservableObject
    {
        public string NodeID { get; set; }
        public string NodeName { get; set; }
        public ListChildren { get; set; }
    }
}

ViewModel代码

using GalaSoft.MvvmLight;
using MVVMLightDemo.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.ViewModel
{
   public class TreeNodeViewModel:ViewModelBase
    {
        #region 树控件
        /// 
        /// 树控件数据信息
        /// 
        private List treeInfo;
        public List TreeInfo
        {
            get { return treeInfo; }
            set { treeInfo = value;RaisePropertyChanged(() => TreeInfo); }
        }
        #endregion
    }
}

View代码:


    
        
            
            
            
                
                    
                        
                            
                                
                            
                        
                    
                
                
                    
                    
                    
                
            
        
    

6、ListBox

当我们需要用到循环的列表内容,并且模板化程度高的时候,建议使用ListBox来做绑定。

ViewModel代码:

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.ViewModel
{
    public class FruitInfoViewModel:ViewModelBase
    {
        public FruitInfoViewModel(String img, String info)
        {
            this.Img = img;
            this.Info = info;
        }

        #region 属性
        /// 
        /// 图片
        /// 
        private String img;
        public String Img
        {
            get { return img; }
            set { img = value;/*RaisePropertyChanged(() => Img);*/ }
        }

        /// 
        /// 信息
        /// 
        private String info;
        public String Info
        {
            get { return info; }
            set { info = value; }
        }
        #endregion
    }
}
using GalaSoft.MvvmLight;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMLightDemo.ViewModel
{
   public class ListBoxViewModel:ObservableObject
    {
        public ListBoxViewModel()
        {
            InitListBoxList();
        }

        #region ListBox模板
        private IEnumerable listBoxData;
        public IEnumerable ListBoxData
        {
            get { return listBoxData; }
            set { listBoxData = value;RaisePropertyChanged(() => ListBoxData); }
        }
        #endregion

        private void InitListBoxList()
        {
            ListBoxData = new ObservableCollection() {
                new {Img="/MVVMLightDemo;component/Images/1.jpg",Info="樱桃" },
                new {Img="/MVVMLightDemo;component/Images/2.jpg",Info="葡萄"},
                new {Img="/MVVMLightDemo;component/Images/3.jpg",Info="苹果" },
                new {Img="/MVVMLightDemo;component/Images/4.jpg",Info="猕猴桃" },
                new {Img="/MVVMLightDemo;component/Images/5.jpg",Info="柠檬"}
                };
        }
    }
}

 View代码:


    
        
            
            
                
                    
                        
                            
                                
                            
                        
                        
                            
                                
                                    
                                    
                                
                            
                        
                    
                
                
                    
                
            
        
    

结果:

WPF入门教程(8)之绑定和绑定的各种使用场景_第5张图片

 

 

你可能感兴趣的:(WPF)