2023年7月19日发(作者：)

实例讲解wpf数据绑定及值转换的应⽤先谈谈MVVM谈起MVVM并不陌⽣了，最开始接触MVVM是在做⼀个web项⽬，这个web项⽬是⽤在移动端，使⽤了onic+angularJs,期初使⽤的时候对MVVM并不是很了解，经过⼀段时间的使⽤发现，其实MVVM是对MVC的延展，现在前端技术越来越多，⽽且前端的⼯作也越来越多，不仅仅是做个页⾯的事情了，随着nodejs的兴起，前段好像⽆所不能了，做起了后端的事情，这⾥MVVM其实也有这个意思，随着MVC应⽤的越来越⼴泛，⼤家发现了⼀个问题：C层越来越⼤，业务逻辑全部在这块。MVVM是为了解决这个问题⽽出现的。MVVM（Model-View-view-Model）,这种模式上突出⼀点“数据绑定”:将Model和View进⾏绑定，Model的数据变化时View上的展⽰就随之变化，然后有⼀个View-Model 就是写在前端的数据转换⼯具，angular其实本质上是将后端的开发模型引⼊到了前端，在前端完成数据整理的⼯作。

wpf的对象绑定将源控件的某个属性绑定到⽬标控件的某个属性上，绑定的语法：Text=”{Binding ElementName=SourceObjectName, Path=SourceProperty}”看个例⼦：我们将姓名1后textbox的text属性绑定到姓名后的textbox的text属性上，当我在姓名后⾯输⼊什么，姓名1后也会显⽰⼀样的内容代码：

View Code当然除了在xaml中实现绑定，我们也可以在cs⽂件中代码实现绑定：代码如下：Binding binding = new Binding();//设置源对象 = main_userInfo_name_tbx;//设置源属性 = new PropertyPath("Text");//添加到⽬标属性_userInfo_phoneNO_ding(operty, binding);View Code

2.绑定到数据源这种很常见，⽐如常见的combobox下拉框中的数据，可以通过绑定来实现。对于所有的ItemsControl对象都有⼀个ItemsSource依赖属性，这是专门为数据绑定⽽准备的。ItemsSource的类型是IEnumerable，所以对于我们⼏乎所有的集合类型我们都可以轻易的改变成ItemsSource的源对象。依赖属性内建的垂直通知功能让UI对象间的绑定可以⾃⼰负责同步处理，但是对于.NET集合/对象来讲，它不具备这样的能⼒。为了让⽬标属性与源集合的更改保持同步，源集合必须实现⼀个叫INotifyCollectionChanged的接⼝，但通常我们只需要将集合类继承于ObservableCollection类即可。因为ObservableCollection实现了INotifyPropertyChanged和INotifyCollectionChanged接⼝。举个例⼦看⼀下,现在有⼀个需求，需要在dataGrid中动态展⽰采集到的数据（边采集边展⽰，数据⼀条条增加），达到这样的效果：⽽且要实时更新状态，这⾥我们采⽤绑定的⽅式实现：　　1>.⾸先要定义展⽰数据的数据模型（字段定义）　　2>.在界⾯上定义绑定区域（xaml中）　　3>.在业务逻辑中初始化数据模型类，然后将数据集合绑定到datagrid上数据模型代码：public class FtpGrideData : INotifyPropertyChanged { private Visibility isvisible; public Visibility IsVisible { get { return isvisible; } set { ble = value; OnPropertyChanged("IsVisible"); } } private string host; public string Host { get { return host; } set { = value; OnPropertyChanged("Host"); } } private string address; public string Address { get { return address; } set { s = value; OnPropertyChanged("Address"); } } private string transType; public string TransType { get { return transType; } set { ype = value; OnPropertyChanged("TransType"); } } private string fileNum; public string FileNum { get { return fileNum; } set { m = value; OnPropertyChanged("FileNum"); } } private string fileSize; private string testTime; private string averageSpeed; public string FileSize { get { return fileSize; } set { ze = value; OnPropertyChanged("FileSize"); } } public string TestTime { get { return testTime; } set { me = value; OnPropertyChanged("TestTime"); } } public string AverageSpeed { get { return averageSpeed; } set { eSpeed = value; OnPropertyChanged("AverageSpeed"); } } private string statusDesc; public string StatusDesc { get { return statusDesc; } set { Desc = value; OnPropertyChanged("StatusDesc"); } } private string errorMessage; public string ErrorMessage { get { return errorMessage; } set { essage = value; OnPropertyChanged("ErrorMessage"); } } public event PropertyChangedEventHandler PropertyChanged; void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }View Code前台页⾯代码：

