WPF -001 数据绑定

2016-08-20 10:35:55来源:http://yangyoushan.blog.51cto.com/7229571/1276455作者:yangyoushan人点击


WPF中界面全部都用XAML显示相应的控件,确切来说,WPF是想让WINFORM界面的开发像网页开发一样。在Winform中只要控件名.属性=设置的属性值,那么在WPF中不用再这么麻烦了。这里就说说数据绑定的用法吧。界面上有很多要显示后台数据的控件,后台数据改变了,那么如何让界面数据也实时发生改变呢?这就用到绑定。
使用数据绑定有这么几个步骤:
第一步,有一个实现了INotifyPropertyChanged接口的类;
第二步,页面显示的数据模型类,这个类要继承自第一步的实现了INotifyPropertyChanged接口的类;
第三步,界面的后台类要声明数据模型类,并且要绑定
this.DataContext = this.数据模型类对象;//绑定,这句才实现了绑定
第四步,界面控件的相应属性和模型类对象绑定,如下,
<TextBox Text="{Binding 数据模型类相应属性}" />
看代码:
1、实现接口的类

/// <summary>/// NotiyObject必须实现INotifyPropertyChanged接口/// </summary>public abstract class NotifyProperty : INotifyPropertyChanged{public event PropertyChangedEventHandler PropertyChanged;public void OnChangedProperties(string propertyName){if (this.PropertyChanged != null){this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));}}}

2、页面显示的数据模型类

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.ComponentModel;using System.Windows;namespace TestAttributeDependency.BindData{public class MainFormDataModel : NotifyProperty{private string textBoxContent = string.Empty;private Visibility btnShowContent = Visibility.Visible;private Visibility btnClearContent = Visibility.Collapsed;/// <summary>/// 文本框内显示的内容/// </summary>public string TextBoxContent{get{return this.textBoxContent;}set{this.textBoxContent = value;//必须调用该事件才能完成前台相应绑定内容的改变//而且propertyName最好和绑定的对象名称一致this.OnChangedProperties(@"TextBoxContent");}}/// <summary>/// 显示内容按钮是否显示/// </summary>public Visibility BtnShowContent{get{return this.btnShowContent;}set{this.btnShowContent = value;this.OnChangedProperties(@"BtnShowContent");}}/// <summary>/// 清空内容按钮是否显示/// </summary>public Visibility BtnClearContent{get { return btnClearContent;}set {btnClearContent = value;this.OnChangedProperties(@"BtnClearContent");}}}}

3、界面的后台声明数据模型对象

using System.Windows;using TestAttributeDependency.BindData;namespace TestAttributeDependency{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{/// <summary>/// 需要绑定的对象/// </summary>internal MainFormDataModel mainFormDataModel = new MainFormDataModel();/// <summary>/// 构造函数/// </summary>public MainWindow(){InitializeComponent();this.DataContext = this.mainFormDataModel;//绑定,这句才实现了绑定InitializeCutom();}/// <summary>/// 自定义初始化/// </summary>void InitializeCutom(){mainFormDataModel.TextBoxContent = string.Empty;mainFormDataModel.BtnShowContent = System.Windows.Visibility.Visible;mainFormDataModel.BtnClearContent = System.Windows.Visibility.Collapsed;}/// <summary>/// 显示内容按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void btnShowContent_Click(object sender, RoutedEventArgs e){mainFormDataModel.TextBoxContent = @"哈哈,按钮被点击了!";//通过Visibility控制控件的显示mainFormDataModel.BtnShowContent = Visibility.Collapsed;mainFormDataModel.BtnClearContent = Visibility.Visible;}/// <summary>/// 清空内容按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void btnClearContent_Click(object sender, RoutedEventArgs e){if (this.txtShowContent.Text.Length > 0){this.txtShowContent.Text = string.Empty;}mainFormDataModel.BtnShowContent = Visibility.Visible;mainFormDataModel.BtnClearContent = Visibility.Collapsed;}}}

4、前台界面的写法

<Window x:Class="TestAttributeDependency.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><TextBox Height="23" HorizontalAlignment="Left" Margin="12,70,0,0" Name="txtShowContent" VerticalAlignment="Top" Width="185" Text="{Binding TextBoxContent}" /><Button Content="显示内容" Height="23" HorizontalAlignment="Left" Margin="215,69,0,0" Name="btnShowContent" VerticalAlignment="Top" Width="75" Click="btnShowContent_Click" Visibility="{Binding BtnShowContent}" /><Button Content="清空内容" Height="23" HorizontalAlignment="Right" Margin="0,70,132,0" Name="btnClearContent" VerticalAlignment="Top" Width="75" Click="btnClearContent_Click" Visibility="{Binding BtnClearContent}" /></Grid></Window>

完成后效果如下:

点击“显示内容”按钮,TextBox中显示内容,并且“显示内容”按钮隐藏,"清空内容"按钮显示;点击"清空内容"按钮则相反。



代码下载:http://download.csdn.net/detail/yysyangyangyangshan/4487055


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台