Name="ftpinfoDataGrid" RowHeaderWidth="0"

ItemsSource="{Binding}" AutoGenerateColumns="False" CanUserAddRows="False"

CanUserDeleteRows="False" CanUserSortColumns="False" SelectionMode="Single" SelectionUnit="FullRow" RowHeight="40" CanUserResizeRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False"

GridLinesVisibility="None"

VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Background="White" > View Code数据模型初始化，数据绑定：_ftpDataList = new ObservableCollection();ntext = this._ftpDataList;View Code

3.数据模板&&值转换器Value Converter数据模板：在⽇常开发中总会遇到基本控件的样⼦满⾜不了客户展⽰需求，这样就需要定制数据模板（定制展⽰⽅式）值转换器：有些情况下，我们绑定的值，并不是最终界⾯上要展⽰的结果。⽐如数据中有⼀个状态位，但是在界⾯上我需要⽤某张图⽚或者某种样式展⽰，这时候就需要使⽤“值转换器Value Converter”来对值进⾏相应的转换。举个例⼦：有这样的⼀个需求：在页⾯中需要按顺序打开多个⽹页，头部展⽰该⽹页的LOGO，当前正在打开的⽹页的LOGO设置成正常，其他⽹页LOGO设置为半透明（这⾥要使⽤值转换器）

另外，某些⽹站不存在LOGO图⽚，我们给他默认的LOGO图⽚并且要在旁边显⽰它得⽹址(这⾥需要使⽤数据模板)制作思路：　　1>.定义展⽰结果的数据模型和值转换⽅法　　2>.在界⾯上定义显⽰区域，定义数据模板（针对没有LOGO的情况），引⽤值转换⽅法　　3>.在业务逻辑⾥⾯完成数据模型的初始化，数据绑定操作看看代码吧，数据模型代码：public class WebTestData : INotifyPropertyChanged { public WebTestData() { = ""; } private string url; public String Url { get { return url; } set { = value; OnPropertyChanged("Url"); } } private int isActive; public int IsActive { get { return isActive; } set { ve = value; OnPropertyChanged("IsActive"); } } private string name; public string Name { get { return name; } set { = value; OnPropertyChanged("Name"); } } private bool isShowName; public bool IsShowName { get { return isShowName; } set { Name = value; OnPropertyChanged("IsShowName"); } } private string webSiteTooltip; public string WebSiteTooltip { get { return webSiteTooltip; } set { eTooltip = value; OnPropertyChanged("WebSiteTooltip"); } } public event PropertyChangedEventHandler PropertyChanged; void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }View Code值转换⽅法： public class ImageConverter : IValueConverter { //在载⼊数据的时候将数据转换为图⽚类型 public object Convert(object value, Type targetType, object parameter, eInfo culture) { try { Uri uri = new Uri((string)value, veOrAbsolute); BitmapImage img = new BitmapImage(uri); return img; } catch { return new BitmapImage(); } } //在页⾯上操作的时候，将图⽚类型转换为数据，这⾥只有再TwoWay的时候才有⽤ public object ConvertBack(object value, Type targetType, object parameter, eInfo culture) { BitmapImage img = value as BitmapImage; return teUri; } } public class BorderStyleConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, eInfo culture) { try { int isactive = (int)value; Style style = new Style(); FrameworkElement fe = new FrameworkElement(); style = (Style)dResource("opacity1"); if (isactive == 1) { style = (Style)dResource("opacity1"); } else { style = (Style)dResource("opacity2"); } return style; } catch { throw new NotImplementedException(); } } public object ConvertBack(object value, Type targetType, object parameter, eInfo culture) { throw new NotImplementedException(); } }View Code前台展⽰及数据模板定义代码：

Name="flowNodes" Style="{StaticResource websiteListStyle}">

View Code初始化数据模型对象，数据绑定代码：ObservableCollection WebTestDatas = new WebTestData();ource = WebTestDatas;View CodeOK，关于数据绑定的应⽤就先介绍到这⾥，我也是个学习中的开发者，欢迎各位⼤⽜提意见！